viernes, 12 de julio de 2013

Jquery orientado a juegos


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>