Here is the code to make Noughts and Crosses (it will be explained in later blogs):
<!DOCTYPE html>
<html>
<head>
<style>
#board {
background-color: red;
color: indigo;
font-size: 65pt;
text-align: center;
height: 330px;
width: 330px;
border: 5px solid indigo;
}
.row {
clear: both;
}
.row div {
height: 100px;
width: 100px;
border: 5px solid indigo;
float: left;
}
</style>
<title>Noughts and Crosses</title>
</head>
<body>
<div id=”board” onclick=”checkBoard()”>
<div class=”row”>
<div id=”0_0″ onclick=”place(this)”></div>
<div id=”1_0″ onclick=”place(this)”></div>
<div id=”2_0″ onclick=”place(this)”></div>
</div>
<div class=”row”>
<div id=”0_1″ onclick=”place(this)”></div>
<div id=”1_1″ onclick=”place(this)”></div>
<div id=”2_1″ onclick=”place(this)”></div>
</div>
<div class=”row”>
<div id=”0_2″ onclick=”place(this)”></div>
<div id=”1_2″ onclick=”place(this)”></div>
<div id=”2_2″ onclick=”place(this)”></div>
</div>
</div>
<script>
var currentPlayer = “X”;
var won = false;
function checkBoard() {
if(won) return;
for(var i = 0; i <= 2; i++) {
checkWinner(document.getElementById(“0_” + i).innerText, document.getElementById(“1_” + i).innerText, document.getElementById(“2_” + i).innerText);
checkWinner(document.getElementById(i + “_0”).innerText, document.getElementById(i + “_1”).innerText, document.getElementById(i + “_2”).innerText);
}
checkWinner(document.getElementById(“0_0”).innerText, document.getElementById(“1_1”).innerText, document.getElementById(“2_2”).innerText);
checkWinner(document.getElementById(“0_2”).innerText, document.getElementById(“1_1”).innerText, document.getElementById(“2_0”).innerText);
}
function checkWinner(one, two, three) {
if(won) return;
if(!won && one != “” && one == two && one == three) {
won = true;
alert(one + ” wins!”);
}
}
function place(box) {
if(won || box.innerText != “”) return;
box.innerText = currentPlayer;
currentPlayer = currentPlayer == “X” ? “O” : “X”;
}
</script>
</body>
</html>
