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://lh4.googleusercontent.com/-__HvIo1I1wk/UeAweHF7GTI/AAAAAAAAESs/q78gHPDuc5U/s150-no/super+mario.png); position:relative;}
#estrella{width: 50px; height: 50px; top:-50px; background: url(https://lh4.googleusercontent.com/-_DuqmkJ4Jdc/UeAwVnZkboI/AAAAAAAAESY/hT_Nph3umbA/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