I am currently making a connect4 game. In it , I am doing the task of how to put a piece when clicking the current column. So we can't put the piece in any position as we like because in practical it goes down to the place where it can be there.
So my logic was if there is a piece on the relevant space , then the top of that piece in the relevant column should be filled with the piece - What's the error here - I get this error when I click any column - Index.js:45 Uncaught TypeError: Cannot read properties of undefined (reading '[the column number]')-thank you!
HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="Styles.css">
<script src="Setup.js" defer></script>
<script src="Theme.js" defer></script>
<script src="Index.js"></script>
</head>
<body>
</body>
</html>
Setup.js
var rows = 6;
var columns = 7;
function setupBoard(rows , columns){
let connectFourBoard = document.createElement('div');
document.body.appendChild(connectFourBoard).classList.add('connect4board');
for(var i = 0; i< rows; i++){
let row = document.createElement('div');
document.querySelector('.connect4board').appendChild(row).classList.add('row');
for(var j = 0; j < columns; j++){
let column = document.createElement('div');
Array.from(document.getElementsByClassName('row'))[i].appendChild(column).classList.add('column');
}
}
}
setupBoard(rows , columns);
Index.js:
var connectFourBoard = document.getElementById("connect4board");
var Allrows = document.getElementsByClassName("row");
var Allcolumns = document.getElementsByClassName("column");
let firstColorPiece = document.createElement("div").classList.add("round");
let connect4Board2D = [
['' , '' , '' , '' , '' , '' , ''] ,
['' , '' , '' , '' , '' , '' , ''] ,
['' , '' , '' , '' , '' , '' , ''] ,
['' , '' , '' , '' , '' , '' , ''] ,
['' , '' , '' , '' , '' , '' , ''] ,
['' , '' , '' , '' , '' , '' , '']
];
class Human{
}
class AI{
}
players = [];
let player1 = new Human();
let player2 = new Human();
players[0] = player1;
players[1] = player2;
PlayingAPieceByThePlayer = () => {
Array.from(Allcolumns).forEach(function (relativeColumn) {
relativeColumn.onclick = () => {
getValidLocation(i=Array.from(Allcolumns).indexOf(relativeColumn));
}
});
}
getValidLocation = (i) => {
console.log(i);
currentColumn = i % 7;
// console.log(currentRow);
// currentRowsChildren = currentRow.children;
for(var j = 6; j >= 0; j++){
if((connect4Board2D[j][currentColumn]) == ''){
return
}else{
connect4Board2D[j+1][currentColumn] == 'x';
break;
}
}
console.log(connect4Board2D)
}
PlayingAPieceByThePlayer();
There could be unneccessary stuff not related to my question - connect4Board2D array is the copy of my board...
Aucun commentaire:
Enregistrer un commentaire