Comment créer de tic-tac-toe dans votre jeu de html5

Ce jeu semble être un assez simple ajout à votre jeu HTML5, mais il peut être étonnamment difficile à bien mettre en œuvre. Il ya trois aspects principaux de tic-tac-toe que vous aurez besoin: l'interface visuelle et les données, déterminer un gagnant et la construction d'une AI.

Créer le plateau de jeu

La meilleure façon de gérer l'interface utilisateur est de construire un mécanisme basé sur tuiles simpliste. La clé pour le jeu de tic-tac-toe est un sprite spécial appelé cellule. Chaque cellule représente un espace sur la carte. Il a trois états (X, O, et vierges). En cliquant sur la cellule modifie l'état interne et (bien sûr) la représentation visuelle de l'état.

L'objet de la cellule est simplement une sous-classe du sprite:

la fonction des cellules () {TCell = new Sprite (jeu, "blank.jpg", 100, 100) -tCell.setSpeed ​​(0) -tCell.state = BLANK-tCell.images = new Array ("blank.jpg", " X.jpg "," O.jpg ") - tCell.checkClick = function () {if (this.isClicked ()) {if (this.state == BLANK) {this.state = currentPlayer-this.setImage (ce .images [currentPlayer]) - // changer le playerif (currentPlayer == X) {currentPlayer = O-} else {X} currentPlayer = // fin si} // fin si} // fin si} // fin checkClickreturn tCell-} // cellule d'extrémité

Voici comment le cellule code fonctionne:

1. Créer un currentPlayer variable.

   Cette variable contient la valeur correspondant au courant joueur. La variable joueur actuel va tourner entre X et O.

2. Attribuer des constantes pour les Etats.

   Les trois états sont des constantes entières.

3. Créer un réseau d'images.

   Assigner des images qui correspondent aux différents états.

4. Créer un checkClick () Procédé.

   Cette méthode va changer l'état de la cellule appropriée. Il va aussi changer la currentPlayer variable pour que la prochaine clic inscrire pour l'autre joueur.

5. Construire un réseau de cellules.

   
   
   
   
   

   Une fois une seule cellule fait ce que vous voulez, vous pouvez construire un tableau d'entre eux.

Comment configurer la mise en page visuelle

Le placement des cellules sur l'écran est intéressante. Il peut sembler naturel d'utiliser un tableau à deux dimensions pour le conseil tic-tac-toe, mais la structure de boucle imbriquée peut être lourd sur une si petite structure de données, et le traitement de la carte comme un tableau 2D ne fournit pas beaucoup d'avantages. Au lieu de cela, envisager la construction de cette forme d'un tableau à une dimension.

Les cellules sont disposées comme ceci:

4 1 23 0 56 7 8

Essayez divisant toutes les valeurs dans l'image ci-dessus par 3. Vous verrez quelques tendances intéressantes. Chaque valeur dans la première rangée (0, 1, et 2) donner zéro (et quelques autres) lorsque divisé par 3. Chaque élément dans la deuxième rangée (3, 4, et 5) donne 1 reste quelque chose, et chaque élément de la troisième rangée produit un 2 reste quelque chose.

Si vous divisez un de ces numéros par 3 et convertir le résultat en un entier, vous aurez le numéro de ligne. En javascript, vous pouvez utiliser cette ligne de code:

rang = parseInt (i / 3) -

Il ya un autre modèle intéressant si vous regardez les restes. Tous les nombres dans la première colonne (0, 3 et 6) ne sont divisible par 3, ce qui signifie qu'ils ont des restes de 0. Tous les nombres dans la colonne suivante (1, 4, et 7) présentent un reste de 1, et la dernière colonne donne un reste de 2. Le reste de la division par 3 donnera le numéro de colonne.

En javascript, la module opérateur (%) Va produire le reste d'une division entière, de sorte que vous pouvez obtenir le numéro de colonne avec une formule semblable:

col = i 3%

Le code pour créer les cellules utilise ces formules pour extraire le numéro de ligne et de colonne pour chaque cellule, et place ensuite la cellule à l'écran en multipliant ces valeurs par la largeur de la cellule et en ajoutant un décalage.

 buildCells de function () {cellules = new Array (9) -xOffset = 100 = 100 yOffset-for (i = 0 à i lt; cells.length- i ++) {cellules [i] = new cellulaire () - rang = parseInt (i / 3) -col = i% 3-xPos = (col * 100) + xOffset-yPos = (ligne * 100) + yoffset-cellules [i] .setPosition (xPos, YPos) -} // fin boucle for} // des buildCells finaux

Comment vérifier votre jeu pour une combinaison gagnante

L'ordinateur ne comprend pas le concept de trois dans une rangée, et il doit être enseigné.

Jetez un oeil à le fragment de code suivant:

 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)) - 

Le code définit simplement un tableau à deux dimensions. Ce tableau est une liste de toutes les combinaisons gagnantes. Si le même joueur contrôle les cellules 0, 1, et 2, ce joueur a gagné la partie. Chaque ligne représente une combinaison gagnante différente.

Il devient alors facile de vérifier pour un gagnant:

 checkWins de function () {gagnant = 0for (combo = 0- combo lt; winningCombos.length- combo ++) {a = winningCombos [combo] [0] [-b = winningCombos combo] [1] [-c = winningCombos combo] [2] -si (cellules des cellules [a] .state == [b ] .state) {if (cellules [b] .state == cellules [c] .state) {if (cellules [a] .state! = blanc) {gagnant = cellules [a] .state-} // fin si } // fin si} // fin si} // fin forreturn winner-} // checkWins finaux

Comment ajouter une IA

Le type le plus commun de l'intelligence artificielle pour ce genre de problème est appelé un heuristique algorithme. Il est un truc qui permet à l'ordinateur à venir rapidement avec une bonne solution tout en ne garantissant pas une solution parfaite.

La stratégie générale est de construire un tableau de classement de cellules:

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

Le rang de chaque cellule indique le nombre de combinaisons gagnantes qui vont à travers elle, de sorte que la cellule 4 (la cellule centrale) est la cellule la plus précieuse au début du jeu.

Comme le jeu continue, l'ordinateur réévalue la grille selon les calculs simplistes suivantes:

1. Si une cellule est non vide, le rétrograder.

   Les seules cellules que vous devriez considérer sont ceux qui sont vides, donc si une cellule est déjà pris, soustraire 99 de son classement de la cellule.

2. Cherchez des combinaisons gagnantes partiellement remplis.

   Étape à travers chaque combinaison gagnante. Si deux cellules ont la même valeur mais le troisième est blanc, ajouter une valeur à la troisième.

3. Trouvez la cellule la plus élevée.

   Après être passé par toutes les combinaisons, boucle à travers les classements cellulaires pour voir qui est le classement le plus élevé de cellules.