Tecnología

Pablo M. Francisco Idea guardada 0 veces
Sé la primera persona en valorar esta idea Valorar

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.

Fuente: este post proviene de Pablo M. Francisco, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

¿Seguro que estamos seguros?

Todos los pagos y compras online, todos los "Me gusta", comentarios, mensajes, twits, chats, todas las gestiones que hacemos por internet dejan un rastro que contiene nuestros datos personal ...

Mobile marketing trends 2015

This my first post in english. Please try to understand any mystakes :). Today 80% of consumers are concerned about mobile marketing. Thousands of mobile phone users world wide were surveied on their ...

Etiquetas: general

Recomendamos

Relacionado

general desarrollo web html5 ...

Creacion de Juego con HTML5 y JavaScript

En esta nueva serie de tutoriales y videos, veremos los aspectos generales para la creacion de un game con HTML5, JavaScript y jQuery. Bienvenidos a otro tutorial de HTML5!Hoy iniciaremos la creación de un simple videojuego (bastante simple :)), utilizando apenas HTML5 y Javascript. hablaremos de algunos aspectos basicos de programacion con JavaScript, dando por hecho que ya tenés un poco de noció ...

general

Creacion de un Game con HTML5 Javascript Utilizando el framework Phaser

En este tutorial iniciaremos un nuevo juego utilizando el Framework "Phaser", usando HTML y CSS3. Phaser es un framewprk/engine muy completo y facil de usar. Hola amigos, como ven en el video, el juego es muy simple de jugar, apenas tenes que comer las frutas para mantenerte en vuelo y cuidar para que las estrellas negras no te toquen o mueres. Si tienen un smartphone Android puden desc ...