Hacer un tetris

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

A continuación tienes una guía paso a paso para montar el videojuego tetris. Tienes el código original en el que esta basada esta guía en este enlace.

Función loop

Creamos la función loop que contendrá la lógica principal.

Dentro de esta función dibujaremos un rectángulo de color cýan. Cada una de las piezas del tetris estará compuesta de varias piezas como esta.

const canvas = document.getElementById("game");
const context = canvas.getContext("2d");
const grid = 32;

function loop() {

        context.fillStyle = "cyan";

        context.fillRect(5 * grid, 4 * grid, grid, grid);
}

loop();

Pintando todo el tablero

En vez de un solo cuadrado, vamos a llenar el tablero de cuadrados.

function loop() {
      context.fillStyle = "cyan";
      for (let row = 0; row < 20; row++) {
            for (let col = 0; col < 10; col++) {
                  context.fillRect(col * grid, row * grid, grid - 1, grid - 1);
            }
      }
}

Pintando sólo las casillas correspondientes a una pieza del tetris

const matrix = [
   [0, 0, 0, 0],
   [1, 1, 1, 1],
   [0, 0, 0, 0],
   [0, 0, 0, 0],
];

for (let row = 0; row < matrix.length; row++) {
  for (let col = 0; col < matrix[row].length; col++) {
    if (matrix[row][col]) {
      context.fillRect(col * grid, row * grid, grid, grid);
    }
  }
}

Establecemos una pequeña separación entre las piezas del puzle

context.fillRect(col * grid, row * grid, grid - 1, grid - 1);

Añadiendo objeto tetromino

Envolvemos la matriz en el objeto tetromino:

let tetromino = {
  matrix: [
    [0, 0, 0, 0],
    [1, 1, 1, 1],
    [0, 0, 0, 0],
    [0, 0, 0, 0],
  ],
  row: 3, 
  col: 3, 
};

context.fillStyle = "cyan";

for (let row = 0; row < tetromino.matrix.length; row++) {
  for (let col = 0; col < tetromino.matrix[row].length; col++) {
    if (tetromino.matrix[row][col]) {

      context.fillRect(
        (tetromino.col + col) * grid,
        (tetromino.row + row) * grid,
        grid - 1,
        grid - 1
      );
    }
  }
}

Función loop

let count = 0;

const loop = () => {
  rAF = requestAnimationFrame(loop);

  context.fillStyle = "cyan";

  if (++count > 35) {
    tetromino.row++;
    count = 0;
  }

  for (let row = 0; row < tetromino.matrix.length; row++) {
    for (let col = 0; col < tetromino.matrix[row].length; col++) {
      if (tetromino.matrix[row][col]) {

        context.fillRect(
          (tetromino.col + col) * grid,
          (tetromino.row + row) * grid,
          grid - 1,
          grid - 1
        );
      }
    }
  }
};

rAF = requestAnimationFrame(loop);

Limpiamos la pantalla en cada frame

context.clearRect(0, 0, canvas.width, canvas.height);

Mover el tetromino

document.addEventListener("keydown", function (e) {
  // left and right arrow keys (move)
  console.log(e.which);
  if (e.which === 37 || e.which === 39) {
    const col = e.which === 37 ? tetromino.col - 1 : tetromino.col + 1;
    tetromino.col = col;
  }
});