A continuación se muestra una sencilla interfaz de lo que podría ser la iniciación hacia un juego creado con Jquery, en un juego un aspecto muy
importante es el movimiento y gracias a jquery se puede con unas pocas de líneas de código realizar esta función, después suman muchas más cosas
como el objetivo del juego, puede ser un tetris, o un juego de naves espaciales que disparan a marcianos, por ejemplo cuando disparas una bala detectar
cuando realmente le ha dado al enemigo y que hacer, se puede mostrar un resto de sangre y eliminar al enemigo, sumar puntos, restar puntos, conectar
una base de datos al juegos, crear diferentes fases, todo eso y más se puede hacer con Jquery.
Esta demo simplemente realiza una prueba de movimiento con Super Mario utilizando las teclas izquierda | derecha y dispara la estrella utilizando la
tecla "z" que retorna a Super Mario. Abajo del todo podéis ver el código de la demo.
<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.2.min.js'></script>
<script>
$(function(){
$(document).keyup(function(tecla){
if (tecla.keyCode == 39) {
$('#mario').animate({ left: "+=50" }, function(){$("#mario").stop()});
}
if (tecla.keyCode == 37) {
$('#mario').animate({ left: "-=50" }, function(){$("#mario").stop()});
}
if (tecla.keyCode == 90) {
$('#estrella').animate({ top: "-=500" });
$('#estrella').animate({ top: "+=500" });
}
});
});
</script>
<style>
#juego{background: white; border: 5px solid blue; width: 500px; height: 500px; overflow: hidden;}
#mario{width: 150px; height: 150px; top:350px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9E0xPeFHQg0x_EcXRnoHv3gYFmUb-ynd8dJ_LboI2PSQRHAa7uQqEQccaVYsfaykR-vFw2lHlRig-KcpNbsRGsjkyFOdb7xANE4UOdzjLrPhDzNp-lz8VBu0scsBJKpAjXzbY1rio328/s150-no/super+mario.png); position:relative;}
#estrella{width: 50px; height: 50px; top:-50px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZJ61SpnIxuIcoJWnHyOuDPrqv16koE2uTCzoN0YaN5sI40uCM_mFg_prjyZpzKNtLybjGmDphf8tB2eSfvu_jeqX8W2oDBOWXQwiaPTE2Cr5ry1RJTfC7LZW0ho4nZ-Uj2cRjQpaPZ5I/s50-no/estrella.jpg); position:relative;}
</style>
</head>
<body>
<div id="juego">
<div id="mario">
<center>
<div id="estrella"></div>
</center>
</div>
</div>
</body>
</html>
No hay comentarios:
Publicar un comentario