Muchos desarrolladores web utilizan la librería Jquery para hacer mas interactivas y funcionales su paginas web. La librería jQuery ofrece devirsos metodos y funciones entre ellos Jquery Effect que sirve para añadir interactividad y animación a los elementos de un sitios web.
Las animaciones no requieren de nigun plugin especial y son compatibles con la mayoria de los navegadores, ademas para la parte grafica se utiliza CSS3.
Algunas propiedades son:
La sintaxis es la siguiente
Creamos el juego con Jquery y el metodo Animate()
Crearemos con este método un juego estilo Simon Dice o juego de memoria que consistira en mostrar una cantidad de circulos rojos en la pantalla y solo alguno de ellos se mosntraran en un secuencia en azul, el jugador debera hacer clic repitiendo la secuencia, si logra acertar la secuencia la pantalla se redibujara añadiendo mas circulos y elevando el nivel de dificultad. Si el jugador falla la secuencia debera repetir ese nivel de juego hasta completarlo correctamente. También un aviso le indicará si completo el nivel y asi pasará al proximo nivel.
El juego iniciará con 2 filas y 2 columnas, 4 circulos de los cuales 2 de ellos se mostrarn por unos segundos en azul. Luego deberemos hacer clic en los dos que estuvieron en azul. Asi en cada nivel se añadira una columna y en otro nivel una fila, ademas tambien se añadiran mas ciruclos activos en azul para luego tratar de recordar la misma secuencia.
No importa el orden de aparición, sino que se haga clic en todos los circulos que esten en azul.
El máximo tamaño de tablero o escenario será de 6 columnas por 6 filas lo que dará una grilla de 36 circulos.
Buscamos una imagen de fondo para nuestro juego será el fondo de la web o podemos utilizar un color plano. Comenzamos creando una directorio juego y dentro un archivo index.html que contendra la pagina web, el codigo de la web sera el siguiente:
La versión de Jquery con utilizar cualquiera 1.9 o superior esta bien para este ejemplo. Luego crearemos el archivo estilos.css para las hojas de estilo utilizaremos CSS3 para las sombras y algunos efectos para nuestro juegos. Los identificadores y las clases luego las utilizaremos desde Jquery para poder realizar la animacion y la interactividad del juego.
Cuando tengamos creado los estilos ya podemos crear la funcionalidad y animación propias del juego. Creamos un archivo juego.js le escribimos el siguiente codigo Javascript, debemos identificar aquí cuales son las clases he identificadores css que participan en el juego y para que las utilizamos. Cada una tiene atributo atrr y se le pueden agregar clases con addClass.
Asi concluimos el juego podemos añadirle puntaje, aviso y mensajes, tambien sonido si queremos, ademas de la posibilidad de parar y continuar el juego, tengamos en cuenta que es solo Javascript, HTML y CSS pero seria facil de extender añadiendo resultados a una base de datos o incorporarle mayor nivel de dificultad.
Las animaciones no requieren de nigun plugin especial y son compatibles con la mayoria de los navegadores, ademas para la parte grafica se utiliza CSS3.
Algunas propiedades son:
El método animate()Este metodo permite aplicar un estilo css a un elemento de una poagina web por ejemplo agrandar una capa.
La sintaxis es la siguiente
(selector).animate({estilo},velocidad)Un ejemplo sencillo de la funcion animate que sirve apra aplicar un estilo css a un elementos:
<html><head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script>$(document).ready(function(){ $("#botonA").click(function(){ $("#capaverde").animate({height: "400px"}); }); $("#botonB").click(function(){ $("#capaverde").animate({height: "50px"}); });});</script></head><body><button id="BotonA">Animar y Expandir a lo largo</button><button id="BotonB">Animar y Contraer </button><div id="capaverde" style="background:#98bf21;height:200px;width:200px;margin:10px;"></div></body></html>Asi podemos ver como con el metodo animate() podemos aplicar css a un elemento y hacer que cambie en determinado tiempo (milisegundos) para genrear algun efecto que necesitemos.Creamos el juego con Jquery y el metodo Animate()
Crearemos con este método un juego estilo Simon Dice o juego de memoria que consistira en mostrar una cantidad de circulos rojos en la pantalla y solo alguno de ellos se mosntraran en un secuencia en azul, el jugador debera hacer clic repitiendo la secuencia, si logra acertar la secuencia la pantalla se redibujara añadiendo mas circulos y elevando el nivel de dificultad. Si el jugador falla la secuencia debera repetir ese nivel de juego hasta completarlo correctamente. También un aviso le indicará si completo el nivel y asi pasará al proximo nivel.
El juego iniciará con 2 filas y 2 columnas, 4 circulos de los cuales 2 de ellos se mostrarn por unos segundos en azul. Luego deberemos hacer clic en los dos que estuvieron en azul. Asi en cada nivel se añadira una columna y en otro nivel una fila, ademas tambien se añadiran mas ciruclos activos en azul para luego tratar de recordar la misma secuencia.
No importa el orden de aparición, sino que se haga clic en todos los circulos que esten en azul.
El máximo tamaño de tablero o escenario será de 6 columnas por 6 filas lo que dará una grilla de 36 circulos.
Buscamos una imagen de fondo para nuestro juego será el fondo de la web o podemos utilizar un color plano. Comenzamos creando una directorio juego y dentro un archivo index.html que contendra la pagina web, el codigo de la web sera el siguiente:
<html> <head> <title>Juego Memoria</title> <script src="http://code.jquery.com/jquery-1.11.2.js"language="javascript" type="text/javascript"></script> <script src="juego.js" language="javascript" type="text/javascript"></script> <link href="estilos.css" rel="stylesheet" /> </head> <body> <div id="fondo"> <h2>Juego Simon Dice</h2> <h3>Debemos recordar la secuencia de ciruclos azules y <br> hacer clic repitiendo la secuancia</h3> <div class="contenedor"> <div class="juego"></div> </div> </div> </body> </html>
La versión de Jquery con utilizar cualquiera 1.9 o superior esta bien para este ejemplo. Luego crearemos el archivo estilos.css para las hojas de estilo utilizaremos CSS3 para las sombras y algunos efectos para nuestro juegos. Los identificadores y las clases luego las utilizaremos desde Jquery para poder realizar la animacion y la interactividad del juego.
body {
margin:0px;
padding:0px;
}
#fondo {
background:#333 url(fondo.jpg);
text-align:center;
margin-top:-20px;
padding-top:10px;
height:800px;
display: block;
}
h2{
color:#fff;
}
h3{
color:#ccc;
}
.contenedor{
padding:4px;
display:inline-block;
background-color: #ffffff;
width:200px;
height:200px;
border:1px black solid;
border: 1px solid rgb(204, 204, 204);
border-radius: 3px 3px 3px 3px;
-webkit-box-shadow: 6px 5px 8px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 6px 5px 8px 0px rgba(50, 50, 50, 0.75);
box-shadow: 6px 5px 8px 0px rgba(50, 50, 50, 0.75);;
}
.figura{
border:2px #fff solid;
background: red;
margin:0px;
padding:0px;
display:inline-block;
box-shadow: 2px 2px 2px rgb(136, 136, 136);
margin:2px;
}
.figura:hover{
cursor:pointer;
}
.activa{
background-color:#4D90FE;
}
.error{
background-color:red;
}
.circulo{
/* border-radius:50px; */
width: 100px;
height: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}Cuando tengamos creado los estilos ya podemos crear la funcionalidad y animación propias del juego. Creamos un archivo juego.js le escribimos el siguiente codigo Javascript, debemos identificar aquí cuales son las clases he identificadores css que participan en el juego y para que las utilizamos. Cada una tiene atributo atrr y se le pueden agregar clases con addClass.
var Tfigura = 55; //Tamaño de la figura
var IniciaJuego = false // Iniciar juego Falso=No
var ProximoNivel = true; // Verdadero continuar el juego si es falso el juego se detiene
var columnas = filas = 2 // Tamaño inicial de fichas o ciruclos en el tablero 2x2 osea 4 circulos
$(document).ready(function(){
//Genero el juego segun la cantidad de columnas y filas de cada nivel de dificultad
GeneraJuego(columnas ,filas);
});
function GeneraJuego(c,r){
//Si ProximoNivel es igual a falso indica que el juego debera detenerse
if(!ProximoNivel )
return;
//Detengo el juego
ProximoNivel = false;
//Borramos todos los elementos del escenario o tablero de juego
$( ".juego" ).fadeOut( 1000,
// al finalizar el metodo desvanecer
// vaciar los elementos del juego en el escenario o tablero de juego
function() {
$( ".juego" ).empty();
// Expandir el escenario o tablero de juego para acomodar los circulos
$( ".contenedor" ).animate({height: ((Tfigura+8)*r)+"px",width: ((Tfigura+8)*c)+"px"},1000,
// al finalizar la expansion con amimate()
// creo las nuevas figuras segun la nueva dimension de la pantalla i nivel de juego
function(){
for(i = 0; i < (c * r); i++)
$( ".juego" ).append(CrearFigura("circulo", Tfigura));
$( ".juego" ).fadeIn(200);
// Creo en forma aleatoria cuales son los circulos del tablero que podran ser cliqueados y cuales no
CrearFiguraAzul();
}
)
}
);
}
function CrearFigura(tipofigura, r){
//Si se hace clic en alguna figura
return $("<div>").addClass("figura "+tipofigura).width(r).height(r).click(function(){
if(IniciaJuego){
//Verifico si esa figura tiene el atributo seleccionado osea si es una de las que estuvieron activas en azul
if($(this).attr("selected") == "selected")
$(this).addClass("activa");
else
$(this).addClass("error");
var TotalSeleccionadas= $( ".figura[selected='selected']" ).length
//Si la cantidad de clic en circulos activos y la cantidad de clic en circulos no activos es mayor a la cantidad de clic realizados no conti nuamos el juego y volveremos a regenerar la pantalla luego sin cambiar el nivel
if(($(".activa").length + $(".error").length) >= TotalSeleccionadas){
IniciaJuego = false;
$( ".figura[selected='selected']:not(.activa)" ).addClass("activa");
// Si el nivel de fallo en clic es 0 significa que acertamos la secuencia
if($(".error").length == 0){
alert("Has acertado la secuencia pasas al Proximo nivel");
if(columnas == filas)
columnas++;
else if( columnas > filas)
filas++;
//El maximo nivel son 6 filas por 6 columnas
if(columnas > 6){
columnas = 6;
filas = 6;
}
}
GeneraJuego(columnas,filas);
}
}
});
}
function CrearFiguraAzul(){
var count = 0;
var length = $( ".juego > .figura" ).length
for( count = 0; count < Math.ceil(length/3);){
var random = Math.ceil(Math.random()*length );
if(random < length){
if(!$( ".juego > .figura" ).eq(random).hasClass("activa")){
$( ".juego > .figura" ).eq(random).addClass("activa").attr( "selected", "selected" );
count++;
}
}
}
//Oculta las figuras seleccionadas luego de mostrar la secuencia a repetir
window.setTimeout(OcultarfigurasAzules,1200)
}
function OcultarfigurasAzules(){
$( ".juego > .figura" ).removeClass( "activa" );
IniciaJuego = true;
ProximoNivel = true;
}Asi concluimos el juego podemos añadirle puntaje, aviso y mensajes, tambien sonido si queremos, ademas de la posibilidad de parar y continuar el juego, tengamos en cuenta que es solo Javascript, HTML y CSS pero seria facil de extender añadiendo resultados a una base de datos o incorporarle mayor nivel de dificultad.
