Esta vez vamos a diseñar un juego, el famoso “Gato” para poder competir con algún amigo. Algunos problemas para la elaboración de este juego se solucionaron con la ayuda del libro “Programming with JavaScript: Algorithms and Applications for Desktop and mobile Browsers”.
Comencemos:
1.- Estructura html. En este caso no es nada complicada, solamente haremos uso de un div sobre el cual iremos agregando la estructura con la función append. Por ello es necesario agregarle un id con el cual vamos a hacerle referencia.
<div id=”gato”></div>
2.- Estilos del juego. En este caso no haremos uso de muchos estilos, simplemente para el identificador anterior y poder centrarlo, de modo que podamos ver mejor el tablero del juego.
<style type=”text/css”>
#gato{ width:250px; margin:10px auto; }
</style>
3.- Agregar la referencia a la API de JQuery. Accedemos a la página de JQuery para agregar el query más actualizado.
<script src=”http://code.jquery.com/jquery-1.11.0.min.js”></script>
4.- Implementar código JQuery. El siguiente es el código completo del script, posteriormente vamos a definir cada uno de sus elementos a fin de entenderlo.
<script type=”text/javascript”>
$(document).ready(function () {
var cuadritos = [];
var puntos;
var movimientos;
var turno = “X”;
var ganar = [7, 56, 448, 73, 146, 292, 273, 84];
var jugar,ganador;
$(function() {
var tablero = $(“<table bgcolor=’green’ border=5 cellspacing=10>”);
var indicador = 1;
for (var i=0; i<3; i+=1) {
var fila = $(“<tr>”);
tablero.append(fila);
for (var j = 0; j <3; j += 1) {
var celda = $(“<td height=50 width=50 align=center></td>”);
celda[0].indicador = indicador;
celda.click(function() {
if ($(this).html() !== ” “) {
return;
}
$(this).html(turno);
movimientos =movimientos + 1;
puntos[turno] += $(this)[0].indicador;
if (ganador(puntos[turno])) {
alert(turno + ” ha Ganado!!!”);
}
else if (movimientos == 9) {
alert(“Es un empate”);
}
else {
if(turno==”X”)
{turno=”O”;}
else
{turno=”X”}
}
});
fila.append(celda);
cuadritos.push(celda);
indicador += indicador;
}
}
$(document.getElementById(“gato”)).append(tablero);
jugar();
});
jugar = function() {
turno = “X”;
puntos = {“X”: 0, “O”: 0};
movimientos = 0;
cuadritos.forEach(function(cuadro)
{cuadro.html(” “);
});
};
ganador = function(puntos) {
for (var i=0;i<ganar.length;i+=1) {
if ((ganar[i]&puntos)==ganar[i]){
return true;
}
}
return false;
};
});
</script>
5.- Entendiendo el script de JQuery. La función principal, como ya sabemos, comienza con el
$(document).ready();
De modo que hagamos referencia al documento de nuestra página. Declaramos algunas variables que nos serán útiles.
Para determinar la condición de victoria cada cuadro se “etiqueta” de izquierda a derecha y de arriba abajo, con las sucesivas potencias de 2. Cada celda representa un valor de la potencia y dicho valor se le asigna al jugador que ocupa la casilla. Por lo tanto el ganador se puede determinar fácilmente comprobando si los valores de los jugadores han cubierto cualquiera de las combinaciones para obtener la victoria. Dichas combinaciones son las que pertenecen a la variable ganar:
273 84
/
1 | 2 | 4 = 7
—–+—–+—–
8 | 16 | 32 = 56
—–+—–+—–
64 | 128 | 256 = 448
=================
73 146 292
De este modo llenamos la variable ganar con los valores con los que es posible ganar.
La siguiente función se encarga de dibujar el tablero haciendo uso del comando append, se utiliza todo entre la función $( ) pues de este modo se hace más simple seleccionar elementos y para poder hacer un callback de otras funciones (jugar y ganador) que se explicarán más adelante y funciona de la siguiente manera:
var tablero = $(“<table bgcolor=’green’ border=5 cellspacing=10>”);
Define una variable con un código html que se encarga de dibujar nuestra tabla. El siguiente for se encarga de agregar las filas de nuestra tabla de acuerdo al tamaño que definimos
for (var i=0; i<3; i+=1) {
var fila = $(“<tr>”);
tablero.append(fila);
Entendemos entonces que nuestro primer for se encarga de agregar las filas, requerimos que sea menor que 3 pues un “gato” no contiene más de 3 filas, y se agregan con el comando append a la tabla como se mencionó anteriormente.
Del mismo modo que lo anterior, nuestro siguiente for agrega las celdas (necesitamos que sean 3 por fila) y a la primer celda (Celda[0]) le asigna el valor de 1, denotado como celda[0].indicador de modo que se asignen los valores a la matriz en potencias de 2 (20=1) como se explicó en la primera parte.
for (var j = 0; j <3; j += 1) {
var celda = $(“<td height=50 width=50 align=center></td>”);
celda[0].indicador = indicador;
A continuación, y dentro de ambos for utilizamos la función click en la variable celda que nos permitirá realizar lo que necesitamos cuando se le de click a la celda
celda.click(function() {
Y una vez dentro de la función si se da click a un elemento que no esté vacío no queremos que ocurra algo, por lo que utilizamos el siguiente condicional:
if ($(this).html() !== ” “) {
return;
}
En caso de que el elemento esté vacío mediante el uso de $(this).html(turno); nos encargamos de imprimir X o O de acuerdo al turno que corresponde. A continuación aumentamos los movimientos, pues se utilizan como condición para alcanzar un empate, es decir, si se alcanzan los 9 movimientos y no se ha declarado un ganador, automáticamente se determina un empate.
A continuación se suman los puntos que obtiene por presionar una casilla y se le asignan a turno, sea O o X:
puntos[turno] += $(this)[0].indicador;
Ahora, mediante condicionales se determinan las condiciones de victoria, primeramente, si los puntos sumados corresponden a alguno de la cadena ganador, entonces se determina que ha ganado el jugador del turno en curso. En caso de que no se haya determinado aún un ganador y se hayan alcanzado los 9 movimientos determina un empate con un alert. Y finalemente, si no hay ganador aún, cambia al turno del siguiente jugador.
if (ganador(puntos[turno])) {
alert(turno + ” ha Ganado!!!”);
}
else if (movimientos == 9) {
alert(“Es un empate”);
}
else {
if(turno==”X”)
{turno=”O”;}
else
{turno=”X”}
}
Y para terminar los cilcos for agregamos la celda a la fila con append, y el valor de la celda (en la que se hizo click) al arreglo cuadritos mediante la función push y aumentamos el indicador.
fila.append(celda);
cuadritos.push(celda);
indicador += indicador;
Terminamos la función llamando al documento y obteniendo el elemento por su identificador (nuestro único div) y le agregamos el tablero que se realizó anteriormente. Y llamamos a otra función llamada jugar();.
$(document.getElementById(“gato”)).append(tablero);
jugar();
FUNCIÓN JUGAR Y FUNCIÓN GANADOR
Estas funciones no son nada complicadas, se declaran como variables para poder llamarlas dentro de la función principal, de modo que podamos hacer modificaciones al juego más rápidamente, además de que sera menos complicado entender como funciona el cambio de turnos y la búsqueda del ganador en el arreglo. La función jugar únicamente tiene la función de alternar los valores de O o X y de asignar a cada elemento de “cuadritos” un espacio en blanco.
jugar = function() {
turno = “X”;
puntos = {“X”: 0, “O”: 0};
movimientos = 0;
cuadritos.forEach(function(cuadro)
{cuadro.html(” “);}
Por último explicaremos la función ganador la cual, tal como lo dice su nombre, se encargará de determinar al ganador haciendo un recorrido mediante un for, de los valores con los cuales se obtiene la victoria mediante una condición if. Básicamente se encarga de determinar si la puntuación en cualquier momento es una puntuación ganadora y regresar un verdadero.
ganador = function(puntos) {
for (var i=0;i<ganar.length;i+=1) {
if ((ganar[i]&puntos)==ganar[i]){
return true;
}
}
return false;
};
Esperamos que este código sirva para entender el uso de algunas funciones y entender el callback entre funciones. Saludos!
