About
Explore
Events & Classes
Support Us
Join
Sign In
usertoy
View Project Page
Run
Fullscreen
OXO | Fork
HTML
CSS
JS
<!DOCTYPE HTML> <html> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> </head> <body> <div> <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> </body> </html>
.row { font-family: "Comic Sans MS"; clear: both; } .row div { padding: 5px; border: 1px solid purple; height: 50px; font-size: 50px; width: 50px; text-align: center; float: left; }
var currentPlayer = "O"; var won = false; function place(box) { if(box.innerText != "" || won) return; box.innerText = currentPlayer; currentPlayer == "O" ? currentPlayer = "X" : currentPlayer = "O"; checkGameBoard(); } function checkGameBoard() { 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(first, second, third) { if(first != "" && first == second && first == third) { alert("Winner!"); won = true; } }