I am trying to make a game that has a column of blocks (with random classes assigned that are q/w/e/r) and when the bottom block is broken, the whole column shifts down a row and generates a new block. I have really struggled to make my code apply to all the blocks in the column.
What I would like to achieve is upon a key being pressed, the block in the final position (cell58) gets checked to see if it matches the key (then adds or loses score).
I have put the values into an array but am struggling to create a new array with shift and pop to add and remove new values(blocks)
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
})