Ejemplo de código para un juego en JQuery responsive
Queriendo mejorar el juego realizado en JQuery que habíamos publicado en una anterior edición, hemos lanzado la v2. No es que sea una mejora sustancial, solo hemos conseguido una versión responsive, de manera que ahora tomará todo el ancho y alto de la pantalla, además de mejorar el algoritmo aleatorio de posición, ya que en la anterior versión la nave se salía del espacio, y estas naves aún no deben de hacerlo 😉
El código de ejemplo en el que hemos utilizado CSS y JQuery es el siguiente:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de código-tutorial de un juego en JQuery y css</title>
<meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″>
<style>
#pantalla{
background: #CCC;
text-align: center;
width: 100%;
height: 100%;
}
#marcador{
position:absolute;
left: 20px;
top: 60px;
text-align: center;
color:#FFF;
font-family:Verdana, Geneva, sans-serif;
font-size:25px;
}#ataque{
position:absolute;
left: 20px;
top: 30px;
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() {
/* Inicializo variables */
var nNave = 1;
var puntos = 1;
var nivel = 0;
var tiempo = 0;
var OtroNivel;
var nAtaque = 0;function NuevoNivel()
{
nivel++;
tiempo = 2000/nivel;
//Asigno el nivel a la capa para mostrarlo
$(«#MuestraNivel»).html(«Nivel </br>» + nivel)//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
nAtaque++;
//actualizo el número de atacantes, es el número de naves – las eliminadas
$(‘#ataque’).html(«Ataca: » + nAtaque);/*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»);//Calculo la posición tomando en cuenta el ancho de la pantalla de la ventana, añadiendo un margen a derecha e izquierda, arriba y abajo
$(idNave).css(«left», 100 + Math.floor(Math.random() * ($(window).width()-300)));
$(idNave).css(«top», 100 + Math.floor(Math.random() * ($(window).height()-400)));/*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++);
nAtaque–;
$(‘#ataque’).html(«Ataca: » + nAtaque);
$(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><div id=’pantalla’>
Ejemplo de código-tutorial de un juego en JQuery y css<br>
<img src=»./imgs/fondo-guerra-planetaria.jpg» height=»90%» width=»100%»>
<div id=»MuestraNivel»></div>
<div id=»marcador»>Px: 0</div>
<div id=»ataque»>Atacan: 0</div>
</div></body>
</html>
El código está comentado y creo que necesita poca aclaración, sino siempre puedes ver los anteriores tutoriales con su código de ejemplo en JQuery, además por supuesto podéis consultar la duda que os asalte! Podéis ver la demo del juego con su código en JQuery aquí
Compartid y comentad con el resto!
Gracias por el aporte, lo voy a probar pero me parece muy bueno saludos