Como criar Tic-Tac-Toe em seu jogo HTML5

Este jogo parece ser uma adição muito simples para o seu jogo HTML5, mas pode ser surpreendentemente difícil de implementar também. Há três aspectos principais para o tic-tac-dedo do pé que você vai precisar: a interface visual e de dados, determinar um vencedor e construir um AI.

Criar o tabuleiro de jogo

A melhor maneira de gerenciar a interface do usuário é construir um mecanismo baseado em azulejo simplista. A chave para o jogo tic-tac-toe é um sprite especial chamado célula. Cada célula representa um espaço na placa. Ele tem três estados (X, O, e em branco). Ao clicar sobre a célula muda o estado interno e (é claro) a representação visual do estado.

O objecto da célula é simplesmente uma subclasse de o sprite:

função celular () {tCell = new Sprite (jogo ", blank.png", 100, 100) -tCell.setSpeed ​​(0) -tCell.state = BRANCO-tCell.images = new Array ( "blank.png", " X.png "," O.png ") - tCell.checkClick = function () {if (this.isClicked ()) {if (this.state == EM BRANCO) {this.state = currentPlayer-this.setImage (isto .images [currentPlayer]) - // alterar a playerif (currentPlayer == X) {currentPlayer = O-} else {currentPlayer = X} // fim do if} // fim do if} // fim do if} // fim checkClickreturn tCell-} // célula final

Veja como o célula código funciona:

1. Crie um currentPlayer variável.

   Esta variável contém o valor correspondente para o jogador corrente. A variável atual jogador irá girar entre X e O.

2. Atribuir constantes para os estados.

   Os três estados são constantes inteiras.

3. Criar uma matriz de imagens.

   Atribuir imagens que correspondam aos vários estados.

4. Crie um checkClick () método.

   Este método irá alterar o estado da célula de forma adequada. É também irá alterar o currentPlayer variável para o próximo clique irá se inscrever para o outro jogador.

5. Construir uma matriz de células.

   Uma vez que uma única célula faz o que quiser, você pode construir uma matriz deles.

Como configurar o layout visual

A colocação das células na tela é interessante. Pode parecer natural usar uma matriz bidimensional para a placa de tic-tac-dedo do pé, mas a estrutura de loop aninhado pode ser complicado em tal estrutura de dados pequeno, e tratando a bordo como uma matriz 2D não fornece muitos benefícios. Em vez disso, considere a construção isso como um vetor de dimensão única.

As células são dispostas assim:

0 1 23 56 4 7 8

Tente dividir todos os valores na imagem acima por 3. Você verá alguns padrões interessantes. Cada valor na primeira fileira (0, 1, e 2) produzir zero (e alguns restante) quando dividido por 3. Cada elemento na segunda linha (3, 4, e 5) dá um resto algo, e cada elemento do terceira linha produz um 2 restante alguma coisa.

Se você dividir qualquer um desses números por 3 e converter o resultado em um número inteiro, você vai ter o número da linha. Em javascript, você pode usar esta linha de código:

linha = parseInt (i / 3) -

Há um outro padrão interessante se você olhar para os remanescentes. Todos os números da primeira coluna (0, 3 e 6) é divisível por três, o que significa que tem restos de 0. Todos os números na coluna seguinte (1, 4, e 7) tem um resto de 1, e a última coluna produz um resto de 2. o resto da divisão por 3 dará o número da coluna.

Em javascript, o módulo operador (%) Irá produzir o restante de uma divisão inteira, assim você pode obter o número da coluna com uma fórmula semelhante:

col = i% 3

O código para criar as células usa estas fórmulas para extrair o número de linha e coluna para cada célula, e em seguida coloca a célula na tela multiplicando estes valores por a largura da célula e a adição de um deslocamento.

 buildCells function () {células = new Array (9) -xOffset = 100-yOffset = 100-for (i = 0- i lt; cells.length- i ++) {células [i] = new celular () - linha = parseInt (i / 3) col = i% 3-xPos = (col * 100) + xOffset-yPos = (linha * 100) + yOffset células-[i] .setPosition (xPos, yPos) -} // fim do loop} // buildCells finais

Como verificar o seu jogo para uma combinação vencedora

O computador não entender o conceito de três em uma fileira, e ele precisa ser ensinado.

Dê uma olhada no seguinte fragmento de código:

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

O código simplesmente configura uma matriz bidimensional. Esta matriz é uma lista de todas as combinações vencedoras. Se o mesmo jogador controla células 0, 1 e 2, que o jogador ganhou o jogo. Cada linha representa uma combinação vencedora diferente.

Ela então se torna fácil para verificar se há um vencedor:

 checkWins function () {vencedor = 0for (combo = 0- combinação lt; winningCombos.length- combinação ++) {a = winningCombos [combinação] [0] = -b winningCombos [combinação] [1] -c = winningCombos [combinação] [2] -em (células [a] .state == células [b ] .state) {if (células [b] .state == células [c] .state) {if (células [a] .state! = branco) {vencedor = células [a] .state-} // end if } // end if} // fim do if} // fim forreturn winner-} // checkWins finais

Como adicionar um AI

O tipo mais comum de inteligência artificial para este tipo de problema é chamado de heuristica algoritmo. É um truque que permite que o computador para rapidamente chegar a uma boa solução, embora não garantindo uma solução perfeita.

A estratégia geral é a construção de uma matriz de rankings de células:

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

A classificação de cada célula indica o número de combinações vencedoras que passam por ele, então celular 4 (a célula centro) é a célula mais valioso no início do jogo.

Conforme o jogo avança, o computador reavalia a grade de acordo com os seguintes cálculos simplistas:

1. Se qualquer célula é não vazia, rebaixá-lo.

   As únicas células que você deve considerar são aqueles que estão em branco, por isso, se uma célula já está tomada, subtrair 99 a partir de seu ranking celular.

2. Procure por combinações vencedoras parcialmente concluídos.

   Passar por cada combinação vencedora. Se quaisquer duas células têm o mesmo valor, mas o terceiro é em branco, adicionar um valor para a terceira.

3. Encontrar o maior celular.

   Depois de passar por todas as combinações, percorrer os rankings de células para ver qual é o ranking mais alto de células.