Help with tetris tutorial

Front End Help
#1 

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] ]

I have a question. I watched this video from Ania Kubow on making this Tetris game, and was following along until the point where she needed to build the shapes using arrays, at which point I became lost and couldn’t continue. For example, how does the array above build an L-shaped tetramino?

TypeError: undefined...help
#2

What you posted is an array with four elements, each element itself an array with four numeric values. I’m assuming each one of the sub arrays represents some sort of coordinate system that the game uses to draw the shape? But with only the information you gave us there is no way I can know for sure how that works. I would need to know what this data structure represents, which is the question you are asking.

Maybe someone familiar with building tetris games can give you more insight? I have never done it so I might be missing something obvious here. But it’s hard to look at a data structure like this without any other information and know how it works.

#3

Here’s the code of js and css up to this point. I’m lost too.

style.css
.grid{
  width: 200px;
  height: 400px;
  display: flex;
  flex-wrap: wrap;
  background-color: yellow;
}

.grid div {
  height: 20px;
  width: 20px;
  background-color: red;
}


app.js
document.addEventListener('DOMContentLoaded', () => {
  const grid = document.querySelector('.grid') // look thru html, find element w/ class name grid, everytime you use var grid, affect class name grid element
  let squares = Array.from(document.querySelectorAll('.grid div')) // turn all divs into Array, each will have specfic index
  const scoreDisplay = document.querySelector('#score')
  const startBtn = 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]
  ]

})


<!DOCTYPE html>

<html lang="en" dir="ltr">
  <<head>
    <<meta charset="utf-8">
    <<script src="app.js" charset="utf-8"></script>
    <link rel="stylesheet" href="style.css"></<link>
    <<title>Home</title>
  </head>
  <<body>

    <h3>Score:<span id="score">0 </span></h3>
    <button type="button" id="start-button">Start/Pause</button>
    <div class="grid">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>    
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>

    </div>
  </body>
</html>
#4

Not large enough snapshot to really say.

Also, it’s a bit unusual in my experience to use width*anything. This is typically done with matrices and using colors. And to change the image you’d just change the colors of those matrices.

Example:
255, 255, 0, 255
255, 255, 0, 255
255, 255, 0, 255
0, 0, 0, 255

would make an _| sort of symbol. The numbers represent colors. Then to move rotate a piece you’d just update those numbers accordingly. Note 255 is white and 0 is black.

This is how OpenCV (computer vision) does it.

#5

I got confused by this too.
Here’s a response from Ania Kubrow’s on Twitter.

" Hey, the width is a const that we gave a value of 10 to, so every time you see width, think the number 10. We are then passing through these numbers into our squares array which is our grid. This is a good lesson from

@freeCodeCamp

that might help!"

Good luck!