Haciendo un connect 4 usando Vanilla JavaScript. Usando un "clic" de escucha de eventos para insertar un disco de color en una columna. Los discos se siguen apilando infinitamente. Necesito que pare después de las 6. Y luego 42 en total. Lo tengo dividido en 7 columnas. Cada uno tiene su propio controlador de eventos para el "clic". ¿Cómo consigo que inserte cada clic en una matriz? https://youtu.be/Jqm5m75pq6A Aquí hay un ejemplo de lo que tengo
let gameBoard = [ [null, null, null, null, null, null, null], [null, null, null, null, null, null, null], [null, null, null, null, null, null, null], [null, null, null, null, null, null, null], [null, null, null, null, null, null, null], [null, null, null, null, null, null, null], ]; let column0 = document.querySelector("#column0"); let column1 = document.querySelector("#column1"); let column2 = document.querySelector("#column2"); let column3 = document.querySelector("#column3"); let column4 = document.querySelector("#column4"); let column5 = document.querySelector("#column5"); let column6 = document.querySelector("#column6"); column0.addEventListener("click", function () { // console.log("column 1"); if (currentPlayer === 1) { // column1.innerHTML = let black = document.createElement("span"); black.className = "blackDisc"; column0.append(black); currentPlayer += 1; console.log("Current player:" + currentPlayer); discCount++; gameBoard[5][0] = 1; console.log(currentPlayer); } else if (currentPlayer === 2) { let red = document.createElement("span"); red.className = "redDisc"; column0.append(red); currentPlayer -= 1; console.log("current player:" + currentPlayer); discCount += 1; gameBoard[5][0] = 2; } });Podría simplemente contar cuántos elementos secundarios hay en la columna.
let column0 = document.querySelector("#column0"); column0.addEventListener("click", function () { if ( column0.querySelectorAll( 'span' ).length < 7 ) { // do game logic here only if there aren't 6 spans in the column Puede hacer lo mismo para todos los intervalos en todo el tablero si tiene una referencia a un contenedor externo desde el que realizar la querySelectorAll() .
La otra opción sería almacenar sus datos en su matriz gameBoard y verificar los valores. Esta forma probablemente sería más rápida, pero un poco más complicada.
Simplemente comience con matrices vacías, para que no tenga que repetirlas en cada clic y contar cuántos elementos ya están en la matriz de la columna en la que se hizo clic:
let currentPlayer = 1; //starting with empty arrays; let gameBoard = [[],[],[],[],[],[],[]]; for(let i = 0; i < 7; i++) { const column = document.getElementById("column" + i); column.addEventListener("click", function(e) { //check if current column has 7 items if (gameBoard[i].length > 6) return; //add item to the column gameBoard[i].push(currentPlayer); const span = document.createElement("span"); span.className = (currentPlayer == 1 ? "black" : "red") + "Disc"; column.appendChild(span); currentPlayer = !--currentPlayer + 1; // console.log("Current player:" + currentPlayer); // console.log("gameBoard", gameBoard); }); } .content { display: flex; } .content > * { width: 1.3em; height: calc(1.2em * 7 + 0.1em); outline: 1px solid black; background-color: white; display: flex; flex-direction: column-reverse; } .blackDisc, .redDisc { width: 1em; height: 1em; border-radius: 100%; display: inline-block; vertical-align: top; margin: 0.1em; } .blackDisc { background-color: black; } .redDisc { background-color: red; } <div class="content"> <div id="column0"></div> <div id="column1"></div> <div id="column2"></div> <div id="column3"></div> <div id="column4"></div> <div id="column5"></div> <div id="column6"></div> </div>