Estoy tratando de hacer un juego que tenga una columna de bloques (con clases aleatorias asignadas que son q/w/e/r) y cuando el bloque inferior se rompe, toda la columna se desplaza hacia abajo y genera un nuevo bloque. Me ha costado mucho hacer que mi código se aplique a todos los bloques de la columna.
Lo que me gustaría lograr es que al presionar una tecla, el bloque en la posición final (cell58) se verifique para ver si coincide con la tecla (luego agrega o pierde puntaje).
Puse los valores en una matriz, pero estoy luchando por crear una nueva matriz con shift y pop para agregar y eliminar nuevos valores (bloques)
const grid = document.querySelector('.grid') const width = 9 const height = 10 const cellCount = width * height const cells = [] const blockClassArray = ['q', 'w', 'e', 'r'] // array of block classes to randomly assign on spawn let blockCurrentPositions = [58, 49, 40, 31, 22, 13, 4] // creating the grid with blocks in the desired column function createGrid() { for (let i = 0; i < cellCount; i++) { const cell = document.createElement('div') cell.innerText = i grid.appendChild(cell) cells.push(cell) } // addBlock(blockStartPosition) for (let i = 0; i < blockCurrentPositions.length; i++) { createBlock(blockCurrentPositions[i]) } } // function to randomise the block classes function createBlock(position) { cells[position].classList.add(blockClassArray[Math.floor(Math.random() * blockClassArray.length)]) } function handleKeyDown(event) { const key = event.keyCode // store the event.keyCode in a variable to save us repeatedly typing it out const q = 81 const w = 87 const e = 69 const r = 82 // define an array of the classes in the blockCurrentPositions const columnArray = blockCurrentPositions.map(position => { return cells[position].classList.value })