TypeError: undefined...help

1

Can someone please explain me why do i get the error -> TypeError: squares[(currentPosition + index)] is undefined

const width = 10;
const grid = document.querySelector('.grid');
let squares = Array.from(document.querySelectorAll('.grid div'));
const ScoreDisplay = document.querySelector('#score');
const StartBtn = document.querySelector('#start-button');
const GRID_WIDTH = 10;

//Os Tetraminós
const lTetromino = [
    [1, GRID_WIDTH + 1, GRID_WIDTH * 2 + 1, 2],
    [GRID_WIDTH, GRID_WIDTH + 1, GRID_WIDTH + 2, GRID_WIDTH * 2 + 2],
    [1, GRID_WIDTH + 1, GRID_WIDTH * 2 + 1, GRID_WIDTH * 2],
    [GRID_WIDTH, GRID_WIDTH * 2, GRID_WIDTH * 2 + 1, GRID_WIDTH * 2 + 2]
  ]

const zTetromino = [
    [0, GRID_WIDTH, GRID_WIDTH + 1, GRID_WIDTH * 2 + 1],
    [GRID_WIDTH + 1, GRID_WIDTH + 2, GRID_WIDTH * 2, GRID_WIDTH * 2 + 1],
    [0, GRID_WIDTH, GRID_WIDTH + 1, GRID_WIDTH * 2 + 1],
    [GRID_WIDTH + 1, GRID_WIDTH + 2, GRID_WIDTH * 2, GRID_WIDTH * 2 + 1]
  ]

  const tTetromino = [
    [1, GRID_WIDTH, GRID_WIDTH + 1, GRID_WIDTH + 2],
    [1, GRID_WIDTH + 1, GRID_WIDTH + 2, GRID_WIDTH * 2 + 1],
    [GRID_WIDTH, GRID_WIDTH + 1, GRID_WIDTH + 2, GRID_WIDTH * 2 + 1],
    [1, GRID_WIDTH, GRID_WIDTH + 1, GRID_WIDTH * 2 + 1]
  ]

  const oTetromino = [
    [0, 1, GRID_WIDTH, GRID_WIDTH + 1],
    [0, 1, GRID_WIDTH, GRID_WIDTH + 1],
    [0, 1, GRID_WIDTH, GRID_WIDTH + 1],
    [0, 1, GRID_WIDTH, GRID_WIDTH + 1]
  ]

  const iTetromino = [
    [1, GRID_WIDTH + 1, GRID_WIDTH * 2 + 1, GRID_WIDTH * 3 + 1],
    [GRID_WIDTH, GRID_WIDTH + 1, GRID_WIDTH + 2, GRID_WIDTH + 3],
    [1, GRID_WIDTH + 1, GRID_WIDTH * 2 + 1, GRID_WIDTH * 3 + 1],
    [GRID_WIDTH, GRID_WIDTH + 1, GRID_WIDTH + 2, GRID_WIDTH + 3]
  ]

const theTetrominoes = [lTetromino, zTetromino, tTetromino, oTetromino, iTetromino];

let currentPosition = 4;
let currentRotation = 0;

//selecionar aleatoriamente um tetraminó e sua primeira rotação
let random = Math.floor(Math.random()*theTetrominoes.length);

let current = theTetrominoes[random][currentRotation];

//desenhar o tetraminó
function draw() {
    current.forEach(index => {
    	if([currentPosition + index] !== 'undefined') {
    		squares[currentPosition + index].classList.add('tetromino')
    	}
    })
  }

//abrir o tetraminó
function undraw(){
	current.forEach(index => {
		squares[currentPosition + index].classList.remove('tetromino')
	})
}

//fazer o tetraminó se mover para baixo a cada segundo
timerId = setInterval(moveDown, 1000)

//função mover para baixo
function moveDown(){
	undraw()
	currentPosition += width
	draw()
}

The html:

<!DOCTYPE html>
<html lang="pt-br" dir="ltr">
<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="app.js" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="estilo.css">
	<title>Tetris Básico</title>
</head>
<body>
	<h3>Pontuação:<span id="score">0</span></h3>
	<button id="start-button">Iniciar/Pausar</button>
	<div class="grid">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>
</body>
</html>
2

Hello there,

I am not sure, but put console.log(index) inside this forEach:

current.forEach(index => {
    	if([currentPosition + index] !== 'undefined') {
    		squares[currentPosition + index].classList.add('tetromino')
    	}
    })
3

A post was split to a new topic: Help with tetris tutorial

4

I did it, but the console did not return anything.

5

ok, I added an eventListener and solved this problem, but now the console says that squares is not defined, look:

const GRID_WIDTH = 10;

document.addEventListener('DOMContentLoaded', () => {
	const grid = document.querySelector('.grid');
	let squares = Array.from(document.querySelectorAll('.grid div'))
	const ScoreDisplay = document.querySelector('#score');
	const StartBtn = document.querySelector('#start-button');
	const width = 10;
})




//Os Tetraminós
const lTetromino = [
[1, GRID_WIDTH + 1, GRID_WIDTH * 2 + 1, 2],
[GRID_WIDTH, GRID_WIDTH + 1, GRID_WIDTH + 2, GRID_WIDTH * 2 + 2],
[1, GRID_WIDTH + 1, GRID_WIDTH * 2 + 1, GRID_WIDTH * 2],
[GRID_WIDTH, GRID_WIDTH * 2, GRID_WIDTH * 2 + 1, GRID_WIDTH * 2 + 2]
]

const zTetromino = [
[0, GRID_WIDTH, GRID_WIDTH + 1, GRID_WIDTH * 2 + 1],
[GRID_WIDTH + 1, GRID_WIDTH + 2, GRID_WIDTH * 2, GRID_WIDTH * 2 + 1],
[0, GRID_WIDTH, GRID_WIDTH + 1, GRID_WIDTH * 2 + 1],
[GRID_WIDTH + 1, GRID_WIDTH + 2, GRID_WIDTH * 2, GRID_WIDTH * 2 + 1]
]

const tTetromino = [
[1, GRID_WIDTH, GRID_WIDTH + 1, GRID_WIDTH + 2],
[1, GRID_WIDTH + 1, GRID_WIDTH + 2, GRID_WIDTH * 2 + 1],
[GRID_WIDTH, GRID_WIDTH + 1, GRID_WIDTH + 2, GRID_WIDTH * 2 + 1],
[1, GRID_WIDTH, GRID_WIDTH + 1, GRID_WIDTH * 2 + 1]
]

const oTetromino = [
[0, 1, GRID_WIDTH, GRID_WIDTH + 1],
[0, 1, GRID_WIDTH, GRID_WIDTH + 1],
[0, 1, GRID_WIDTH, GRID_WIDTH + 1],
[0, 1, GRID_WIDTH, GRID_WIDTH + 1]
]

const iTetromino = [
[1, GRID_WIDTH + 1, GRID_WIDTH * 2 + 1, GRID_WIDTH * 3 + 1],
[GRID_WIDTH, GRID_WIDTH + 1, GRID_WIDTH + 2, GRID_WIDTH + 3],
[1, GRID_WIDTH + 1, GRID_WIDTH * 2 + 1, GRID_WIDTH * 3 + 1],
[GRID_WIDTH, GRID_WIDTH + 1, GRID_WIDTH + 2, GRID_WIDTH + 3]
]

const theTetrominoes = [lTetromino, zTetromino, tTetromino, oTetromino, iTetromino];

let currentPosition = 4;
let currentRotation = 0;

//selecionar aleatoriamente um tetraminó e sua primeira rotação
let random = Math.floor(Math.random()*theTetrominoes.length);

let current = theTetrominoes[random][currentRotation];

//desenhar o tetraminó
function draw() {
    current.forEach(index => {
    	console.log(index);
    	if([currentPosition + index] !== 'undefined') {
    		squares[currentPosition + index].classList.add('tetromino')
    	}
    })
  }

//abrir o tetraminó
function undraw(){
	current.forEach(index => {
		squares[currentPosition + index].classList.remove('tetromino')
	})
}

//fazer o tetraminó se mover para baixo a cada segundo
timerId = setInterval(moveDown, 1000)

//função mover para baixo
function moveDown(){
	undraw()
	currentPosition += width
	draw()
}
6

I just put the whole code inside the eventListener and it worked well, thank you very mush.

1 Like