Cómo crear tic-tac-dedo del pie en su juego html5

Este juego parece una adición bastante simple de su juego HTML5, pero puede ser sorprendentemente difícil de implementar también. Hay tres aspectos principales a tic-tac-toe que necesitará: la interfaz visual y datos, determinar un ganador y la construcción de una IA.

Crear el tablero de juego

La mejor manera de manejar la interfaz de usuario es la construcción de un mecanismo basado en baldosas simplista. La clave del juego de tic-tac-dedo del pie es un sprite especial llamado celda. Cada celda representa un espacio en el tablero. Tiene tres estados (X, O, y en blanco). Al hacer clic en la celda cambia el estado interno y (por supuesto) la representación visual del estado.

El objeto de célula es simplemente una subclase del sprite:

la función celular () {TCell = new Sprite (juego "blank.jpg", 100, 100) -tCell.setSpeed ​​(0) -tCell.state = BLANCO-tCell.images = new Array ("blank.jpg", " X.jpg "," O.jpg ") - tCell.checkClick = function () {if (this.isClicked ()) {if (this.state == EN BLANCO) {this.state = currentPlayer-this.setImage (esto .images [currentPlayer]) - // cambiar el playerif (currentPlayer == X) {currentPlayer = O-} else {currentPlayer = X} // end if} // end if} // end if} // fin checkClickreturn tCell-} // fin celular

He aquí cómo la celda código funciona:

1. Crear un currentPlayer variable.

   Esta variable contiene el valor correspondiente al jugador actual. La variable actual jugador rotará entre X y O.

2. Asignar constantes para los estados.

   Los tres estados son constantes enteras.

3. Crear una serie de imágenes.

   Asignar imágenes que corresponden a los distintos estados.

4. Crear un checkClick () método.

   Este método cambiará de estado de la célula apropiada. También cambiará la currentPlayer variable para el siguiente clic se registrará para el otro jugador.

5. Construir una matriz de células.

   Una vez que una sola célula hace lo que quiere, se puede construir un conjunto de ellos.

Cómo configurar el diseño visual

La colocación de las células en la pantalla es interesante. Puede parecer natural para utilizar una matriz de dos dimensiones para el tablero de tic-tac-dedo del pie, pero la estructura de bucle anidado puede ser engorroso en una pequeña estructura de este tipo de datos, y el tratamiento de la junta como una matriz 2D no proporciona muchos beneficios. En su lugar, considere la construcción de este como una matriz de una sola dimensión.

Las células se disponen de esta manera:

0 1 23 4 56 7 8

Trate de dividir todos los valores en la imagen de arriba por 3. Usted verá algunos patrones interesantes. Cada valor en la primera fila (0, 1, y 2) producir cero (y algunos resto) cuando se divide por 3. Cada elemento de la segunda fila (3, 4, y 5) da 1 resto algo, y cada elemento de la tercera fila produce un 2 queda algo.

Si divides cualquiera de estos números 3 y convertir el resultado en un entero, obtendrá el número de fila. En javascript, puede utilizar esta línea de código:

fila = parseInt (i / 3) -

Hay otro patrón interesante si nos fijamos en los restos. Todos los números en la primera columna (0, 3, y 6) son uniformemente divisible por 3, lo que significa que tienen restos de 0. Todos los números en la siguiente columna (1, 4, y 7) tienen un resto de 1, y la última columna produce un residuo de 2. El resto de la división por 3 dará el número de columna.

En javascript, el módulo operador (%) Producirá el resto de una división entera, para que pueda obtener el número de columna con una fórmula similar:

col = i% 3

El código para la creación de las células utiliza estas fórmulas para extraer la fila y el número de columna para cada celda, y luego coloca la célula en la pantalla multiplicando estos valores por el ancho de la celda y la adición de un desplazamiento.

 buildCells function () {células = new Array (9) -xOffset = 100-yOffset = 100-for (i = 0- i lt; cells.length- i ++) {células [i] = new Cell () - fila = parseInt (i / 3) -col = i% 3-xPos = (col * 100) + xOffset-yPos = (fila * 100) + yoffset-células [i] .setPosition (xPos, ypos) -} // end para el bucle} // buildCells finales

Cómo comprobar su juego para una combinación ganadora

La computadora no entiende el concepto de tres en una fila, y necesita que le enseñen.

Echa un vistazo a la siguiente fragmento de código:

 winningCombos = new Array (new Array (0, 1, 2), new Array (3, 4, 5), new Array (6, 7 8,), new Array (0, 3 6,), new Array (1, 4, 7), new Array (2, 5, 8), new Array (0, 4, 8), new Array (2, 4, 6)) - 

El código simplemente establece una matriz de dos dimensiones. Esta matriz es una lista de todas las combinaciones ganadoras. Si el mismo jugador controla células 0, 1, y 2, ese jugador ha ganado la partida. Cada fila representa una combinación ganadora diferente.

Entonces se convierte en fácil de comprobar si hay un ganador:

 checkWins function () {ganador = 0º (combo = 0- combo lt; winningCombos.length- combo ++) {a = winningCombos [combinados] [0] = -b winningCombos [combinados] [1] -c = winningCombos [combinados] [2] -si (células células [a] .state == [b ] .state) {if (células [b] .state == células [c] .state) {if (células [a] .state! = BLANCO) {ganador = células [a] .state-} // end if } // end if} // end if} // fin forreturn ganador-} // checkWins finales

¿Cómo añadir una IA

El tipo más común de la inteligencia artificial para este tipo de problema se denomina una heurístico algoritmo. Es un truco que permite que la computadora adquiera rápidamente con una buena solución si bien no garantiza una solución perfecta.

La estrategia general es construir una matriz de clasificación de células:

 cellRank = new Array (3,2,3,3,4,3,3,2,3) -

El rango de cada célula indica el número de combinaciones que van a través de él ganar, así celular 4 (la celda central) es la célula más valiosa en el comienzo del juego.

A medida que el juego avanza, el equipo vuelve a evaluar la red de acuerdo a los siguientes cálculos simplistas:

1. Si cualquier celda no está en blanco, degradarlo.

   Las únicas células que usted debe considerar son las que están en blanco, por lo que si ya está en una celda, reste 99 de su ranking celular.

2. Busque combinaciones ganadoras parcialmente terminados.

   Paso a través de cada combinación ganadora. Si cualquiera de las dos células tienen el mismo valor, pero el tercero está en blanco, añadir un valor a la tercera.

3. Encuentra la celda más alta.

   Después de pasar por todas las combinaciones, bucle a través de la clasificación de células para ver cual es el ranking más alto de células.