O seu código tem um monte de problemas.
Estrutura do documento
O primeiro problema está nisso:
<?php
include 'header.php';
?>
Isso daí vai copiar e colar o header.php
inteiro nesse lugar. Ocorre que esse header.php
contém um HTML inteiro, e isso vai ser colocado dentro de um outro HTML. O resultado será um HTML inválido, pois vai ficar assim:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>
...
</body>
</html>
Observe que você acaba tendo dois conjuntos de tags <html>...</html>
, dois <head>...</head>
e dois <body>...</body>
. A solução mais simples para isso ao meu ver seria colocar tudo no jogo.php
, eliminar o header.php
e retirar as tags indevidamente repetidas.
Lógica booleana
Depois, vejo que você tem problemas de entender lógica. Por exemplo:
function checkTurn(){
if(turn){
return true;//para x
}else {
return false;//para o
}
}
Tudo isso pode ser reduzido para isso:
function checkTurn() {
return turn;
}
Ou então, reduzir o lugares onde você chama a função checkTurn()
no draw(ev)
para apenas usar a variável turn
diretamente.
E devo te dizer que quase nunca é certo usar == true
ou == false
. Essa prática é um vício, não faça isso. O motivo é que, se x
é uma variável que só pode ser true
ou false
, então x == true
é exatamente o mesmo que apenas x
e x == false
é exatamente o mesmo que !x
. Assim sendo, o == true
é completamente inútil e o == false
completamente dispensável.
Reescrevendo a função checkWin()
Entretanto, nem vou aplicar a otimização acima na sua função checkWin()
porque o melhor é refazê-la por completo. Vamos considerar que ela é usada aqui:
function onAreaClick(event) {
var winner;
draw(event);
console.log(turn);
winner = checkWin();
if (winner == true) {
alert("jogador 1 ganhou");
}else if (winner==false){
alert("jogador 2 ganhou");
}
}
Observe que se a função checkWin
fosse de alguma forma diferente, poderíamos fazer assim:
function onAreaClick(event) {
draw(event);
console.log(turn);
if (checkWin(true)) {
alert("jogador 1 ganhou");
} else if (checkWin(false)) {
alert("jogador 2 ganhou");
}
}
E é baseado nisso que vou refazê-la:
var sequencias = [[0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6]];
function checkWin(player) {
externo:
for (var i = 0; i < sequencias.length; i++) {
var sequencia = sequencias[i];
for (var j = 0; j < sequencia.length; j++) {
if (areasArray["" + linha[j]] !== player) continue externo;
}
return true;
}
return false;
}
Observe o continue externo
. Isso daí usa uma característica da linguagem javascript (que ela pegou emprestada do Java) que é pouco conhecida. Trata-se do labeled continue.
Observe também a variável sequencias
. Ela é um array de arrays que define quais são as posições que marcam as vitórias.
Revisando a função draw(ev)
Na sua função event
, o que está dentro do if
é muito parecido com o que está dentro do else
. Assim sendo, o melhor é tentar unificá-las assim:
var j1 = <?php echo json_encode($_GET["j1_input"]);?>;
var j2 = <?php echo json_encode($_GET["j2_input"]);?>;
function draw(ev) {
var clickedArea = document.getElementById(event.target.id);
var elem = document.createElement("img");
elem.setAttribute("src", turn ? "x.png" : "c.png");
elem.setAttribute("height", "90");
elem.setAttribute("width", "90");
clickedArea.appendChild(elem);
areasArray[ev.target.id] = turn;
console.log("Esse espaço agora é: " + turn);
turn = !turn;
document.getElementById("vez_alert").innerHTML = "Turno de:" + turn ? j1 : j2;
}
Observe que mudei também a ordem de algumas instruções para facilitar as coisas para aproveitar a variável turn
o máximo possível.
Objetos para cada jogador
Você usa true
para representar o jogador 1 e false
para representar o jogador 2. Isso não é algo muito legal e fica confuso. Por isso, vou definir o seguinte:
var JOGADOR_X = {
img: "x.png",
nome: "X",
input = <?php echo json_encode($_GET["j1_input"]);?>
};
var JOGADOR_O = {
img: "c.png",
nome: "O",
input = <?php echo json_encode($_GET["j2_input"]);?>
};
var VAZIO = {};
JOGADOR_X.adversario = JOGADOR_O;
JOGADOR_O.adversario = JOGADOR_X;
Isso daí define três objetos diferentes para representar cada jogador e também o vazio. E também define algumas propriedades que vou usar no draw(ex)
mais abaixo. Dessa forma onde você tem isso:
if (checkWin(true)) {
alert("jogador 1 ganhou");
} else if (checkWin(false)) {
alert("jogador 2 ganhou");
}
Fica isso:
if (checkWin(JOGADOR_X)) {
alert("jogador X ganhou");
} else if (checkWin(JOGADOR_O)) {
alert("jogador O ganhou");
}
Ou melhor ainda:
if (checkWin(turn)) {
alert("jogador " + turn.nome + " ganhou.");
}
Isso daqui:
var turn = true;
var areasArray = [];
var area = document.getElementsByClassName('area');
for(var i =0;i<area.length;i++){
area[i].onclick = onAreaClick;
}
Fica assim:
var turn = JOGADOR_X;
var areasJogo = {};
var areas = document.getElementsByClassName("area");
for (var i = 0; i < areas.length; i++) {
areas[i].onclick = onAreaClick;
areasJogo[areas[i].id] = VAZIO;
}
document.getElementById("vez_alert").innerHTML = "Turno de: " + turn.input;
Note que mudei areasArray
para areasJogo
, vez que não é mais um array. Mudei também area
para areas
, uma vez que é um array. Com esse código inicializando o vez_alert
no javascript, não precisamos mais preenchê-lo no HTML com o PHP, então podemos esvaziá-lo:
<h2 id="vez_alert"></h2>
E vou juntar as funções onAreaClick(ev)
e draw(ev)
em uma só e fazer as mudanças necessárias acerca dos jogadores:
function onAreaClick(ev) {
console.log(turn);
var clickedArea = document.getElementById(event.target.id);
var elem = document.createElement("img");
elem.setAttribute("src", turn.img);
elem.setAttribute("height", "90");
elem.setAttribute("width", "90");
clickedArea.appendChild(elem);
areasJogo[ev.target.id] = turn;
console.log("Esse espaço agora é: " + turn.nome);
if (checkWin(turn)) {
alert("jogador " + turn.nome + " ganhou.");
}
turn = turn.adversario;
document.getElementById("vez_alert").innerHTML = "Turno de: " + turn.input;
}
E as variáveis j1
e j2
que eu introduzi antes, podem ser eliminadas.
A tag <center>
Por fim, não use a tag <center>
se você quiser escrever HTML5. Essa tag é obsoleta há muito tempo, desde o HTML 4 que saiu em 1997 para ser exato. Ou seja, essa tag é obsoleta há 20 anos, e ela não faz parte do HTML5. Os navegadores ainda aceitam a tag <center>
apenas para serem compatíveis com páginas antigas. Assim sendo, use CSS no lugar disso. A propriedade CSS text-align: center;
deve ser o que você quer:
body {
text-align: center;
}
#box {
// ...
display: inline-block;
}
Corrigindo bugs
Arrumados estes problemas do código, podemos partir para implementar coisas novas a fim de arrumar os seguintes bugs:
Se você clicar em uma área já preenchida, ele irá preenchê-la novamente e passar a vez. Apenas cliques em áreas não preenchidas devem ocorrer.
O jogo não detecta o empate.
É possível continuar jogando após um jogador já ter ganho.
Usar alert
é algo um tanto irritante.
Assim sendo, alterar mais uma vez a função onAreaClick(ev)
para resolver esses itens:
function temEspacoVazio() {
for (var i in areasJogo) {
if (areasJogo[i] === VAZIO) return true;
}
return false;
}
function acabou() {
return checkWin(JOGADOR_X) || checkWin(JOGADOR_O) || !temEspacoVazio();
}
function onAreaClick(ev) {
if (acabou() || areasJogo[ev.target.id] !== VAZIO) return;
console.log(turn);
var clickedArea = document.getElementById(event.target.id);
var elem = document.createElement("img");
elem.setAttribute("src", turn.img);
elem.setAttribute("height", "90");
elem.setAttribute("width", "90");
clickedArea.appendChild(elem);
areasJogo[ev.target.id] = turn;
console.log("Esse espaço agora é: " + turn.nome);
var novoTexto;
if (checkWin(turn)) {
novoTexto = "Jogador " + turn.nome + " ganhou.";
} else if (!temEspacoVazio()) {
novoTexto = "Empatou. Deu velha...";
} else {
turn = turn.adversario;
novoTexto = "Turno de: " + turn.input;
}
document.getElementById("vez_alert").innerHTML = novoTexto;
}
Ficando livre dos ids das áreas
Podemos argumentar que usar "0"
, "1"
, "2"
, "3"
, etc. para controlar os ids é algo meio chato. Além disso, ter que ficar sabendo que a posição 0 é o canto superior esquerdo, a 1 a lateral superior, a 4 o centro, a 7 a lateral inferior, etc. também é algo meio chato. Entretanto, do jeito que o código está ficando, todo id de alguma posição do tabuleiro é quase sempre retirado do próprio tabuleiro. Se nós sempre lermos os ids do tabuleiro antes de usá-lo sem que eles estejam diretamente no javascript, eles poderão ser qualquer coisa.
Só há um lugar onde os ids estão fixos no javascript, que é na função checkWin(player)
. Vamos reescrevê-la de uma forma parecida com a anterior, mas agora usando classes HTML:
var sequencias = ["linha-superior", "linha-central", "linha-inferior", "coluna-esquerda", "coluna-central", "coluna-direita", "diagonal-principal", "diagonal-secundaria"];
function checkWin(player) {
externo:
for (var i = 0; i < sequencias.length; i++) {
var sequencia = sequencias[i];
var elementos = document.getElementsByClassName(sequencia);
for (var j = 0; j < elementos.length; j++) {
if (areasJogo[elementos[j].id] !== player) continue externo;
}
return true;
}
return false;
}
E o HTML:
<div id="box">
<div id="canto-superior-esquerdo" class="area coluna-esquerda linha-superior diagonal-principal"></div>
<div id="lateral-superior" class="area coluna-central linha-superior"></div>
<div id="canto-superior-direito" class="area coluna-direita linha-superior diagonal-secundaria"></div>
<div id="lateral-esquerda" class="area coluna-esquerda linha-central"></div>
<div id="centro" class="area coluna-central linha-central diagonal-principal diagonal-secundaria"></div>
<div id="lateral-direita" class="area coluna-direita linha-central"></div>
<div id="canto-inferior-esquerdo" class="area coluna-esquerda linha-inferior diagonal-secundaria"></div>
<div id="lateral-inferior" class="area coluna-central linha-inferior"></div>
<div id="canto-inferior-direito" class="area coluna-direita linha-inferior diagonal-principal"></div>
</div>
Reiniciando o jogo
O fato de não dar para reiniciar o jogo após o término é um tanto chato. Para resolver isso, vamos acrescentar um botão de reiniciar:
<button id="reiniciar">Reiniciar</button>
Para acrescentar essa nova função:
function novoJogo() {
for (var i in areasJogo) {
if (areasJogo[i] === VAZIO) continue;
var elem = document.getElementById(i);
var img = elem.childNodes[0];
elem.removeChild(img);
areasJogo[i] = VAZIO;
}
turn = JOGADOR_X;
document.getElementById("vez_alert").innerHTML = "Turno de: " + turn.input;
}
E fazemos isso na inicialização:
document.getElementById("reiniciar").onclick = novoJogo;
O resultado final para um jogo local
Abaixo o seu código completo. Pode clicar no botão azul "► Executar" lá em baixo para vê-lo funcionando. Os únicos detalhes é que:
Eu substitui o <?php echo json_encode($_GET["j1_input"]);?>
por "C3PO" e "R2D2" porque aqui no StackOverflow não tem como rodar PHP na resposta, mas no fundo você pode colocar qualquer JSON que você quiser, inclusive por meio do PHP.
Tive que colocar as URLs das imagens completas lá do seu github porque elas estão hospedadas em um site diferente de onde eu as exibo no HTML. No seu site você pode usar simplesmente "x.png"
e "c.png"
como você já fazia.
var JOGADOR_X = {
img: "https://github.com/jvpessoa10/TicTacToe/blob/master/x.png?raw=true",
nome: "X",
input: "C3PO" //<?php echo json_encode($_GET["j1_input"]);?>
};
var JOGADOR_O = {
img: "https://github.com/jvpessoa10/TicTacToe/blob/master/c.png?raw=true",
nome: "O",
input: "R2D2" // <?php echo json_encode($_GET["j2_input"]);?>
};
var VAZIO = {};
JOGADOR_X.adversario = JOGADOR_O;
JOGADOR_O.adversario = JOGADOR_X;
var turn = JOGADOR_X;
var areasJogo = {};
var areas = document.getElementsByClassName("area");
for (var i = 0; i < areas.length; i++) {
areas[i].onclick = onAreaClick;
areasJogo[areas[i].id] = VAZIO;
}
document.getElementById("vez_alert").innerHTML = "Turno de: " + turn.input;
document.getElementById("reiniciar").onclick = novoJogo;
var sequencias = ["linha-superior", "linha-central", "linha-inferior", "coluna-esquerda", "coluna-central", "coluna-direita", "diagonal-principal", "diagonal-secundaria"];
function onAreaClick(event) {
draw(event);
console.log(turn);
if (checkWin(turn)) {
alert("jogador " + turn.nome + " ganhou.");
}
}
function checkWin(player) {
externo:
for (var i = 0; i < sequencias.length; i++) {
var sequencia = sequencias[i];
var elementos = document.getElementsByClassName(sequencia);
for (var j = 0; j < elementos.length; j++) {
if (areasJogo[elementos[j].id] !== player) continue externo;
}
return true;
}
return false;
}
function temEspacoVazio() {
for (var i in areasJogo) {
console.log("vazio: " + i);
if (areasJogo[i] === VAZIO) return true;
}
return false;
}
function acabou() {
return checkWin(JOGADOR_X) || checkWin(JOGADOR_O) || !temEspacoVazio();
}
function onAreaClick(ev) {
if (acabou() || areasJogo[ev.target.id] !== VAZIO) return;
console.log(turn);
var clickedArea = document.getElementById(event.target.id);
console.log("espaço vazio");
var elem = document.createElement("img");
elem.setAttribute("src", turn.img);
elem.setAttribute("height", "90");
elem.setAttribute("width", "90");
clickedArea.appendChild(elem);
areasJogo[ev.target.id] = turn;
console.log("Esse espaço agora é: " + turn.nome);
var novoTexto;
if (checkWin(turn)) {
novoTexto = "Jogador " + turn.nome + " ganhou.";
} else if (!temEspacoVazio()) {
novoTexto = "Empatou. Deu velha...";
} else {
turn = turn.adversario;
novoTexto = "Turno de: " + turn.input;
}
document.getElementById("vez_alert").innerHTML = novoTexto;
}
function novoJogo() {
for (var i in areasJogo) {
if (areasJogo[i] === VAZIO) continue;
var elem = document.getElementById(i);
var img = elem.childNodes[0];
elem.removeChild(img);
areasJogo[i] = VAZIO;
}
turn = JOGADOR_X;
document.getElementById("vez_alert").innerHTML = "Turno de: " + turn.input;
}
body {
text-align: center;
}
#box {
width: 276px;
height: 276px;
background-color: gray;
display: inline-block;
}
#box div {
background-color: lightgray;
width: 90px;
height: 90px;
text-align: center;
float: left;
margin: 1px;
}
<!DOCTYPE html>
<html>
<head>
<title>Jogo da velha</title>
</head>
<body>
<h1>Jogo da velha</h1>
<div id="box">
<div id="canto-superior-esquerdo" class="area coluna-esquerda linha-superior diagonal-principal"></div>
<div id="lateral-superior" class="area coluna-central linha-superior"></div>
<div id="canto-superior-direito" class="area coluna-direita linha-superior diagonal-secundaria"></div>
<div id="lateral-esquerda" class="area coluna-esquerda linha-central"></div>
<div id="centro" class="area coluna-central linha-central diagonal-principal diagonal-secundaria"></div>
<div id="lateral-direita" class="area coluna-direita linha-central"></div>
<div id="canto-inferior-esquerdo" class="area coluna-esquerda linha-inferior diagonal-secundaria"></div>
<div id="lateral-inferior" class="area coluna-central linha-inferior"></div>
<div id="canto-inferior-direito" class="area coluna-direita linha-inferior diagonal-principal"></div>
</div>
<h2 id="vez_alert"></h2>
<button id="reiniciar">Reiniciar</button>
</body>
</html>
Colocando o AJAX
Agora que o seu jogo já funciona muito bem localmente para dois jogadores sentados lado a lado na frente do mesmo PC, é hora de fazer o jogo ser via internet.
Primeiro, vamos supor que na sua página "jogo.php", você tenha um parâmetro da requisição chamado "jogador
", que pode ser "X
" ou "O
". Ou seja, o jogador acessa como jogo.php?jogador=O
ou jogo.php?jogador=X
. No javascript, você põe isso:
var jogadores = {
"?jogador=X": JOGADOR_X,
"?jogador=O": JOGADOR_O,
};
var eu = jogadores[location.search] || VAZIO;
Isso daí servirá para identificar quem é o jogador. Se o usuário entrar sem colocar ?jogador=X
ou ?jogador=O
na URL, ele poderá assistir ao jogo como um telespectador. Para poder enviar e receber jogadas via AJAX (com jQuery), crie essas duas funções:
function enviar(localEscolhido) {
$.ajax({
url: "/fazer-jogada.php",
method: "POST",
dataType: "json"
data: {
"quem": eu.nome,
"onde": localEscolhido
}
}).fail(function(jqXHR, textStatus, errorThrown) {
// Tratar o erro...
});
}
var dicionario = {
"X": JOGADOR_X,
"O": JOGADOR_O,
" ": VAZIO
};
function atualizar() {
$.ajax({
url: "/estado-jogo.php",
cache: false,
dataType: "json"
}).done(function(json) {
for (var i in areasJogo) {
areasJogo[i] = dicionario[json[i]];
}
turn = dicionario[json.turn];
setTimeout(atualizar, 1000);
}).fail(function(jqXHR, textStatus, errorThrown) {
// Tratar o erro...
});
}
atualizar();
A função enviar
irá enviar ids
tais como canto-superior-direito
, borda-esquerda
, centro
ou reiniciar
. Se quiser pode fazer ele funcionar de alguma forma diferente. Já a função atualizar fica insistindo em atualizar com o setTimeout
para sempre.
No lado do PHP, você mantém um array associativo com cada posição do jogo (tal como aceito no enviar
) e também com um campo turn
. Cada um desses campos pode ter os valores "X"
, "O"
ou " "
. O estado-jogo.php
deve trazer esse array associativo em formato JSON. O fazer-jogada.php
é responsável por alterar esse array associativo, recebendo um JSON, e deve verificar se o campo "quem"
é o jogador que tem a vez, se o "onde"
é um local em branco para jogar e também se o jogo já não terminou. Além disso, o fazer-jogada.php
deve aceitar o texto reiniciar
dentro do "localEscolhido"
.
A função atualizar()
já funciona sozinha sem necessitar de alterações no restante do código. Entretanto, para que a função enviar()
seja usada, algumas alterações são necessárias. Assim sendo, na função onAreaClick(ev)
, troque isso:
if (acabou() || areasJogo[ev.target.id] !== VAZIO) return;
Por isso:
if (acabou() || areasJogo[ev.target.id] !== VAZIO || turn !== eu) return;
E logo depois disso:
areasJogo[ev.target.id] = turn;
Acrescente isso:
enviar(ev.target.id);
No final da função novoJogo()
, acrescente isso:
enviar("reiniciar");
Aspectos adicionais a considerar
Você pode argumentar que qualquer um que entrar com a URL jogo.php?jogador=X
ou jogo.php?jogador=O
poderá fazer a jogada, mesmo se ele não for o jogador correspondente. A solução para isso é desenvolver uma funcionalidade de login e senha e enviar um token de autenticação junto com JSON na função enviar()
. Tudo isso deve ser validado no fazer-jogada.php
. Os detalhes de como fazer isso já fogem do escopo dessa pergunta, mas você poderá encontrar isso aqui no SOpt mesmo, seja em alguma outra pergunta já feita ou seja você mesmo perguntando esse aspecto específico.
Também só há um único jogo em andamento no servidor, e isso não é algo muito desejável. Para resolver isso, cada jogo teria um nome ou número e esse nome ou número seria enviado junto com os demais dados nas funções atualizar()
e enviar()
. O JSON retornado pelo estado-jogo.php
e manipulado pelo fazer-jogada.php
teria que deixar de ser global e ao invés disso ser algo que seria encontrado no banco de dados ou então em um array associativo na memória, usando para localizá-lo o jogo correspondente, o nome ou número do mesmo.
Por fim, o AJAX que postei acima não trata erros. Para tratar erros, você adicionará algum tipo de código onde tem os comentários // Tratar o erro...
. Mais detalhes pode ser visto na documentação sobre AJAX do jQuery.