Código-fonte do header.php
:
<!DOCTYPE html>
<html>
<head>
<title>Jogo da velha</title>
</head>
<body>
<center><h1>Jogo da velha</h1></center>
<center>
<div id="box">
<div id="0" class="area"></div><div id="1" class="area"></div><div id="2" class="area"></div>
<div id="3" class="area"></div><div id="4" class="area"></div><div id="5" class="area"></div>
<div id="6" class="area"></div><div id="7" class="area"></div><div id="8" class="area"></div>
</div>
</center>
</body>
</html>
Código-fonte do jogo.php
:
<!DOCTYPE html>
<html>
<head>
<title>Jogo da velha</title>
<style type="text/css">
#box{
width:276px;
height: 276px;
background-color: gray;
}
#box div{
background-color: lightgray;
width: 90px;
height: 90px;
text-align: center;
float: left;
margin: 1px;
}
</style>
</head>
<body>
<?php
include 'header.php';
?>
<center><h2 id="vez_alert">Turno de: <?php echo $_GET["j2_input"]?></h2></center>
<script type="text/javascript">
//global que seta a vez do jogador
var turn = true;
var areasArray = [];
//array correspondente as casas
var area = document.getElementsByClassName('area');
for(var i =0;i<area.length;i++){
area[i].onclick = onAreaClick;
}
//função principal que atua sobre o clique numa determinada area
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");
}
}
function checkWin(){
if (areasArray[0] == true && areasArray[1] == true && areasArray[2] == true||areasArray[3] == true && areasArray[4] == true && areasArray[5] == true||areasArray[6] == true && areasArray[7] == true && areasArray[8] == true||areasArray[0] == true && areasArray[3] == true && areasArray[6] == true||areasArray[1] == true && areasArray[4] == true && areasArray[7] == true||areasArray[2] == true && areasArray[5] == true && areasArray[8] == true||areasArray[0] == true && areasArray[4] == true && areasArray[8] == true) {
return true;
}
if (areasArray[0] == false && areasArray[1] == false && areasArray[2] == false||areasArray[3] == false && areasArray[4] == false && areasArray[5] == false||areasArray[6] == false && areasArray[7] == false && areasArray[8] == false||areasArray[0] == false && areasArray[3] == false && areasArray[6] == false||areasArray[1] == false && areasArray[4] == false && areasArray[7] == false||areasArray[2] == false && areasArray[5] == false && areasArray[8] == false||areasArray[0] == false && areasArray[4] == false && areasArray[8] == false) {
return false;
}
}
function draw(ev){
var clickedArea = document.getElementById(event.target.id);
if (checkTurn()) {
console.log("espaço vazio");
var elem = document.createElement("img");
elem.setAttribute("src", "x.png");
elem.setAttribute("height", "90");
elem.setAttribute("width", "90");
clickedArea.appendChild(elem);
turn= false;
areasArray[ev.target.id] = false;
console.log("Esse espaço agora é: "+areasArray[ev.target.id]);
document.getElementById("vez_alert").innerHTML = "Turno de:"+ <?php echo json_encode($_GET["j1_input"]);?>
}else{
console.log("espaço vazio");
var elem2 = document.createElement("img");
elem2.setAttribute("src", "c.png");
elem2.setAttribute("height", "90");
elem2.setAttribute("width", "90");
clickedArea.appendChild(elem2);
turn= true;
areasArray[ev.target.id] = true;
console.log("Esse espaço agora é: "+areasArray[ev.target.id]);
document.getElementById("vez_alert").innerHTML = "Turno de:"+<?php echo json_encode($_GET["j2_input"]);?>
}
}
function checkTurn(){
if(turn){
return true;//para x
}else {
return false;//para o
}
}
</script>
</body>
</html>
Fiz essa demo de um TicTacToe e gostaria de saber como otimizar ele para implementação de AJAX para poder rodar num servidor com dois hosts jogando ao mesmo tempo. O Jogo estajogo está 100% Local e utiliza arrays de javascript para armazenar os locais utilizados.
Sinto que esse é um jeito errado de se fazer isso ateaté mesmo para single-play.