Construye el grupo de bloques

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Este es el sexto paso de 10 del Tutorial del Lienzo (Canvas) para desarrollar juegos (Gamedev Canvas Tutorial). Puedes encontrar el código fuente como debería quedar tras completar esta lección en Gamedev-Canvas-workshop/lesson6.html.

Después de modificar la mecánica de juego, ahora somos capaces de perder - esto es genial, ya que significa que el juego finalmente se siente más como un juego. Sin embargo, rápidamente será aburrido si todo lo que haces es rebotar la pelota de las paredes y la pala. Lo que el juego realmente necesita son algunos bloques para destruir con la pelota, y esto es lo que vamos a crear ahora!

Configurando las variables de los bloques

El objetivo general de esta lección es crear unas pocas líneas de código para los bloques, usando un bucle anidado que funciona a través de una matriz bidimensional. Primero, sin embargo, necesitamos configurar algunas variables para definir información sobre los bloques, como su ancho y altura, filas y columnas, etc. Agregue las siguientes líneas a su código debajo de las variables que ha declarado previamente en su programa.

var brickRowCount = 3;
var brickColumnCount = 5;
var brickWidth = 75;
var brickHeight = 20;
var brickPadding = 10;
var brickOffsetTop = 30;
var brickOffsetLeft = 30;

Aquí hemos definido el número de filas y columnas de bloques, su ancho y altura, el relleno entre los bloques para que no se toquen entre sí y un desplazamiento superior e izquierdo para que no empiecen a ser dibujado desde el borde del Canvas.

Sostendremos todos nuestros bloques en un vector bidimensional. Contendrá las columnas de bloques (c), que a su vez contendrán las filas de bloques (r), que a su vez contendrán un objeto que contiene las posiciones x e y para pintar cada bloque en la pantalla. Añade lo siguiente justo debajo de sus variables:

var bricks = [];
for(c=0; c<brickColumnCount; c++) {
    bricks[c] = [];
    for(r=0; r<brickRowCount; r++) {
        bricks[c][r] = { x: 0, y: 0 };
    }
}

El código anterior pasará por las filas y las columnas y creará los nuevos bloques. NOTA que los objetos bloques también se utilizarán para propósitos de detección de colisiones más adelante.

Dibujo de los bloques

Ahora vamos a crear una función para recorrer todos los bloques de la matriz y dibujarlos en la pantalla. Nuestro código podría verse así:

function drawBricks() {
    for(c=0; c<brickColumnCount; c++) {
        for(r=0; r<brickRowCount; r++) {
            bricks[c][r].x = 0;
            bricks[c][r].y = 0;
            ctx.beginPath();
            ctx.rect(0, 0, brickWidth, brickHeight);
            ctx.fillStyle = "#0095DD";
            ctx.fill();
            ctx.closePath();
        }
    }
}

Una vez más, estamos haciendo un bucle a través de las filas y columnas para establecer la posición x e y de cada bloque, y también estamos pintando un bloque en el Canvas - tamaño brickWidth x brickHeight - con cada iteración de bucle. El problema es que los estamos pintando todos en un solo lugar, en coordenadas (0,0). Lo que necesitamos hacer es incluir algunos cálculos que funcionarán la posición x e y de cada bloque para cada iteración de bucle:

var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;

Cada posición de brickX se calcula como brickWidth + brickPadding, multiplicado por el número de columna, c, más el brickOffsetLeft; La lógica para brickY es idéntica excepto que utiliza los valores para el número de fila, r, brickHeight y brickOffsetTop. Ahora cada bloque se puede colocar en su lugar correcto fila y columna, con relleno entre cada bloque, dibujado separado de los bordes izquierdo y superior del canvas.

La versión final de la función drawBricks (), después de asignar los valores brickX y brickY como las coordenadas en lugar de (0,0) cada vez, se verá así - añade esto a su código debajo de la función drawPaddle ():

function drawBricks() {
    for(c=0; c<brickColumnCount; c++) {
        for(r=0; r<brickRowCount; r++) {
            var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
            var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
            bricks[c][r].x = brickX;
            bricks[c][r].y = brickY;
            ctx.beginPath();
            ctx.rect(brickX, brickY, brickWidth, brickHeight);
            ctx.fillStyle = "#0095DD";
            ctx.fill();
            ctx.closePath();
        }
    }
}

Dibujando los bloques

Lo último que hay que hacer en esta lección es añadir una llamada a drawBricks () en algún lugar de la función draw (), preferentemente al comienzo, entre el borrado del Canvas y el dibujo de la pelota. Agrega lo siguiente justo por encima de la llamada drawBall ():

drawBricks();

Compara tu código

En este punto, el juego se ha vuelto un poco más interesante de nuevo:

Ejercicio: Prueba a cambiar el número de bloques en una fila o en una columna, o sus posiciones.

Siquientes pasos

¡Así que ahora tenemos bloques! Pero la pelota no está interactuando con ellos en absoluto - cambiaremos eso mientras continuamos con el séptimo capítulo: Detección de colisiones.

Etiquetas y colaboradores del documento

 Colaboradores en esta página: emolinerom
 Última actualización por: emolinerom,