\n
![](\"https:\/\/miro.medium.com\/max\/1200\/1*hekydXN81H_tb8GT_OSQqw.png\")
<\/p>\n [ad_1]
\n<\/p>\n
The board in Tetris consists of cells, which are either occupied or not. My first thought was to represent a cell with boolean values. But, we can do better by using numbers. We can represent an empty cell with 0, and the colors with numbers 1\u20137.<\/p>\n
The next concept is representing the rows and columns of the game board. We can use an array of numbers to represent a row. And the board is an array of rows. In other words, a two dimensional (2D) array or what we call a matrix.<\/p>\n
Let\u2019s create a function in We can call this function in By using The X and Y coordinates represent the cells of the board. Now that we have the board, let\u2019s take a look at the moving parts.<\/p>\n A piece in Tetris is a shape consisting of four blocks that move as a unit. They are often called tetrominos and come in seven different patterns and colors. The names I, J, L, O, S, T, and Z are from the resemblance in their shape.<\/p>\n We represent the J tetromino as a matrix where the number two represents the colored cells. We add the row of zeros to get a center to rotate around:<\/p>\n The tetrominos spawn horizontally with J, L, and T spawning flat-side first.<\/p>\n<\/blockquote>\n We want the Piece class to know its position<\/strong> on the board, what color<\/strong> it has, and its shape<\/strong>. So to be able to draw itself on the board, it needs a reference to the canvas context<\/strong>.<\/p>\n For starters, we can hard-code the values of our piece:<\/p>\n To draw the tetromino on the board, we loop through all the cells of the shape. If the value in the cell is greater than zero, then we color that block.<\/p>\n The board keeps track of the tetromino on the board so we can create and paint it when we press the play button:<\/p>\n The blue J tetromino appears!<\/p>\n Next, let\u2019s make magic happen through the keyboard.<\/p>\n We need to connect the keyboard events to move the piece on the board. The Next, we map the keys to the key codes in Enum (enumeration) is a special type used to define collections of constants.<\/p>\n<\/blockquote>\n There are no built-in enums in JavaScript so let\u2019s make one by creating an object with the values:<\/p>\n The const can be a bit misleading when working with objects and arrays and does not actually make them immutable. To achieve this, we can use Object.freeze()<\/a>. A couple of gotchas here are:<\/p>\n To match the key events to actions, we can use object literal lookups.<\/p>\n ES6 allows property keys of object literals to use expressions, making them computed property keys.<\/p>\n<\/blockquote>\n We need the brackets to get computed property names so that we can use our constants. This is a simplified example of how it works:<\/p>\n We want to send in the current tetromino and return a copy of it together with the change in coordinates. For this, we can use the spread operator to get a shallow copy and then change the coordinates to our desired position.<\/p>\n In JavaScript, we can use shallow copying<\/strong> to copy primitive data types like numbers and strings. In our case, the coordinates are numbers. ES6 offers two shallow copy mechanisms: Object.assign()<\/a> and the spread operator<\/a>.<\/p>\n<\/blockquote>\n In other words, a lot is going on in this code snippet:<\/p>\n Which we can use with the code beneath to get the new state without mutating the original piece. It\u2019s important because we don\u2019t always want to move to a new position.<\/p>\n Next, we add an event listener that listens to keydown events<\/a>:<\/p>\n Now we are listening to the keyboard events, and if we press left, right, or down arrows, then we can see the piece moving.<\/p>\n We have a movement! However, ghost pieces going through walls are not what we want.<\/p>\n<\/div>\nboard.js<\/code> that returns an empty board with all cells set to zero. The fill()<\/a> method comes in handy here:<\/p>\nmain.js<\/code> when we press play:<\/p>\nconsole.table<\/code> we see the representation of the board in numbers:<\/p>\n[2<\/strong>, 0, 0],\n
move<\/code> function changes the x or y variable of the current piece to change its position on the board.<\/p>\nmove(p) {Enums<\/h2>\n
constants.js<\/code>. For this, it would be nice to have an enum.<\/p>\n\n
\n
Object literals<\/h2>\n
\n
const X = 'x';\n
const p = this<\/em>.moves[event.key](this<\/em>.piece);<\/span><\/pre>\n