Previo a Juego creado con JQuery, crear capas con coordenadas aleatorias y eliminarlas al pulsar el ratón
En este nueva entrega de JQuery y ya tomando forma y «algo» más visual, hemos dado un paso para lo que ya si estoy más seguro terminará en un juego arcade de defender la galaxia de los tan temidos extraterrestres. He de decir en primera instancia que el código viene de otros anteriores y que podéis revisar con el tag de JQuery, por lo que entiendo que no os será difícil seguirlo, y en segunda instancia, pienso que no todos los extraterrestres son una amenaza 😉
Sin más voy a comentar un poco como funciona este código a grosso modo ya que está comentado y entiendo que no ha de resultar complejo de leer. En el código lo que realizamos al pulsar el botón de «Crear» es precisamente eso, crear con JQuery el código para añadir una nueva capa con un id específico que se conforma con el nombre Nave + un valor, de esta manera el id de cada capa siempre será ascendente en plan que sea Nave1, Nave2 … NaveX. Una vez creada la capa con JQuery, al tener el identificador de esta, le añadimos dos propiedades top y left para situar la capa en un lugar aleatorio, para ello hemos utilizado la función Random de javascript. Para terminar, le añadimos una función a la escucha del evento clic, de manera que cuando sea pulsada la capa la hagamos desaparecer y una vez terminado el efecto de desaparecer eliminar la capa por completo para liberar esa memoria.
Este en principio es el método completo que seguimos, el resto es un estilo para la capa de tipo nave, la pantalla con el fondo y un par de detalles en html que son genéricos. Sin más os dejo el código:
<!DOCTYPE html>
<html>
<head>
<title>Crear capa al vuelo con JQuery al pulsar un botón, modificando el style y con evento clic</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)
}
.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»>
var nNave = 0;function CrearNuevoDiv()
{
nNave++; //añado uno más al contador de naves
/*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(){
$(idNave).remove();
}
)});
/*Una vez creadas todas las propiedades de la capa la muestro*/
$(idNave).fadeIn();
};
</script>
</head>
<body>
Ejemplo de como crear una nueva capa o div al pulsar un botón con JQuery con posición aleatoria y haciéndola desaparecer al pulsar sobre ella
<input type=»button» name=»Crear» id=»Crear» value=»Crear» onClick=»CrearNuevoDiv()»>
<div id=’pantalla’></div>
</body>
</html>
Entiendo que es algo burdo y que el código se podría haber realizado con más clase, pero está funcional y solo quiero mostrar algunas formas de trabajar con JQuery, ni la mejor, ni la más óptima, pero si una que funciona. Así que os dejo el código completo de como crear capas o div al vuelo al pulsar un botón y eliminar esta misma capa al pulsar sobre la capa
Si tenéis cualquier duda comentarla y sobre todo compartid!
