JS Tetris Tutorial Help!

1

I’m having some trouble with Ania Kubow’s Javascript Tetris Tutorial (https://www.youtube.com/watch?v=rAUn1Lom6dw)

I’m trying to add a blue color to a couple of divs to create a L shape tetris piece but am having problems with the function;

function draw() {
  current.forEach((index) => {
    squares[currentPosition + index].classList.add("tetromino");
  });
}
draw();

Uncaught TypeError: Cannot read property 'classList' of undefined
    at app.js:59
    at Array.forEach (<anonymous>)
    at draw (app.js:58)
    at app.js:63

these are my error msgs >:(
on the video it is around the 42 min mark

Any help greatly appreciated :slight_smile:

Here is the rest of my JS code

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

//the tetrominoes

const lTetromino = [
  [1, width + 1, width * 2 + 1, 2],
  [width, width + 1, width + 2, width * 2 + 2],
  [1, width + 1, width * 2 + 1, width * 2],
  [width, width * 2, width * 2 + 1, width * 2 + 2],
];

const zTertrmino = [
  [0, width, width + 1, width * 2 + 1],
  [0, 1, width + 1, width + 2],
  [0, width, width + 1, width * 2 + 1],
  [0, 1, width + 1, width + 2],
];

const tTetromino = [
  [width, 1, width + 1, width + 2],
  [1, width + 1, width * 2 + 1, width + 2],
  [width, width + 1, width + 2, width * 2 + 1],
  [1, width, width + 1, width * 2],
];

const oTetromino = [
  [0, 1, width, width + 1],
  [0, 1, width, width + 1],
  [0, 1, width, width + 1],
  [0, 1, width, width + 1],
];

const iTetromino = [
  [1, width + 1, width * 2 + 1, width * 3 + 1],
  [width, width + 1, width + 2, width + 3],
  [1, width + 1, width * 2 + 1, width * 3 + 1],
  [width, width + 1, width + 2, width + 3],
];

const theTetrominos = [
  lTetromino,
  zTertrmino,
  tTetromino,
  oTetromino,
  iTetromino,
];

let currentPosition = 4;
let current = theTetrominos[0][0];

//draw first rotation

function draw() {

  current.forEach((index) => {
    squares[currentPosition + index].classList.add("tetromino");
  });
}

draw();
2

Hey Jonny,

nice to meet you!

I’ve edited your post for readability, because it was very hard to read.

You can use the “preformatted text” tool in the editor ( </> ) to add code.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

The error Uncaught TypeError: Cannot read property 'classList' of undefined says, that you want to access the classList of something that doesn’t exist.

That “something” is squares[currentPosition + index].
If you log this to your console, what do you see?

3

Hi Miku,
nice to meet you too! Thanks for the help and advice on ‘preformatted text’.

console.log(squares[currentPosition + index]);

this returns nothing in my console.

If I add a dot at the end
console.log(squares[currentPosition + index]).;

I get Uncaught SyntaxError: Unexpected token ';'

If I just enter

console.log(squares)

or log any of my other variables or even a string, I get nothing back. Maybe I have a problem with my live server extension or google chrome as well?

Grateful for any feedback or advice,
Thanks

4

Alright,
then I would try to log currentPosition and index separately and see if it makes sense to add these two values in squares[currentPosition + index].

5

thanks,

yes any variable I log is not returning anything in my console. I think it makes sense to add those solely because that is what is happening in the tutorial 41:52 mark.

I think I will just have to spend some time thinking it through. Any more suggestions would be highly appreciated. thankyou for the support.