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 uma 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. Ela tem três estados (X, O, e em branco). Clicando sobre a célula muda o estado interno e (claro) a representação visual do estado.

O objeto de célula é simplesmente uma subclasse do Sprite:

função celular () {células T = new Sprite (jogo, "blank.jpg", 100, 100) -tCell.setSpeed ​​(0) -tCell.state = EM BRANCO-tCell.images = new Array ("blank.jpg", "X.jpg", "O.jpg") -tCell.checkClick = função () {if (this.isClicked ()) {if (this.state == branco) {this.state = currentPlayer-this.setImage (this.images [currentPlayer]) - // mudança o playerif (currentPlayer == X) {currentPlayer = O-} else {currentPlayer = X} // final se} // final se} // final se} // final checkClickreturn tCell-} // célula extremidade

Veja como o célula código funciona:

1. Crie um currentPlayer variável.

   Esta variável contém o valor correspondente ao leitor atual. A variável jogador corrente vai rodar 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 as imagens que correspondem a vários estados.

4. Crie um checkClick () método.

   Video: Tic Tac Toe #1 - HTML5 Game Programming Tutorial [javascript]

   Este método irá alterar o estado da célula de forma adequada. Ele também irá alterar a currentPlayer variável para o próximo clique irá registrar 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 um conjunto deles.

Como configurar o layout visual

A colocação das células na tela é interessante. Pode parecer natural para utilizar uma matriz de duas dimensões para a placa de tic-tac-dedo do pé, mas a estrutura de loop aninhada pode ser complicado em uma tal estrutura de dados pequeno, e o tratamento da placa 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 da seguinte forma:

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 a 2 restante algo.

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:

fileira = parselnt (i / 3) -

Há um outro padrão interessante se você olhar para os restos. Todos os números da primeira coluna (0, 3, e 6) são 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 restante da divis por 3 dará o número da coluna.

Video: Draw & onclick - Tic Tac Toe javascript & HTML5 Canvas Game Development Tutorial 2

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 a criação das células utiliza 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 esses valores pela largura da célula e a adição de um deslocamento.

 buildCells function () {células = new Array (9) -xOffset = 100-yOffset = 100 para (i = 0- i lt; cells.length- i ++) {células [i] = new celular () - fileira = parselnt (i / 3) = col i% 3-xPos = (col * 100) + xOffset-yPos = (linha * 100) + yOffset-células [i] .setPosition (xPos, ypos) -} // finais 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] -if (células [a] .state == células [b ] .state) {if (células [b] .state == células [c] .state) {if (células [a] .state! = eM BRANCO) {vencedor = culas [um] .state-} // final se } // fim do 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 classificação 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, assim célula 4 (a célula centro) é a célula mais valioso no início do jogo.

À medida que 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 sua classificação celular.

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

   Video: Tic Tac Toe in javascript - part 1

   Passo através de cada combinação vencedora. Se quaisquer duas células têm o mesmo valor, mas o terceiro está em branco, adicione um valor para a terceira.

3. Encontrar o maior celular.

   Depois de passar por todas as combinações, percorrer os rankings celulares para ver qual é o ranking célula maior.