Anexsoft | Blog y dictado de cursos de Tecnología

En este encontrarás tutoriales de tecnología como PHP, ASP.NET MVC, Front-End, entre otros y cursos exigentes de modalidad online que te ayudarán a crecer profesionalmente.

Creando un juego con jQuery
Actualizado el 14 Enero, 2015 y leído 2,324 veces
Calificación: Sin calificar 10

Creando un juego con jQuery

Anexsoft

Nuestro ejemplo: es un juego de una nave que intenta esquivar minas, si es golpeado por una de ellas pierde puntos de vida y si logra esquivarla gana puntos de score.


Actores

Usaremos 3 imagenes como base que seran nuestros actores de nuestro juego.


El cual le vamos a definir una variable propia a cada una para que posea sus propias caracteristicas y saber que es lo que hacen:

var minas = {
'aparicion': 600, // Cada cuantos milisegundos va aperecer
'velocidad': 80 // a que velocidad se va a desplazar
}; /*propiedades de la mina*/

var nave = { /*propiedades de la nave*/
dir: 0, // Direccion a la que se esta movinedo
vel: 30, // Velocidad a la que se mueve
dis: 0, // posicion actual de la nave
minas: 0, // Cantidad de minas que van a aparecer
comenzar: 0, // Si ya comenzo a jugar
puntos: 0 // Puntos ganados
};


Mapa
Nuestro maquetado HTMl es sencillo:


Movimiento de la nave
El juego comienza cuando movemos la tecla derecha/izquierda moviendo la nave en esa dirección

Con este código le decimos a nuestra variable nave a donde tiene que moverse.

$(document).keyup(function(e){
switch(e.keyCode){
case 39:
nave.dir = 1;
if(nave.comenzar==0)
nave.comenzar = 1;
break;
case 37:
nave.dir = 2;
if(nave.comenzar==0)
nave.comenzar = 1;
break;
}
})

Y con esto código la movemos

nave.movimiento = setInterval(function(){
switch(nave.dir){
case 1:
nave.dis += nave.vel;
$("#nave").css('margin-left',nave.dis);
break;
case 2:
nave.dis> $("#nave").css('margin-left',nave.dis);
break;
}
if(parseInt($("#nave").css('margin-left').replace('px',''))> 850 && nave.dir == 1){
nave.dis = -10;
}
if(parseInt($("#nave").css('margin-left').replace('px',''))< 0 && nave.dir == 2){
nave.dis = 900;
}
},80);


Movimiento de las minas
Este código se encarga de crear las minas en una coordenada X al azar y asignarle un ID, aquí en base a la cantidad de puntos que tengamos la mina aparecera más pronto y con mayor velocidad.

minas.movimiento = setInterval(function(){
if(nave.comenzar>0){
nave.minas += 1;
var posicion = Math.round(Math.random()*950);
var id = "bl-" + nave.minas;
var mina = '<div class="mine" style="margin-left: ' + posicion + 'px"><img src="images/mine.png" /></div>';
$("#space").append(mina);
moverMinas("#"+id);

/*
Para cada cantidad de puntaje conseguido hacemos que la mina
aumente su velocidad, y aparesca mas rapido
*/
switch(nave.puntos){
case 50:
minas.aparicion = 550;
break;
case 100:
minas.aparicion = 400;
break;
case 150:
minas.aparicion = 300;
minas.velocidad = 60;
break;
case 200:
minas.aparicion = 200;
minas.velocidad = 40;
break;
case 300:
minas.aparicion = 100;
minas.velocidad = 20;
break;
}
}
},minas.aparicion);

Con este código le vamos a decir a la mina vaya hacia abajo. La cual si choca con nosotros nos quita puntos de vida.

function moverMinas(id){
var a = setInterval(function(){
if(parseInt($(id).css('top').replace('px',''))>550){
var nave_posicion = parseInt($("#nave").css('margin-left').replace('px',''));
var mina_posicion = parseInt($(id).css('margin-left').replace('px',''));

if(nave_posicion >= (mina_posicion - 60) && nave_posicion <= (mina_posicion + 60) ){
var vida = parseInt($("#life div").width() - 100);
$("#life div").width(vida);

$(id).effect('pulsate',{times: 1},function(){
$(id).remove();
});

if(vida<=0){
clearInterval(minas.movimiento);
clearInterval(nave.movimiento);
alert('Usted hizo ' + nave.puntos + ' puntos');
$("#nave").effect('pulsate',{times: 3},function(){
$(this).remove();
});
}
}else{
nave.puntos += 10;
$("#points span").text(nave.puntos);
$(id).remove();
}

clearInterval(a);
return false;
}
var distancia = parseInt($(id).css('top').replace('px','')) + 60;
$(id).css('top',distancia);
},minas.velocidad);
}


Movimiento del espacio
Para esto vamos a usar el espacio como fondo de imagen y con CSS 3 puro creamos una animación que altere la posición "Y" del espacio.

/* Animaciones */
@keyframes moverEspacio {
from { background-position: 0 0; }
to { background-position: 0 100%; }
}
@-webkit-keyframes moverEspacio {
from { background-position: 0 0; }
to { background-position: 0 100%; }
}


Y luego a nuestro div#space que contiene el fondo del espacio

#space{
border: 20px solid black;
background: url('images/space.jpg') 0 0;
width: 945px;
height: 620px;
margin: auto;
overflow: hidden;
animation: 140s linear infinite moverEspacio;
-webkit-animation: 140s linear infinite moverEspacio;
}


Este ejemplo lo hice en el 2011 cuando dictaba un curso de jQuery, ahora lo podemos replicar usando full canvas en HTML5 y con código más bonito que vendra en próximos tutoriales.


Pueden ver la demo en:


NOTA: cuando descarguen el material adjunto hay 2 archivos uno que se llama esquivar-minas.html que es el juego explicado y el otro disparar.html donde enseño a crear el efecto de disparo.

¡Adquiera ya!

  • Software de Venta e Inventario hecho en PHP y Codeigniter

    Software de Venta e Inventario hecho en PHP y Codeigniter
  • Código de fuente de Red Social desarrollada en ASP.NET MVC

    Código de fuente de Red Social desarrollada en ASP.NET MVC
  • Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

    Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

Últimas publicaciones

Encuesta

¿Cómo nos conociste?

Síguenos

Estudia con nosotros y crece profesionalmente

Nuestros cursos han sido hecho en base a lo que demanda el mercado hoy en día.
La experiencia obtenida es la de un ambiente laboral.

Anexsoft
© 2017 Anexsoft, blog y cursos online de TI.