Ejemplo de código para un juego en JQuery
Continuando con los tutoriales de JQuery, he ido implementando algunas nuevas funciones al juego, entre ellas un pequeño algoritmo que organice los niveles, la velocidad y alguna animación intermedia para darle algo más de “rollo” a este arcade de disparos de naves.
En este nuevo código hemos añadido varias capas para mostrar información, el div marcador mostrará cada nave eliminada, esta función se tomará en el clic de la capa pulsada como se verá más adelante. Otra capa es “ataque” esta capa controla el número de atantes o naves que hay actualmente en pantalla, será un control para que cuando se supere cierto número se pierda la partida. Para terminar las capas o divs, se añadió otra capa MuestraNivel, esta capa nos servirá para ir mostrando cada vez que subamos a un nuevo nivel con una pequeña animación utilizando JQuery.
Por otro lado, hemos declarado 3 nuevas variables, nivel, tiempo y otro nivel que omitiré explicar ya que está bien comentado el código.
Como funciones, hemos creado la función NuevoNivel que como su nombre indica, crea un nuevo nivel, en esta función se incrementa un nivel y hace el cálculo del tiempo de llamada a CrearNuevaNave, pero antes utilizamos el método toggle de JQuery para animar la capa MuestraNivel, lo hemos implementado de manera que mientras está operando la animación en JQuery el resto quede totalmente parado (aunque no controlamos la pulsación de naves en este tiempo).
La función CrearNuevaNave ya viene de anteriores tutoriales de JQuery, por lo que solo ha cambiado que se actualice el texto en marcador utilizando el método .html de JQuery y el control de al eliminar una nave conprobar si se ha pasado de nivel o no, si es así, elimina el setinterval creado anteriormente y llamo a un NuevoNivel().
En resumen es todo lo que se ha hecho con respecto al anterior código-tutorial, así que os dejo el código que está comentado:
<!DOCTYPE html>
<html>
<head>
<title>Crear capa al vuelo con JQuery al pulsar un botón</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<style>
#pantalla{
background: #CCC;
width: 640px;
height: 320px;
text-align: center;
background-image:url(./imgs/fondo-guerra-planetaria.jpg)
}
#marcador{
float:left;
text-align: center;
color:#FFF;
font-family:Verdana, Geneva, sans-serif;
font-size:25px;
}#ataque{
float:right;
text-align: center;
color:#FFF;
font-family:Verdana, Geneva, sans-serif;
font-size:25px;
}#MuestraNivel{
position:absolute;
text-align: center;
width: 500px;
height: 350px;
color:#F00;
left: 0px;
top: 120px;
font-family:Verdana, Geneva, sans-serif;
font-size:40px;
display: none;
}.nave{
background-image:url(./imgs/nave.png);
height: 67px;
width: 100px;
display: none;
}</style>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script type=”text/javascript”>$(document).ready(function() {
var nNave = 1; //número de nave para el id
var puntos = 1; //Puntos o naves eliminadas
var nivel = 0; //Para controlar el nivel actual
var tiempo = 0; //tiempo por el que serán llamada otra nueva nave enemiga
var OtroNivel; //el id para controlar el setinterval por nivel y eliminar el del nivel anteriorfunction NuevoNivel()
{
nivel++;
tiempo = 2000/nivel;
//Asigno el nivel a la capa para mostrarlo
$(“#MuestraNivel”).html(“Nivel </br>” + nivel)
//$(‘#MuestraNivel’).toggle(5000);//Muestro el nuevo nivel
$(‘#MuestraNivel’).toggle(1200, function() {
//Cuando se muestre, lo oculto y cuando termine lanzo la nave
$(‘#MuestraNivel’).toggle(1200, function() {
//creo una nueva nave cada tiempo al ocultarse el efecto del nivel
OtroNivel = setInterval(CrearNuevaNave, tiempo);
});
});};
function CrearNuevaNave()
{
nNave++; //añado uno más al contador de naves//actualizo el número de atacantes, es el número de naves – las eliminadas
$(‘#ataque’).html(“Ataca: ” + (nNave – puntos));/*Añado la capa con id = Nave + el contador de la nave quedando: Nave1 / Nave2 …*/
jQuery(‘#pantalla’).append(‘<div id = “Nave’+ nNave +'” class = “nave”></div>’)/*Cambio la posición de la capa de forma aleatoria*/
var idNave = “#Nave”+nNave;
$(idNave).css(“position”, “absolute”);
$(idNave).css(“left”, Math.floor(Math.random() * 600)+10);
$(idNave).css(“top”, Math.floor(Math.random() * 320));/*Creo una función a esta capa, cada vez que se pulse en ella se oculta y elimina*/
$(idNave).click(function() {
$(idNave).fadeOut(500,function(){
$(‘#marcador’).html(“Px: ” + puntos++);
$(idNave).remove();
//al eliminar la nave compruebo la cantidad de naves actuales por nivel para saber si paso de nivel y cambio parámetros
if (puntos == (nivel * 10))
{
//primero elimino el intervalo existente y creo otro nuevo nivel
clearInterval(OtroNivel);
NuevoNivel();
}
})});
/*Una vez creadas todas las propiedades de la capa la muestro*/
$(idNave).fadeIn();
};
NuevoNivel();});
</script>
</head>
<body>
Ejemplo de como crear una nueva capa o div cada x segundos con JQuery<br>
<div id=’pantalla’>
<div id=”MuestraNivel”></div>
<div id=”marcador”>Px: 0</div>
<div id=”ataque”>Atacan: 0</div>
</div></body>
</html>
Para descargar el ejemplo del juego en JQuery con su código clic aquí.
Cualquier duda podéis comentarla y por supuesto compartir!
Comments