Manejo de escenas

Ahora que ya sabemos hacer un juego, es tiempo de pensar en agregarle detalles para hacerlo más atractivo y funcional, y para ello necesitaremos múltiples escenas que aparecerán antes y después de la función principal de nuestro juego.

Existen varias formas de manejar escenas. Quizá la forma mas sencilla y directa de hacerlo, sea creando estados condicionales, como se muestra en el siguiente ejemplo:

    var SCENE_MAIN = 0,
        SCENE_GAME = 1,
    
        currentScene = 0;
    
    function act() {
        if (currentScene === SCENE_MAIN) {
            //...
        } else if (currentScene === SCENE_GAME) {
            //...
        }
    }
    
    function paint(ctx) {
        if (currentScene === SCENE_MAIN) {
            //...
        } else if (currentScene === SCENE_GAME) {
            //...
        }
    }

Dentro de cada área condicional se pondría el código a ejecutar para el caso de cada escena deseada, cambiando el valor de la variable "currentScene" para simular el cambio de escena. Esta es una técnica bastante práctica, sin embargo, cuando los juegos son más complejos y con muchas escenas posibles, mantener un código así puede ser bastante difícil.

Es por ello que les enseñaré en esta ocasión una técnica diferente, que si bien es un poco más compleja de comprender al comienzo, al final resultará mucho mas práctica, automatizada y fácil de mantener.

Para empezar, necesitaremos un arreglo que almacene nuestras escenas, y la variable currentScene del ejemplo pasado para manejar las distintas escenas:

    var currentScene = 0,
        scenes = [];

Las escenas las manejaremos a través de una función "Scene", la cual al momento de ser creada, le asignaremos automáticamente una ID única basada en el tamaño del arreglo de escenas, y lo pondremos dentro del mismo:

    function Scene() {
        this.id = scenes.length;
        scenes.push(this);
    }

Al prototipo de esta función le asignaremos las funciones que todas escenas manejaran: una función "act" y una función "paint" como la que ya hemos aprendido a manejar hasta ahora, además de una función "load" que se ejecutará automáticamente al cargar dicha escena:

    Scene.prototype = {
        constructor: Scene,
        load: function () {},
        paint: function (ctx) {},
        act: function () {}
    };

Si vas a manejar delta de tiempo, no olvides mandarla también a la función "act". Finalmente, agregaremos una función "loadScene" para que cargue nuestra nueva escena de forma automática, de esta forma:

    function loadScene(scene) {
        currentScene = scene.id;
        scenes[currentScene].load();
    }

Por último, modificaremos nuestras funciones "run" y "repaint" para que ejecute automáticamente la escena en la que nos encontramos:

    function repaint() {
        window.requestAnimationFrame(repaint);
        if (scenes.length) {
            scenes[currentScene].paint(ctx);
        }
    }

    function run() {
        setTimeout(run, 50);
        if (scenes.length) {
            scenes[currentScene].act();
        }
    }

Podrás notar que antes de ejecutar su respectiva función, comprobamos antes que haya al menos una escena dentro del arreglo de escenas. De esta forma, si olvidamos crear al menos una escena, no retornará un error. Ahora que ya tenemos todo listo, procedamos a declarar nuestras escenas. Para este ejemplo práctico, crearemos dos: la escena del menú principal, y la escena de nuestro juego:

    var mainScene = null,
        gameScene = null;

Para que nuestro juego funcione en este nuevo formato, tenemos que cambiar nuestras funciones "act" y "paint" por "gameScene.act" y "gameScene.paint". Dado que estas funciones son variables ya existentes, tenemos que "re-asignarles" las funciones, de la siguiente forma:

    // Game Scene
    gameScene = new Scene();

    //function reset(){
    gameScene.load = function () {
        //...
    }
    
    //function paint(ctx){
    gameScene.paint = function (ctx) {
        //...
    }
    
    //function act(){
    gameScene.act = function () {
        //...
    }

Notarás que también he cambiado la función "reset" por "gameScene.load" para que cargue automáticamente cuando se cambie a esta escena.

Ahora, agregaremos nuestro menú principal:

    // Main Scene
    mainScene = new Scene();

    mainScene.paint = function (ctx) {
        // Clean canvas
        ctx.fillStyle = '#030';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Draw title
        ctx.fillStyle = '#fff';
        ctx.textAlign = 'center';
        ctx.fillText('SNAKE', 150, 60);
        ctx.fillText('Press Enter', 150, 90);
    };

    mainScene.act = function () {
        // Load next scene
        if (lastPress === KEY_ENTER) {
            loadScene(gameScene);
            lastPress = null;
        }
    };

En esta escena, solo he agregado un escucha a la tecla "Enter" para que empiece el juego, y en la función "paint" se imprime tan solo el título del juego. Nota que no he asignado la función "load" a "mainScene", esto por que no es necesario cargar nada en esta escena. Sin embargo, la escena que cargue predeterminadamente, no cargará su función "load" por defecto, y si se manda a llamar a ella antes de ser creada, no tendrá efecto alguno, por lo que si deseamos que la escena predeterminada cargue su función "load" al comienzo del juego, se tendrá que forzar su carga tras su creación de esta forma:

    mainScene.load = function () {
        //...
    }
    mainScene.load();

Para finalizar, ahora que ya tenemos todo nuestro juego con escenas preparado, cambiaremos el comportamiento en nuestro juego al hacer Game Over, para que nos regrese a la pantalla principal:

            // GameOver Reset
            if (gameover) {
                loadScene(mainScene);
            }

Con esto nuestro juego está listo para soportar múltiples escenas. Ya solo es necesario que tú crees y personalices las necesarias para tu propio juego. ¡Felices códigos!

Código final:

[Canvas not supported by your browser]

/*jslint bitwise:true, es5: true */
(function (window, undefined) {
    'use strict';
    var KEY_ENTER = 13,
        KEY_LEFT = 37,
        KEY_UP = 38,
        KEY_RIGHT = 39,
        KEY_DOWN = 40,
        
        canvas = null,
        ctx = null,
        lastPress = null,
        pause = false,
        gameover = false,
        currentScene = 0,
        scenes = [],
        mainScene = null,
        gameScene = null,
        body = [],
        food = null,
        //var wall = [],
        dir = 0,
        score = 0,
        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) {
        if (evt.which >= 37 && evt.which <= 40) {
            evt.preventDefault();
        }

        lastPress = evt.which;
    }, false);
    
    function Rectangle(x, y, width, height) {
        this.x = (x === undefined) ? 0 : x;
        this.y = (y === undefined) ? 0 : y;
        this.width = (width === undefined) ? 0 : width;
        this.height = (height === undefined) ? this.width : height;
    }

    Rectangle.prototype = {
        constructor: Rectangle,
        
        intersects: function (rect) {
            if (rect === undefined) {
                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);
            }
        },
        
        fill: function (ctx) {
            if (ctx === undefined) {
                window.console.warn('Missing parameters on function fill');
            } else {
                ctx.fillRect(this.x, this.y, this.width, this.height);
            }
        },
        
        drawImage: function (ctx, img) {
            if (img === undefined) {
                window.console.warn('Missing parameters on function drawImage');
            } else {
                if (img.width) {
                    ctx.drawImage(img, this.x, this.y);
                } else {
                    ctx.strokeRect(this.x, this.y, this.width, this.height);
                }
            }
        }
    };

    function Scene() {
        this.id = scenes.length;
        scenes.push(this);
    }

    Scene.prototype = {
        constructor: Scene,
        load: function () {},
        paint: function (ctx) {},
        act: function () {}
    };

    function loadScene(scene) {
        currentScene = scene.id;
        scenes[currentScene].load();
    }

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

    function repaint() {
        window.requestAnimationFrame(repaint);
        if (scenes.length) {
            scenes[currentScene].paint(ctx);
        }
    }

    function run() {
        setTimeout(run, 50);
        if (scenes.length) {
            scenes[currentScene].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.m4a';
        aDie.src = 'assets/dies.m4a';

        // Create food
        food = new Rectangle(80, 80, 10, 10);

        // Create walls
        //wall.push(new Rectangle(50, 50, 10, 10));
        //wall.push(new Rectangle(50, 100, 10, 10));
        //wall.push(new Rectangle(100, 50, 10, 10));
        //wall.push(new Rectangle(100, 100, 10, 10));

        // Start game
        run();
        repaint();
    }

    // Main Scene
    mainScene = new Scene();

    mainScene.paint = function (ctx) {
        // Clean canvas
        ctx.fillStyle = '#030';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Draw title
        ctx.fillStyle = '#fff';
        ctx.textAlign = 'center';
        ctx.fillText('SNAKE', 150, 60);
        ctx.fillText('Press Enter', 150, 90);
    };

    mainScene.act = function () {
        // Load next scene
        if (lastPress === KEY_ENTER) {
            loadScene(gameScene);
            lastPress = null;
        }
    };

    // Game Scene
    gameScene = new Scene();

    gameScene.load = function () {
        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;
    };

    gameScene.paint = function (ctx) {
        var i = 0,
            l = 0;
        
        // Clean canvas
        ctx.fillStyle = '#030';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

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

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

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

            // 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;
            }

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

            // 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();
                }
            }
        }
        // Pause/Unpause
        if (lastPress === KEY_ENTER) {
            pause = !pause;
            lastPress = null;
        }
    };
    
    window.addEventListener('load', init, false);
}(window));

Siguiente parte: Almacenamiento local y altos puntajes.