Tetris Arcade Game – Atari 1988

A finales de los ’80 y principio de los ’90 del siglo pasado, el Tetris, creado por Aleksei Pazhitnov en 1984, empezaba a causar furor en nuestro país. Recuerdo esas partidas infinitas donde nos retábamos a poner la puntuación más alta, pues cuando alcanzabas 999999 puntos el contador volvía a cero, así que la cuestión era saber cuando dejarse morir para estar el primero en el ranking.

Por aquel entonces ni se me ocurrió pensar que 30 años después podría crear mi propio juego de Tetris incrustado en un Arcade 3D y 100% jugable.

Demo Tetris

Aunque este Tetris está hecho hace ahora casi tres años, con él comienzo una serie de artículos de Juegos que iré publicando en el blog próximamente.

El funcionamiento

El funcionamiento es muy simple, cada tetrominó (así se llaman las piezas) está formado básicamente por ceros 0 y unos 1. Los ceros son espacios vacíos y se pueden rellenar con trozos (unos) de otras piezas.

A continuación están representados, en código Javascript, los siete tetrominós que se usan en el Tetris.

const tetrominos = {
  'I': [
    [0,0,0,0],
    [1,1,1,1],
    [0,0,0,0],
    [0,0,0,0]
  ],
  'J': [
    [1,0,0],
    [1,1,1],
    [0,0,0],
  ],
  'L': [
    [0,0,1],
    [1,1,1],
    [0,0,0],
  ],
  'O': [
    [1,1],
    [1,1],
  ],
  'S': [
    [0,1,1],
    [1,1,0],
    [0,0,0],
  ],
  'Z': [
    [1,1,0],
    [0,1,1],
    [0,0,0],
  ],
  'T': [
    [0,1,0],
    [1,1,1],
    [0,0,0],
  ]
};

Cuando se completa una línea de unos (que son diez unos alineados: 1 1 1 1 1 1 1 1 1 1 ), se elimina esa línea y todas las piezas que están sobre la línea caen rellenando ese espacio que ha quedado vacío, pero manteniendo los huecos vacíos que se crearon al colocar cada pieza.

Para no reinventar la rueda (buen consejo que me dio un profe de programación hace años) he usado uno de los miles de Tetris en canvas que hay por la red, en concreto este de SketchxCoding alojado en replit.com, el que he visto más simple pues no quería nada recargado.

Mejoras

Una vez creada la caja en 3D del arcade, y ya con el Tetris en canvas incrustado en ella, se me antojaba triste y finalmente decidí añadir algunas mejoras, para alegrarlo:

• Puntuación
• Contador de líneas
• Contador de rondas
• Incremento de velocidad
• Estadísticas
• Sonidos
• Música con tres pistas de audio diferentes
• Previsualización de la siguiente pieza
• Y una configuración (trampa) personalizada para que salgan muchos palos.

El palo es la pieza roja, la que siempre ansiábamos que saliera, pues era una jugada clásica el dejar el hueco para, con un palo, hacer cuatro líneas a la vez (daba más puntos). Los palos a veces se resistían y no salían con mucha frecuencia, y ya que lo iba a programar yo… pues que salgan un porrón de palos… ¿no?

Opciones

Para mejorar la jugabilidad he añadido algunas opciones que modifican la visualización del arcade y activan música y sonidos que, bajo mi punto de vista, mejoran la experiencia. Son las siguientes:

• También hay una opción de drag and drop que aplica a todo el arcade.
• Además se puede controlar el nivel de zoom con la rueda del ratón.
• El doble click con el ratón acciona (o detiene) una animación circular que muestra todo el arcade.
• Recientemente para la publicación en el blog he añadido la opción de pausar el juego pulsando la tecla P.

Controles

El juego se controla con las flechas del teclado, y hay ciertos controles extra con algunas de las teclas :

▼	Desplazar a la derecha.
▼	Desplazar a la izquierda.
▼	Acelerar la pieza hacia abajo
SPACEBAR ó ▲	Girar la pieza.
ESC	Centrar la vista.
P	Pausar el juego.

Extras

He añadido algunas chorradas más, básicamente por diversión.

CSS

Todos los dibujos que se ven están hechos solo con CSS; desde la pantalla del juego, hasta los laterales del arcade, pasando por las letras luminosas, o los iconos de opciones. Lo creas o no, hay cero imágenes.

Recursos

Algunos recursos que me han sido de mucha utilidad:

El resultado final

Como siempre, recomiendo jugar a pantalla completa para disfrutarlo más.

Ver el Pen Tetris Arcade Game – Atari 1988 por Josetxu (@josetxu) on CodePen.

Espero que lo disfrutes de la misma manera que lo he disfrutado yo haciéndolo.