En este momento, sabemos que, utilizando el elemento Canvas de HTML5, podemos dibujar el tablero, así como la pieza que va cayendo. Pero nada se mueve, la pieza no cae, y desde luego, no podemos moverla.
Las piezas disponibles, para seleccionar la que está cayendo en este momento, son las siguientes:
const PIECES = [
new PieceSquare(),
new PieceBar(),
new PieceL(),
new PieceInverseL(),
new PieceS(),
new PieceInverseS() ];
Necesitamos un bucle de juego, y para ello sería interesante disponer de, o bien varias variables y funciones, o mejor todavía, un objeto. Se trataría de una clase que solo tendría una posible instancia. En otro lenguaje de programación, utilizaríamos el patrón Singleton. Pero en JavaScript, podemos crear un objeto único utilizando la notación JSON (JavaScript Simplified Object Notation), que podemos utilizar directamente en nuestro código fuente.
const game = {
score: 0,
piece: null,
board: null,
canvas: null,
keysPressed: [],
pickRandomPiece: () => {
return PIECES[ Math.ceil( Math.random() * PIECES.length ) - 1 ];
},
chooseNewPiece: () => {
game.piece = game.pickRandomPiece();
game.canvas.piece = game.piece;
game.piece.reset( game.board.cols );
},
// más cosas...
}
Nuestro objecto, que va a llevar el estado del juego, es game. Dentro de este objeto, construiremos el tablero del juego, la pieza actual, el canvas donde vamos a pintar el juego, etc.
const game = {
// más cosas...
stopGame: () => {
const dvStart = document.getElementById( "dvStart" );
const dvGame = document.getElementById( "dvGame" );
dvStart.style.display = "block";
dvGame.disabled = true;
},
// más cosas...
}
En nuestro (parco) HTML, tendremos un botón (Button), que servirá para comenzar el juego. Habrá un DIV que contendrá este botón, y un segundo DIV que contendrá el HTML Canvas. Según ocultemos o visualicemos (style="display: none") o (style="display: block"), cada uno de estos DIVs, podremos comenzar el juego o jugar.
const game = {
startGame: () => {
const dvStart = document.getElementById( "dvStart" );
const dvGame = document.getElementById( "dvGame" );
const cvPaint = document.getElementById( "cvPaint" );
// Set
dvStart.style.display = "none";
dvGame.disabled = false;
game.score = 0;
game.board = new Board( 26, 12 );
game.canvas = new Canvas( cvPaint, game.board );
game.chooseNewPiece();
// Listeners
window.requestAnimationFrame( () => game.showFrame() );
document.onkeydown = (e) => {
if ( e.isComposing
|| e.key === "Dead" )
{
return;
}
game.keysPressed.push( e );
};
return false;
},
// más cosas...
}
Además, debemos poder "animar" el juego. Tiene que haber una forma de conseguir que, una vez se pinte un frame, establezcamos algún mecanismo para "encargar" el pintado del siguiente.
Podemos establecer el pintado del primer frame con window.requestAnimationFrame(), al que se le pasa una lambda con el código a ejecutar. De acuerdo, pero... ¿cómo hacemos para ejecutar la siguiente? Pues volvemos a asignar window.requestAnimationFrame().
En cuanto a las pulsaciones de teclas, se utiliza el método document.onkeydown, de manera que en este método se filtran las teclas que no producen ninguna pulsación, y se guarda en la lista keysPressed.
const game = {
// más cosas...
chkKeyboard: () => {
for(let key of game.keysPressed) {
if ( key.code == "ArrowLeft" ) {
game.piece.col -= 1;
if ( game.chkPieceClash() ) {
game.piece.col += 1;
}
}
else
if ( key.code == "ArrowRight" ) {
game.piece.col += 1;
if ( game.chkPieceClash() ) {
game.piece.col -= 1;
}
}
else
if ( key.code == "ArrowUp" ) {
game.piece.rotate();
if ( game.chkPieceClash() ) {
game.piece.unrotate();
}
}
else
if ( key.code == "ArrowDown" ) {
game.piece.row += 1;
if ( game.chkPieceClash() ) {
game.piece.row -= 1;
}
}
}
game.keysPressed = [];
},
// más cosas...
}
En cuanto a chkKeyboard(), se detectan las teclas de los cursores, y en caso de que una de ellas sea la flecha hacia arriba, la pieza se rota. En el resto de los casos, la posición de la pieza se cambia... a no ser que se compruebe que coincida con el tablero.
const game = {
// más cosas...
chkPieceClash: () => {
const PIECE = game.piece;
const BOARD = game.board;
let toret = 1;
if ( game.chkInbounds() ) {
toret = 0;
for(let i = 0; i < PIECE.height; ++i)
{
if ( ( PIECE.row + i ) >= BOARD.rows ) {
break;
}
for(let j = 0; j < PIECE.width; ++j)
{
if ( ( PIECE.col + j ) >= BOARD.cols ) {
break;
}
toret |= PIECE.shape[i][j]
& BOARD.cell( PIECE.row + i, PIECE.col + j );
if ( Boolean( toret ) ) {
break;
}
}
}
}
return Boolean( toret );
},
// más cosas....
}
Para comprobar si la pieza coincide con alguna pieza almacenada en el tablero, será necesario comprobar si alguna de las celdas de la pieza y la posición correspondiente en el tablero contienen ambas un 1. En ese caso, la pieza no puede moverse a esa posición, con lo que será necesario deshacer el movimiento. Si es una rotación, será necesario cancelar la rotación (método Piece.unrotate()).
chkFilledRows: () => {
const PIECE = game.piece;
const BOARD = game.board;
let toret = [];
for(let i = 0; i < PIECE.height; ++i) {
const NUM_ROW = i + PIECE.row;
if ( BOARD.getRow( NUM_ROW ).every( x => Boolean(x) ) ) {
toret.push( NUM_ROW );
}
}
return toret;
},
portPieceToBoard: () => {
const PIECE = game.piece;
const BOARD = game.board;
const MAX_HEIGHT = Math.min( BOARD.rows - 1, PIECE.row + PIECE.height );
const MAX_WIDTH = Math.min( BOARD.cols - 1, PIECE.col + PIECE.width );
for(let i = 0; i < PIECE.height; ++i) {
for(let j = 0; j < PIECE.width; ++j) {
const BOARD_POS_ROW = PIECE.row + i;
const BOARD_POS_COL = PIECE.col + j;
if ( BOARD_POS_ROW >= BOARD.rows
|| BOARD_POS_COL >= BOARD.cols )
{
break;
}
if ( Boolean( PIECE.shape[ i ][ j ] ) ) {
BOARD.setCell( BOARD_POS_ROW, BOARD_POS_COL );
}
}
}
return;
}
// más cosas...
}
El método chkFilledRows() comprueba si todas las celdas de alguna de las filas del tablero están llenas. Con el método every() para Array, podemos comprobar si se cumple una condición. De nuevo convertimos los 1 y 0 de la fila a booleano, y comprobamos entonces si todas dan true. En este último caso, pasamos el índice de la fila a un Array que vamos a devolver. Después llamaremos a Board.removeRows() para eliminarlas.
El método portPieceToBoard() comprueba todas las celdas de una pieza, y que en caso de que contengan un 1, portar ese 1 a la misma posición, pero en el tablero.
Ya solo nos falta comprobar si hay colisión entre la pieza que desciende y el contenido del tablero. Nos aprovechamos de que tanto la pieza como el tablero son Array's, y que en caso de que la posición esté ocupada, en cualquiera de los dos casos, va a contener un 1. Así, un and, nos permite generar un booleano que nos diga si hay coincidencia entre alguna de las casillas.
const game =
// más cosas...
chkPieceClash: () => {
const PIECE = game.piece;
const BOARD = game.board;
let toret = 1;
if ( game.chkInbounds() ) {
toret = 0;
for(let i = 0; i < PIECE.height; ++i)
{
if ( ( PIECE.row + i ) >= BOARD.rows ) {
break;
}
for(let j = 0; j < PIECE.width; ++j)
{
if ( ( PIECE.col + j ) >= BOARD.cols ) {
break;
}
toret |= PIECE.shape[i][j]
& BOARD.cell( PIECE.row + i, PIECE.col + j );
if ( Boolean( toret ) ) {
break;
}
}
}
}
return Boolean( toret );
},
// más cosas...
}
Y finalmente, el núcleo del juego. En él, se comprueban las teclas pulsadas, se cambia la posición de la pieza si es necesario, se comprueba si coincide con el fondo del tablero o no, o si la pieza ya no puede moverse desde la primera fila (en ese caso, el juego termina). En cualquier caso, al final ya con la posición de la pieza definitiva, es cuando se pinta el frame.
const game = {
// más cosas...
showFrame: () => {
const pScore = document.getElementById( "pScore" );
let millis = performance.now() - game.startTime;
if ( millis >= 10 ) {
game.pushPieceDownTime += 1;
if ( game.pushPieceDownTime >= 40 ) {
game.pushPieceDownTime = 0;
game.piece.row += 1;
const isAtBottom = ( game.piece.row + game.piece.height ) >= game.board.rows;
if ( game.chkPieceClash()
|| isAtBottom )
{
if ( !isAtBottom ) {
game.piece.row -= 1;
}
if ( game.piece.row != 0 ) {
let newScore = 0;
game.portPieceToBoard();
newScore = game.calculateScore();
if ( newScore > 0 ) {
game.score += newScore;
pScore.innerText = "" + game.score;
}
let filledRows = game.chkFilledRows();
game.board.removeRows( filledRows );
game.board.insertEmptyRows( filledRows.length );
} else {
game.stopGame();
}
game.chooseNewPiece();
}
}
game.chkKeyboard();
game.drawFrame();
game.startTime = performance.now();
}
window.requestAnimationFrame( () => game.showFrame() );
},
// más cosas...
}
Primero se hacen varias comprobaciones en cuanto a que haya pasado suficiente tiempo. De otra forma, se pintarían demasiados frames, y dado que pintar un solo frame lleva un tiempo, se establece un tiempo de 10 ms. mínimo entre frames. También se establece el contador pushPieceDownTime, de manera que el tiempo entre el movimiento de la pieza que cae, y el siguiente, sea de al menos 400 ms., es decir, casi medio segundo. Finalmente, se comprueba el teclado, se pinta el frame, y se vuelve a llamar a window.requestAnimationFrame() para el siguiente frame.
En cuanto a la pieza, en caso de que al caer una fila más en el tablero, esta coincida con los restos, entonces se porta esa pieza al tablero (pasa a formar parte de los restos), se comprueba si hay filas completamente rellenas, y en ese caso se eliminan, y se insertan tantas filas en blanco como sea necesario.
Y básicamente ya está. Puedes ver el código, y echar unas partidas en el repo de GitHub para Insertrix.