Juego de carreras HTML5 en Phaser

Vamos a hacer un microjuego con Phaser.js. Va a consistir en una pista de carreras sobre la cual podemos conducir un coche. Vista ortogonal.

Primero vamos a ver los gráficos que usaremos para nuestro microjuego. Necesitamos una pista y un coche. En este caso he diseñado ambos con GIMP, os recuerdo que si vamos a hacer un juego profesional y el arte no es lo nuestro lo mejor es ir a Fiverr o a foros donde encontraremos artistas especializados en estos asuntos. La textura del césped es de MyFreeTextures y el castillo es el de Montealegre en Valladolid.

Ahora creamos un archivo HTML e importamos Phaser

Una vez en hayamos hecho eso en nuestro fichero de JavaScript empezamos a escribir.

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'racing_game', { preload: preload, create: create, update: update });

Con eso iniciamos Phaser. Hay 3 funciones importantes en Phaser: preload, create y update. Preload se encarga de cargar todo lo necesario, Create se encargará de crear la escena jugable y Update se repetirá indefinidamente hasta que termine el juego.

function preload() {
    game.load.spritesheet('circuito','circuito.png');
    game.load.spritesheet('coche','coche.png');
}

Con esto cargamos las dos imágenes para un uso posterior.

function create() {
    var circuito = game.add.sprite(0,0,'circuito');
    coche = game.add.sprite(300,100,'coche');
}

Con esto añadimos dos sprites a la escena, cada uno de ellos con una posición X e Y y un recurso dentro de las imágenes precargada.

Conduciendo el coche

 

Ahora vamos a hacer que el coche sea "conducible". Para ello creamos una variable global llamada cursors. Luego en create la inicializaremos para que maneje las teclas cursor (arriba, abajo, izquierda, derecha). De paso creamos la variable velocidad, que iniciamos a 0;

var cursors;
var velocidad = 0;

y en create()

cursors = game.input.keyboard.createCursorKeys();

También en create iniciamos el sistema de físicas, que nos ayudará para calcular la velocidad

game.physics.startSystem(Phaser.Physics.P2JS);
game.physics.p2.enable(coche);
coche.body.angle = 90;

Ahora la función update() se encarga de manejar todo esto. Detecta si alguna tecla está pulsada y actúa en consecuencia modificando la velocidad.

• Primero se comprueba si la tecla flecha arriba está pulsada. Si además la velocidad acumulada es menor de 400 se le suman 7. En caso contrario la velocidad disminuye.
• Después se ajusta la velocidad en los ejes X e Y. Se usa trigonometría para ello.
• Por último se comprueban las teclas derecha e izquierda y si alguna de ellas está pulsada se modifica su velocidad angular.
</ul>

function update()
{
    if (cursors.up.isDown && velocidad <= 400) {
        velocidad+=7;
    } else {
        if (velocidad >= 7)
            velocidad -= 7;
    }

coche.body.velocity.x = velocidad * Math.cos((coche.angle-90)*0.01745);
coche.body.velocity.y = velocidad * Math.sin((coche.angle-90)*0.01745);

if (cursors.left.isDown)
    coche.body.angularVelocity = -5*(velocidad/1000);
else if (cursors.right.isDown)
    coche.body.angularVelocity = 5*(velocidad/1000);
else
    coche.body.angularVelocity = 0;

}
</code></pre>
Aquí está el código completo
Descargar código fuente: http://sh.st/FRhIN | http://bc.vc/VjgLlxW | http://ouo.io/YeHKk8 | http://fas.li/3x5jg | http://adf.ly/1bf2ku