Parte 6. El juego de la serpiente.

Ahora que ya conocemos las bases para hacer un juego, es hora de pulir algunos detalles y darle a nuestro código la forma de uno de los juegos clásicos: El juego de la serpiente.

Para empezar, comentaremos todo el código con respecto a nuestras paredes para que estas no estorben en el desarrollo y prueba de nuestro juego. Posteriormente será decisión de cada uno si incluirlas o no, y de que forma, para que cada juego sea único.

Lo más esencial del juego de la serpiente, es que el personaje principal va creciendo conforme se alimenta de las manzanas. Para lograr este efecto, utilizaremos un arreglo igual que el de las paredes. Por tanto, sustituiremos de nuestro código la variable “player” por un arreglo al que llamaremos “body”.

    //player = null,
    body = new Array(),

Y cada llamada a “player”, será sustituida por “body[0]”, que es la cabeza de la serpiente. Así pues, donde se movía “player.x” y “player.y”, ahora se moverá “body[0].x” y “body[0].y”. Podemos utilizar la función “reemplazar” de nuestro editor de texto (normalmente Editar » Buscar y Reemplazar) para hacer estas tareas de forma automática.

También es importante resaltar en la función “paint”, que ya no es solo la cabeza la que dibujaremos, si no todo el cuerpo, y esto haremos mediante un “for”:

    // Draw player
    ctx.fillStyle = '#0f0';
    for (i = 0, l = body.length; i < l; i += 1) {
        body[i].fill(ctx);
    }

Para que nuestra serpiente tenga siempre la misma longitud al comienzo de cada juego, debemos “cortarla” a cero, y luego agregar cada parte de su cuerpo tanto larga como la deseemos. Esto se hace en la función “reset” de esta forma:

    body.length = 0;
    body.push(new Rectangle(40, 40, 10, 10));
    body.push(new Rectangle(0, 0, 10, 10));
    body.push(new Rectangle(0, 0, 10, 10));

Es importante que la primer parte del cuerpo (la cabeza) esté en la posición que deseemos que inicie. El resto le seguirá después.

Para mover el cuerpo de la serpiente, se hace uso de un truco peculiar. Este se debe mover de atrás hacia adelante, y antes de moverse la cabeza, haciendo así un efecto de oruga, en que la cola va “empujando” el resto del cuerpo, mediante el siguiente “for”:

        // Move Body
        for (i = body.length - 1; i > 0; i -= 1) {
            body[i].x = body[i - 1].x;
            body[i].y = body[i - 1].y;
        }

De hacerlo de la forma opuesta, todo el cuerpo estaría siempre ocupando el mismo sitio, y no solo “no se vería nada”, si no que además, eso provocaría la perdida del juego al chocar la cabeza con su cuerpo. Para comprobar si el cuerpo choca con la cabeza, se hará de igual forma que como comprobábamos si el personaje chocaba con la pared:

        // Body Intersects
        for (i = 2, l = body.length; i < l; i += 1) {
            if (body[0].intersects(body[i])) {
                gameover = true;
                pause = true;
            }
        }

Nótese que empezamos a contar desde la segunda parte del cuerpo. Esto es por que la parte 0 es la cabeza, y la 1, el cuello. Si empezáramos desde uno de estos, es posible que el juego quedara en constante Game Over “sin razón aparente”.

Por último y muy importante, es hacer crecer a la serpiente. Esto se hace (lógicamente) cuando la cabeza choca contra la manzana, agregando esta línea justo antes de aumentar el score:

           body.push(new Rectangle(food.x, food.y, 10, 10));

Guardemos y actualicemos la página. Con esto, nuestro juego queda concluido, y tendremos un clásico juego de la serpiente, sencillo y completo.

Media

Antes de dar por concluido este pequeño curso, veremos como incluir medios externos en nuestro juego, me refiero claro a imágenes y sonido, algo muy deseado en el desarrollo de los juegos.

Si no he trabajado con imágenes desde un comienzo, es por el importante hecho de resaltar que el tamaño de las imágenes es independiente al tamaño de nuestros rectángulos en nuestro juego.

Actualmente nuestros rectángulos son de 10x10 pixeles, y sin incluimos imágenes más chicas o más grandes, podría aparentar que los objetos en la pantalla no se tocan o viceversa, cuando en realidad ocurriría lo contrario. Es por eso que es sumamente importante que las imágenes tengan siempre el tamaño de nuestros rectángulos en el juego (excepto claro, cuando se usan técnicas avanzadas de efectos visuales).

Para empezar, abramos nuestro editor de imágenes favoritos (Puede ser MS Paint o cualquiera que tengamos), y en un área de 10x10 pixeles, dibujaremos dos dibujos: nuestra comida (una fruta), y la parte del cuerpo de nuestra serpiente (Yo le hice un círculo con manchas, pero pueden dibujarle como les guste).

Estas dos imágenes (“body.png” y “fruit.png”) se guardarán en una carpeta llamada “assets”, dentro de la misma carpeta que nuestro código (es sumamente importante que siempre esté la carpeta “assets” junto al código, o las imágenes no se verán). Ahora, crearemos nuestras variables de imagen:

var iBody = new Image(),
    iFood = new Image();

Y les asignaremos la ruta a la fuente en la función “init”:

    // Load assets
    iBody.src = 'assets/body.png';
    iFood.src = 'assets/fruit.png';

Ahora modifiquemos la función “paint”, comentando donde dibujamos los rectángulos del cuerpo y la comida, y dibujando las imágenes que hemos hecho en su lugar:

    // Draw player
    //ctx.fillStyle = '#0f0';
    for (i = 0, l = body.length; i < l; i += 1) {
        //body[i].fill(ctx);
        ctx.drawImage(iBody, body[i].x, body[i].y);
    }
    
    // Draw food
    //ctx.fillStyle = '#f00';
    //food.fill(ctx);
    ctx.drawImage(iFood, food.x, food.y);

Al guardar y actualizar la página, veremos que ahora nuestros gráficos aparecen en la pantalla en lugar de los rectángulos de colores. Podemos hacer algo similar para poner una imagen de fondo a nuestro juego.

Por último, agreguemos algo de sonido. Cada vez que comamos una fruta, reproduciremos un sonido, y al morir, reproduciremos otro. Puedes conseguir sonidos para tu juego buscándoles en Internet. La declaración será de esta forma:

var aEat = new Audio(),
    aDie = new Audio();

Y se le asigna estos valores en la función “init”:

    aEat.src = 'assets/chomp.oga';
    aDie.src = 'assets/dies.oga';

Para reproducirlos, los agregamos en las área de colisión correspondiente (con la manzana y con el cuerpo), reproduciéndoles así:

    aEat.play();
    aDie.play();

Con esto concluye este pequeño curso, el cual espero haya sido de ayuda y agrada para ustedes. Si tienen dudas, estén seguros que responderé sus comentarios. También pueden enviarme enlaces a los juegos que creen gracias a este curso, los cuales estaré encantado de conocer.

¡Felices códigos!

Recursos:

(Usa clic derecho y "Guardar vínculo como" para guardar estos archivos).

• body.png
• fruit.png
• chomp.oga
• dies.oga

Código Final:

[Canvas not supported by your browser]

var KEY_ENTER = 13,
    KEY_LEFT = 37,
    KEY_UP = 38,
    KEY_RIGHT = 39,
    KEY_DOWN = 40,
    
    canvas = null,
    ctx = null,
    lastPress = null,
    pause = true,
    gameover = true,
    dir = 0,
    score = 0,
    //wall = new Array(),
    body = new Array(),
    food = null,
    iBody = new Image(),
    iFood = new Image(),
    aEat = new Audio(),
    aDie = new Audio();

window.requestAnimationFrame = (function () {
    return window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        function (callback) {
            window.setTimeout(callback, 17);
        };
}());

document.addEventListener('keydown', function (evt) {
    lastPress = evt.which;
}, false);

function Rectangle(x, y, width, height) {
    this.x = (x == null) ? 0 : x;
    this.y = (y == null) ? 0 : y;
    this.width = (width == null) ? 0 : width;
    this.height = (height == null) ? this.width : height;

    this.intersects = function (rect) {
        if (rect == null) {
            window.console.warn('Missing parameters on function intersects');
        } else {
            return (this.x < rect.x + rect.width &&
                this.x + this.width > rect.x &&
                this.y < rect.y + rect.height &&
                this.y + this.height > rect.y);
        }
    };

    this.fill = function (ctx) {
        if (ctx == null) {
            window.console.warn('Missing parameters on function fill');
        } else {
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    };
}

function random(max) {
    return Math.floor(Math.random() * max);
}

function reset() {
    score = 0;
    dir = 1;
    body.length = 0;
    body.push(new Rectangle(40, 40, 10, 10));
    body.push(new Rectangle(0, 0, 10, 10));
    body.push(new Rectangle(0, 0, 10, 10));
    food.x = random(canvas.width / 10 - 1) * 10;
    food.y = random(canvas.height / 10 - 1) * 10;
    gameover = false;
}

function paint(ctx) {
    var i = 0,
        l = 0;
    
    // Clean canvas
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    // Draw player
    //ctx.fillStyle = '#0f0';
    for (i = 0, l = body.length; i < l; i += 1) {
        //body[i].fill(ctx);
        ctx.drawImage(iBody, body[i].x, body[i].y);
    }
    
    // Draw walls
    //ctx.fillStyle = '#999';
    //for(i = 0 ,l = wall.length; i < l; i += 1) {
    //    wall[i].fill(ctx);
    //}
    
    // Draw food
    //ctx.fillStyle = '#f00';
    //food.fill(ctx);
    ctx.drawImage(iFood, food.x, food.y);

    // Debug last key pressed
    ctx.fillStyle = '#fff';
    //ctx.fillText('Last Press: ' + lastPress, 0, 20);
    
    // Draw score
    ctx.fillText('Score: ' + score, 0, 10);
    
    // Draw pause
    if (pause) {
        ctx.textAlign = 'center';
        if (gameover) {
            ctx.fillText('GAME OVER', 150, 75);
        } else {
            ctx.fillText('PAUSE', 150, 75);
        }
        ctx.textAlign = 'left';
    }
}

function act() {
    var i = 0,
        l = 0;
    
    if (!pause) {
        // GameOver Reset
        if (gameover) {
            reset();
        }

        // Move Body
        for (i = body.length - 1; i > 0; i -= 1) {
            body[i].x = body[i - 1].x;
            body[i].y = body[i - 1].y;
        }

        // Change Direction
        if (lastPress == KEY_UP && dir != 2) {
            dir = 0;
        }
        if (lastPress == KEY_RIGHT && dir != 3) {
            dir = 1;
        }
        if (lastPress == KEY_DOWN && dir != 0) {
            dir = 2;
        }
        if (lastPress == KEY_LEFT && dir != 1) {
            dir = 3;
        }

        // Move Head
        if (dir == 0) {
            body[0].y -= 10;
        }
        if (dir == 1) {
            body[0].x += 10;
        }
        if (dir == 2) {
            body[0].y += 10;
        }
        if (dir == 3) {
            body[0].x -= 10;
        }

        // Out Screen
        if (body[0].x > canvas.width - body[0].width) {
            body[0].x = 0;
        }
        if (body[0].y > canvas.height - body[0].height) {
            body[0].y = 0;
        }
        if (body[0].x < 0) {
            body[0].x = canvas.width - body[0].width;
        }
        if (body[0].y < 0) {
            body[0].y = canvas.height - body[0].height;
        }

        // Wall Intersects
        //for(i = 0, l = wall.length; i < l; i += 1){
        //    if (food.intersects(wall[i])) {
        //        food.x = random(canvas.width / 10 - 1) * 10;
        //        food.y = random(canvas.height / 10 - 1) * 10;
        //    }
        //  
        //    if(body[0].intersects(wall[i])){
        //        gameover = true;
        //        pause = true;
        //    }
        //}

        // Body Intersects
        for (i = 2, l = body.length; i < l; i += 1) {
            if (body[0].intersects(body[i])) {
                gameover = true;
                pause = true;
                aDie.play();
            }
        }

        // Food Intersects
        if (body[0].intersects(food)) {
            body.push(new Rectangle(food.x, food.y, 10, 10));
            score += 1;
            food.x = random(canvas.width / 10 - 1) * 10;
            food.y = random(canvas.height / 10 - 1) * 10;
            aEat.play();
        }
    }
    
    // Pause/Unpause
    if (lastPress == KEY_ENTER) {
        pause = !pause;
        lastPress = null;
    }
}

function repaint() {
    window.requestAnimationFrame(repaint);
    paint(ctx);
}

function run() {
    setTimeout(run, 50);
    act();
}

function init() {
    // Get canvas and context
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');

    // Load assets
    iBody.src = 'assets/body.png';
    iFood.src = 'assets/fruit.png';
    aEat.src = 'assets/chomp.oga';
    aDie.src = 'assets/dies.oga';
    
    // Create food
    food = new Rectangle(80, 80, 10, 10);

    // Create walls
    //wall.push(new Rectangle(100, 50, 10, 10));
    //wall.push(new Rectangle(100, 100, 10, 10));
    //wall.push(new Rectangle(200, 50, 10, 10));
    //wall.push(new Rectangle(200, 100, 10, 10));
    
    // Start game
    run();
    repaint();
}

window.addEventListener('load', init, false);

Siguiente parte: Optimización para Javascript.