Skip to content

Instantly share code, notes, and snippets.

@navarr

navarr/tictactoe.php

Created May 10, 2014 21:00
Show Gist options
  • Save navarr/3d326b22c52ae0314a5f to your computer and use it in GitHub Desktop.
Save navarr/3d326b22c52ae0314a5f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
tictactoe.php
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
<!--
A tic tac toe game written in XHTML5 for 314
by Navarr T. Barnier
-->
<head>
<title>Tic-Tac-Toe</title>
<style>
body { text-align: center; background-color: #111111; color: #DDDDDD; font-family: sans-serif; }
button { background-color: #202020; color: #DDDDDD; border: 1px solid black; }
button:hover { cursor: pointer; }
table { border: 1px solid black; border-collapse: collapse; display: inline-block; }
td { border: 1px solid black; width: 200px; height: 200px; font-family: sans-serif; font-size: 150px; }
td[data-occupied=0] { cursor: pointer; }
pre { display: inline; }
</style>
<script>
<!--
function resetBoard()
{
document.availableSpaces =
[
[0,0],
[0,1],
[0,2],
[1,0],
[1,1],
[1,2],
[2,0],
[2,1],
[2,2]
];
document.spaces =
[
[null,null,null],
[null,null,null],
[null,null,null]
];
spaces = document.getElementsByTagName("td");
for(var i = 0;i < spaces.length;i++)
{
space = spaces[i];
space.setAttribute("data-occupied","0");
space.innerHTML = "";
}
}
function runDocumentReady()
{
resetBoard();
var spaces = document.getElementsByTagName("td");
for(var i = 0;i < spaces.length;i++)
{
spaces[i].onclick = function()
{
if(this.getAttribute("data-occupied") == "0")
playerMove(this.getAttribute("data-column"),this.getAttribute("data-row"));
}
}
}
function playerMove(column,row)
{
removeAvailableSpace(column,row);
document.getElementById("space-" + column + "-" + row).innerHTML = "X";
document.getElementById("space-" + column + "-" + row).setAttribute("data-occupied","1");
document.spaces[column][row] = true;
if(!checkWin())
aiMove();
}
function aiMove()
{
var max = document.availableSpaces.length;
var picked = Math.floor((Math.random()*1000))%max;
var place = document.availableSpaces[picked];
removeAvailableSpace(place[0],place[1]);
document.spaces[place[0]][place[1]] = false;
document.getElementById("space-" + place[0] + "-" + place[1]).innerHTML = "O";
document.getElementById("space-" + place[0] + "-" + place[1]).setAttribute("data-occupied","1");
checkWin();
}
function removeAvailableSpace(column,row)
{
for(var i = 0;i < document.availableSpaces.length;i++)
{
if(
document.availableSpaces[i][0] == column
&&
document.availableSpaces[i][1] == row
)
{
document.availableSpaces.splice(i,1);
}
}
}
function checkWin()
{
// Sideways & Column
var columnsCount = [0,0,0];
var rowCount = [0,0,0];
for(var i = 0;i < document.spaces.length;i++)
{
for(var j = 0;j < document.spaces[i].length;j++)
{
if(document.spaces[i][j] === true)
{
columnsCount[i]++;
rowCount[j]++;
}
else if(document.spaces[i][j] === false)
{
columnsCount[i]--;
rowCount[j]--;
}
}
}
for(var i = 0;i < columnsCount.length;i++)
{
if(columnsCount[i] == 3)
return runWin(true);
else if(columnsCount[i] == -3)
return runWin(false);
}
for(var i = 0;i < rowCount.length;i++)
{
if(rowCount[i] == 3)
return runWin(true);
else if(rowCount[i] == -3)
return runWin(false);
}
// Diagonals
if((
document.spaces[0][0] == document.spaces[1][1]
&&
document.spaces[0][0] == document.spaces[2][2]
) || (
document.spaces[0][2] == document.spaces[1][1]
&&
document.spaces[0][2] == document.spaces[2][0]
))
if(document.spaces[1][1] !== null)
return runWin(document.spaces[1][1]);
if(document.availableSpaces.length == 0)
{
runCat();
return true;
}
return false;
}
function runWin(theBool)
{
closeBoard();
if(theBool == true)
{
document.getElementById("winCount").innerHTML = parseInt(document.getElementById("winCount").innerHTML)+1;
alert("You Won!");
}
else
{
document.getElementById("loseCount").innerHTML = parseInt(document.getElementById("loseCount").innerHTML)+1;
alert("The Computer Won...");
}
return true;
}
function runCat()
{
closeBoard();
document.getElementById("tieCount").innerHTML = parseInt(document.getElementById("tieCount").innerHTML)+1;
alert("You managed to Tie!");
}
function closeBoard()
{
var spaces = document.getElementsByTagName("td");
for(var i = 0;i < spaces.length;i++)
{
spaces[i].setAttribute("data-occupied","1");
}
}
-->
</script>
</head>
<body>
<h1>Tic-Tac-Toe</h1>
<table>
<?php for($i = 0;$i < 3;$i++): ?>
<tr>
<?php for($j = 0;$j < 3;$j++): ?>
<td id="space-<?= $j ?>-<?= $i ?>" data-row="<?= $i ?>" data-column="<?= $j ?>" data-occupied="0"></td>
<?php endfor; ?>
</tr>
<?php endfor; ?>
</table>
<br />
<button onclick="resetBoard();">Reset Game</button>
<h2>Statistics</h2>
<div style="display:inline-block;text-align:left;">
<ul>
<li><pre>Wins: <span id="winCount">0</span></pre></li>
<li><pre>Ties: <span id="tieCount">0</span></pre></li>
<li><pre>Losses: <span id="loseCount">0</span></pre></li>
</ul>
</div>
<script>runDocumentReady();</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment