A remake of the classic tile-matching puzzle video game. This game is implemented with HTML5 Canvas API played via web browser.
With this game, users are be able to:
- Start, pause, and reset the game.
- Move pieces left and right.
- Rotate pieces.
- Soft drop pieces.
- Hard drop pieces.
- Toggle the background music.
- Keep track of their score.
- Keep track of high scores.
- Javascript for game logic.
- HTML5 Canvas for rendering.
- KingDOM for (some) DOM manipulation.
- Google Firebase for storing names and their corresponding high scores.
The board is a 2-dimensional array that consists a fixed width and height. In this case 10 x 20, which is instantiated in the board class.
this.createGrid(10, 20);createGrid(width, height) {
while (height--) {
this.grid.push(new Array(width).fill(0));
}
}The board visually looks like this:
| As a table: | In the actual canvas: |
|---|---|
 |
 |
Empty slots are represented with a 0 and merged pieces represent a value (1 - 7) depending which
kind of piece it is.
Merged pieces are static pieces that are not moving. If you look closely, the dropping I piece on the right has not been merged onto the board yet.
Each piece is represented using a matrix. This is how the T-piece looks like visually:
| As a table: | In the actual canvas: |
|---|---|
 |
 |
The rotatePiece function takes in a direction (1) when the ↑ (up arrow key) is pressed.
This rotates the piece clockwise.
rotatePiece(dir) {
for (let j = 0; j < this.piece.length; j++) {
for (let i = 0; i < j; i++) {
[
this.piece[i][j],
this.piece[j][i],
] = [
this.piece[j][i],
this.piece[i][j],
];
}
}
if (dir > 0) {
this.piece.forEach( row => row.reverse() );
} else {
this.piece.reverse();
}
this.player.rotate(this.piece, dir);
}The code representation above can be visually represented as follows:
