Saltando a las plataformas

De los laberintos a las plataformas solo hay un salto. ¡Literalmente!

La forma en que se construyen los mapas de plataformas, usa el mismo método para crear mapas de laberintos, cambiando tan solo algunos detalles en el desplazamiento vertical para simular el uso de plataformas, en lugar del desplazamiento desde vista arriba que simulan los laberintos. Y el día de hoy veremos como ajustar estos detalles para entrar en un genero totalmente nuevo, basándonos en el código de Mapas de Mosaico que vimos anteriormente para crear nuestro juego de laberintos.

Lo primero que tenemos que tener en cuenta, es que los juegos de plataformas se basan siempre en aceleraciones, a diferencia de los laberintos que podíamos elegir un desplazamiento constante. Para almacenar la aceleración de cada objeto en nuestro juego, agregaremos el vector de velocidad en la coordenada x, y el vector de velocidad en la coordenada y, inicializados en cero, dentro de la función rectángulo:

        vx: 0,
        vy: 0,

Es importante regresar a cero estos dos valores también en la función "reset" para asegurarnos que no se inicie con una aceleración no deseada cuando empiece un nuevo juego.

Comenzaremos por ajustar algunos detalles en el desplazamiento sobre el eje x. Para este juego aplicaremos aceleración usando una de las técnicas que aprendimos precisamente en el tema de Aceleración. Puedes usar la que más te haya gustado; yo he elegido esta:

            // Set vectors
            if (pressing[KEY_RIGHT]) {
                if (player.vx < 10) {
                    player.vx += 1;
                }
            } else if (player.vx > 0) {
                player.vx -= 1;
            }
            if (pressing[KEY_LEFT]) {
                if (player.vx > -10) {
                    player.vx -= 1;
                }
            } else if (player.vx < 0) {
                player.vx += 1;
            }

Una vez establecida la velocidad de nuestro personaje, proseguimos a moverlo y revisar si está impactando una pared. En tal caso, ajustamos su posición para que aparezca al lado correspondiente de la pared, y removemos su aceleración:

            // Move player in x
            player.x += player.vx;
            for (i = 0, l = wall.length; i < l; i += 1) {
                if (player.intersects(wall[i])) {
                    if (player.vx > 0) {
                        player.right = wall[i].left;
                    } else {
                        player.left = wall[i].right;
                    }
                    player.vx = 0;
                }
            }

Ahora pasemos al movimiento en el eje y. Habrá algunas diferencias con respecto al eje x, ya que en este caso estamos tratando con una fuerza de gravedad constante hacia abajo, en lugar de una desaceleración:

            // Set gravity
            player.vy += 1;
            if (player.vy > 10) {
                player.vy = 10;
            }

Notarás que estoy dando un límite de velocidad de 10 pixeles a la aceleración de la gravedad. Si la aceleración de la gravedad es mayor a la altura de los bloques en el juego, existe la posibilidad de que se atraviese el suelo, lo cual crearía un efecto no deseado en nuestro juego. Limitar la velocidad a la altura de los bloques es un truco sencillo que evita este problema, y en general no suele ser notado por los jugadores que la aceleración deja de crecer tras cierto límite de velocidad.

Ahora toca la acción que es la esencia dentro de los juegos de plataforma: Saltar. Sabemos que debemos esperar a que el botón sea presionado para asignar una velocidad negativa a la aceleración contra el suelo (el impulso), que será el que nos permita elevarnos por los aires hasta que la gravedad nos vuelva a traer de regreso al suelo. ¿Pero como asegurarnos de hacerlo solo cuando estemos tocando el suelo? En realidad resulta tan sencillo como eso: Una variable booleana que nos indique cuando estemos en el suelo, y solo en dado caso, realizar la acción de saltar:

            // Jump
            if (onGround && lastPress === KEY_UP) {
                player.vy = -10;
            }

Así de sencillo es. Para saber cuando estamos en el suelo, agregaremos esta acción al analizar si estamos tocando una pared. Comenzamos por asignar como falsa la variable "onGround", después desplazamos al jugador de acuerdo a su aceleración en el eje y, y revisamos si toca alguna pared (Que también actúan como techo y suelo), si la aceleración es mayor de 0 (está cayendo) y toca una pared, eso significa que está tocando suelo, y por tanto asignamos la variable correspondiente como verdadera:

            // Move player in y
            onGround = false;
            player.y += player.vy;
            for (i = 0, l = wall.length; i < l; i += 1) {
                if (player.intersects(wall[i])) {
                    if (player.vy > 0) {
                        player.bottom = wall[i].top;
                        onGround = true;
                    } else {
                        player.top = wall[i].bottom;
                    }
                    player.vy = 0;
                }
            }

De esta forma ya tenemos aplicada la base para nuestro juego de plataformas. He cambiado la lava en el centro del mapa por paredes, para poder usarles como plataforma en este ejemplo. Ahora podemos saltar de sitio en sitio por todo nuestro escenario con libertad, de igual forma que se hace en todos los juegos de plataformas populares.

Eliminando la repetición de tecla.

Habrás notado que cuando escribes, y dejas presionada una tecla por largo rato, esta se ejecuta de forma continua y repetitiva, permitiendo escribir una misma letra de forma repetida sin tener que teclear múltiples veces dicha tecla. Este efecto también afecta nuestros juegos, y si dejas presionada una tecla por largo rato, verás que la acción ligada se ejecuta de forma continúa. Por ejemplo, en el caso del juego de plataformas, si dejas presionada la tecla "arriba", verás que el personaje vuelve a saltar apenas toca el suelo.
Para eliminar este efecto no deseado en nuestro juego, necesitamos algún truco que prevenga la repetición de la tecla. En realidad, esto es muy sencillo y ya tenemos todo preparado para resolver este problema: En el momento en que una tecla sea presionada, verificaremos que esta no se encuentre en el arreglo de teclas presionadas, y solo en tal caso, asignaremos la última tecla presionada a la variable "lastPress":

    document.addEventListener('keydown', function (evt) {
        if (!pressing[evt.which]) {
            lastPress = evt.which;
        }
        pressing[evt.which] = true;
    }, false);

La variable no volverá a ser falsa hasta que la tecla deje de ser presionada, por lo que cuando este escucha sea disparado por el efecto de "repetición de tecla", esta versión del código prevendrá que dicha repetición afecte a nuestro juego. Ahora que ya sabes de este truco, revisa los juegos que hemos desarrollado anteriormente; verás que algunos de ellos son afectados por la repetición de tecla, pero ahora con este truco, podrás prevenir dicho efecto para que no afecte la jugabilidad de tus juegos.

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,
        pressing = [],
        pause = false,
        gameover = true,
        onGround = false,
        worldWidth = 0,
        worldHeight = 0,
        cam = null,
        player = null,
        wall = [],
        lava = [],
        map0 = [
            [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            [1, 2, 2, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
            [1, 2, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
            [1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
            [1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1],
            [1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1],
            [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1],
            [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1],
            [1, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 2, 2, 0, 0, 1, 0, 0, 1],
            [0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 2, 2, 0, 0, 1, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 2, 2, 0, 0, 1, 0, 0, 0],
            [1, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 2, 2, 0, 0, 1, 0, 0, 1],
            [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1],
            [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1],
            [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1],
            [1, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1],
            [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
            [1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
            [1, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
            [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
        ];

    function Camera() {
        this.x = 0;
        this.y = 0;
    }

    Camera.prototype = {
        constructor: Camera,
        
        focus: function (x, y) {
            this.x = x - canvas.width / 2;
            this.y = y - canvas.height / 2;

            if (this.x < 0) {
                this.x = 0;
            } else if (this.x > worldWidth - canvas.width) {
                this.x = worldWidth - canvas.width;
            }
            if (this.y < 0) {
                this.y = 0;
            } else if (this.y > worldHeight - canvas.height) {
                this.y = worldHeight - canvas.height;
            }
        }
    };
    
    function Rectangle2D(x, y, width, height, createFromTopLeft) {
        this.width = (width === undefined) ? 0 : width;
        this.height = (height === undefined) ? this.width : height;
        if (createFromTopLeft) {
            this.left = (x === undefined) ? 0 : x;
            this.top = (y === undefined) ? 0 : y;
        } else {
            this.x = (x === undefined) ? 0 : x;
            this.y = (y === undefined) ? 0 : y;
        }
    }
    
    Rectangle2D.prototype = {
        constructor: Rectangle2D,
        left: 0,
        top: 0,
        width: 0,
        height: 0,
        vx: 0,
        vy: 0,
        
        get x() {
            return this.left + this.width / 2;
        },
        set x(value) {
            this.left = value - this.width / 2;
        },
        
        get y() {
            return this.top + this.height / 2;
        },
        set y(value) {
            this.top = value - this.height / 2;
        },
        
        get right() {
            return this.left + this.width;
        },
        set right(value) {
            this.left = value - this.width;
        },
        
        get bottom() {
            return this.top + this.height;
        },
        set bottom(value) {
            this.top = value - this.height;
        },
        
        intersects: function (rect) {
            if (rect !== undefined) {
                return (this.left < rect.right &&
                    this.right > rect.left &&
                    this.top < rect.bottom &&
                    this.bottom > rect.top);
            }
        },
        
        fill: function (ctx) {
            if (ctx !== undefined) {
                if (cam !== undefined) {
                    ctx.fillRect(this.left - cam.x, this.top - cam.y, this.width, this.height);
                } else {
                    ctx.fillRect(this.left, this.top, this.width, this.height);
                }
            }
        }
    };

    document.addEventListener('keydown', function (evt) {
        if (!pressing[evt.which]) {
            lastPress = evt.keyCode;
        }
        pressing[evt.which] = true;
    }, false);

    document.addEventListener('keyup', function (evt) {
        pressing[evt.which] = false;
    }, false);

    function setMap(map, blockSize) {
        var col = 0,
            row = 0,
            columns = 0,
            rows = 0;
        wall.length = 0;
        lava.length = 0;
        for (row = 0, rows = map.length; row < rows; row += 1) {
            for (col = 0, columns = map[row].length; col < columns; col += 1) {
                if (map[row][col] === 1) {
                    wall.push(new Rectangle2D(col * blockSize, row * blockSize, blockSize, blockSize, true));
                } else if (map[row][col] === 2) {
                    lava.push(new Rectangle2D(col * blockSize, row * blockSize, blockSize, blockSize, true));
                }
            }
        }
        worldWidth = columns * blockSize;
        worldHeight = rows * blockSize;
    }

    function reset() {
        player.left = 40;
        player.top = 40;
        player.vx = 0;
        player.vy = 0;
        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';
        player.fill(ctx, cam);

        // Draw walls
        ctx.fillStyle = '#999';
        for (i = 0, l = wall.length; i < l; i += 1) {
            wall[i].fill(ctx, cam);
        }
        
        // Draw lava
        ctx.fillStyle = '#f00';
        for (i = 0, l = lava.length; i < l; i += 1) {
            lava[i].fill(ctx, cam);
        }

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

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

            // Set vectors
            if (pressing[KEY_RIGHT]) {
                if (player.vx < 10) {
                    player.vx += 1;
                }
            } else if (player.vx > 0) {
                player.vx -= 1;
            }
            if (pressing[KEY_LEFT]) {
                if (player.vx > -10) {
                    player.vx -= 1;
                }
            } else if (player.vx < 0) {
                player.vx += 1;
            }

            // Set gravity
            player.vy += 1;
            if (player.vy > 10) {
                player.vy = 10;
            }

            // Jump
            if (onGround && lastPress === KEY_UP) {
                player.vy = -10;
            }

            // Move player in x
            player.x += player.vx;
            for (i = 0, l = wall.length; i < l; i += 1) {
                if (player.intersects(wall[i])) {
                    if (player.vx > 0) {
                        player.right = wall[i].left;
                    } else {
                        player.left = wall[i].right;
                    }
                    player.vx = 0;
                }
            }
            
            // Move player in y
            onGround = false;
            player.y += player.vy;
            for (i = 0, l = wall.length; i < l; i += 1) {
                if (player.intersects(wall[i])) {
                    if (player.vy > 0) {
                        player.bottom = wall[i].top;
                        onGround = true;
                    } else {
                        player.top = wall[i].bottom;
                    }
                    player.vy = 0;
                }
            }

            // Out Screen
            if (player.x > worldWidth) {
                player.x = 0;
            }
            if (player.x < 0) {
                player.x = worldWidth;
            }

            // Bellow world
            if (player.y > worldHeight) {
                gameover = true;
                pause = true;
            }

            // Player Intersects Lava
            for (i = 0, l = lava.length; i < l; i += 1) {
                if (player.intersects(lava[i])) {
                    gameover = true;
                    pause = true;
                }
            }

            // Focus player
            cam.focus(player.x, player.y);
        }
        
        // Pause/Unpause
        if (lastPress === KEY_ENTER) {
            pause = !pause;
        }
    }

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

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

        lastPress = null;
    }

    function init() {
        // Get canvas and context
        canvas = document.getElementById('canvas');
        ctx = canvas.getContext('2d');
        canvas.width = 300;
        canvas.height = 200;
        worldWidth = canvas.width;
        worldHeight = canvas.height;

        // Create camera and player
        cam = new Camera();
        player = new Rectangle2D(40, 40, 10, 10, true);
        
        // Set initial map
        setMap(map0, 10);
        
        // Start game
        run();
        repaint();
    }

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

Regresar al índice