Creacion de Juego con HTML5 y JavaScript parte II

En esta segunda parte del tutorial para crear un Juego con HTML5 Y javascript, daremos movimiento a nuestros "actores".


Bienvenidos a otro tutorial de HTML5!
Hoy daremos secuencia a esta serie de tutoriales de programacion de videojuegos con HTML5 CSS3 y Javascript.
Como ya vimos en el tutorial anterior el armado de nuestro canvas y los jugadores que son apenas dos rectangulos uno rojo y otro azul.
Bien, para animar a nuestros personajes primeramente tenemos que tener un loop dentro de nuestro juego, el cual se encargará de actualizar nuestro canvas a cada cierto tiempo.
haremos algunos cambios al codigo anterior.
Creamos nuestro jugador con una variable formato JSON:
var player = {draw: true,vx:0,vy:0,direction: "s", posX: (cWidth/2)-7, posY: (cHeight/2)-7, width: 15, height: 20};
Porque en formato Json? Bien eso es porque podemos tener varios atributos de nuestro objeto y de varios formatos(cosa que Json acepta), aqui tenemos velocidad, posicion, direccion X u Y, y podemos tener varios otros, los cuales manipularemos con facilidad durante el juego.
Antes de empezar las functions de dibujar el fondo y los jugadores incluimos este codigo:
function init(){

if(typeof game_loop !="undefined"){
clearInterval(game_loop);
}
//intervalo del juego
game_loop = setInterval(main,30);

}
Este codigo no tiene ningun secreto, el solamente se ocupa si tenemos un intervalo definido en nuestro loop, entonces da inicio al jugo y a cada 30 milisegundos se actualizará.
function setBackground(){}
resto del codigo anterior...
Creamos la function main que se encargará de llamar a las demás funciones del juego en el intervalo definido:
function main(){
setBackground();
  setPlayer("red",200,120, 20, 20);
  setPlayer("blue",420,420, 20, 20);
}

init();//LLAMADA AL CARGAR LA PAGINA.
Creamos ahora la function de mover el jugador (nuestro player):
En esta funcion definimos a través de un switch, que direccion está teniendo el jugador en el canvas y lo moveremos 3 pixeles a la derecha si el case es "r", 3 pixeles a la izquierda si el case es "l" 3 para abajo si el case es "d" y 3 para arriba si el case es "t" siendo que el default es el jugador sin movimiento.
Como definimos la direccion de nuestro jugador?
con las teclas de direccion de nuestro teclado que a continuacion coloco el codigo:
el evento de keydown se encarga de saber que tecla estamos presionando y nos da la direccion del jugador,
y la segunda function movePlayer hace que el jugador se mueva de acuerdo a esas teclas presionadas.
//CONTROL DEL JUGADOR CON LAS TECLAS DE DIRECCION
$(document).keydown(function(event){
var key = event.which;
switch(key){
case 39:
player.direction = "r";
break;
case 37:
player.direction = "l";
break;
case 38:
player.direction = "t";
break;
case 40:
player.direction = "d";
break;

case 32:
player.direction = "u",player.velocity+=10;
// Set gravity
            player.vy += 1;
            if (player.vy > 10) {
                player.vy = 10;
            }
break;
}
})
//MOVIENDO EL JUGADOR
function movePlayer(){
switch(player.direction){
case "r":
player.posX += 3;
ctx.save();
ctx.fillStyle="blue";
ctx.fillRect(player.posX, player.posY,player.width,player.height);
ctx.restore();
break;
case "l":
player.posX -= 3;
ctx.save();
ctx.fillStyle="blue";
ctx.fillRect(player.posX, player.posY,player.width,player.height);
ctx.restore();
break;

                                         case "t":
player.posY -= 3;
ctx.save();
ctx.fillStyle="blue";
ctx.fillRect(player.posX, player.posY,player.width,player.height);
ctx.restore();
break;

case "d":
player.posY += 3;
ctx.save();
ctx.fillStyle="blue";
ctx.fillRect(player.posX, player.posY,player.width,player.height);
ctx.restore();
break;
case "u":
player.posY -= 6,player.velocity+=15;
ctx.save();
ctx.fillStyle="blue";
ctx.fillRect(player.posX, player.posY,player.width,player.height);
ctx.restore();
break;
default:
player.posX = player.posX;
player.posY = player.posY;
ctx.save();
ctx.fillStyle="blue";
ctx.fillRect(player.posX, player.posY,player.width,player.height);
ctx.restore();

}

//FUNCTION MAIN ENCARGADA DE LLAMAR LAS DEMAS FUNCIONES EN EL INTERVALO PREDEFINIDO
function main(){
setBackground();
  setPlayer("blue",420,420, 20, 20);
 movePlayer();

}
}
Con esto ya debemos controlar el movimiento de nuestro jugador, pero atentos!! el jugador sale del canvas si lo dejamos, :). Bien para que el jugador no salga del perimetro del canvas tenemos que crear las colisiones entre el jugador y los bordes del canvas.
Y eso es el tema del próximo tutorial. :)
hasta aqui llegamos con esta segunda parte del tutorial, espero les sea de ayuda y puedan desarrollar sus proprias ideas. En el proximo tutorial tambien hablaremos de crear circulos y arcos en canvas con Javascript.