In this assignment you will create a tic-tac-toe game will Javascript. Use a 3 x
ID: 3547287 • Letter: I
Question
In this assignment you will create a tic-tac-toe game will Javascript. Use a 3 x 3 table of buttons for the squares, a disabled button element to keep track of the current player (X or O), and a Reset button to reset the board.
this is my code so far...
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Tic Tac Toe!</title>
<style>
input {height: 50px; width: 50px; font-size: 40px; text-align:center;}
#reset {height: 50px; width: 160px;}
</style>
<script type="text/javascript">
function move(square) {
//if square is blank
// set its value to the value of turn
document.getElementById(square).value = document.getElementById("turn").value;
if(document.getElementById("turn").value == "O")
{
document.getElementById("turn").value = "X";
}
else {
document.getElementById("turn").value = "O";
}
// if the current player has won
// pop up alert X wins! or O wins!
// show the reset button
}
function resetGame() {
//clear all squares
document.getElementById("A1").value = " ";
document.getElementById("A2").value = " ";
document.getElementById("A3").value = " ";
document.getElementById("B1").value = " ";
document.getElementById("B2").value = " ";
document.getElementById("B3").value = " ";
document.getElementById("C1").value = " ";
document.getElementById("C2").value = " ";
document.getElementById("C3").value = " ";
//set turn to X
document.getElementById("turn").value = "X";
//hide the reset button
document.getElementById("reset").style.display = "none";
}
</script>
</head>
<body>
<form action="#" method="POST">
<h1>Turn: <input value="X" name="turn" id="turn" disabled="disabled" type="button"></h1>
<table>
<tbody><tr>
<td><input id="A1" name="A1" value=" " type="button"></td>
<td><input id="B1" name="B1" value=" " type="button"></td>
<td><input id="C1" name="C1" value=" " type="button"></td>
</tr>
<tr>
<td><input id="A2" name="A2" value=" " type="button"></td>
<td><input id="B2" name="B2" value=" " type="button"></td>
<td><input id="C2" name="C2" value=" " type="button"></td>
</tr>
<tr>
<td><input id="A3" name="A3" value=" " type="button"></td>
<td><input id="B3" name="B3" value=" " type="button"></td>
<td><input id="C3" name="C3" value=" " type="button"></td>
</tr>
</tbody></table>
<br>
<input value="Reset" name="reset" id="reset" type="button">
</form>
</body></html>
Explanation / Answer
<html>
<head>
var painted;
var content;
var winningCombinations;
var turn = 0;
var theCanvas;
var c;
var cxt;
var squaresFilled = 0;
var w;
var y;
window.onload=function(){
painted = new Array();
content = new Array();
winningCombinations = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];
for(var l = 0; l <= 8; l++){
painted[l] = false;
content[l]='';
}
}
function canvasClicked(canvasNumber){
theCanvas = "canvas"+canvasNumber;
c = document.getElementById(theCanvas);
cxt = c.getContext("2d");
if(painted[canvasNumber-1] ==false){
if(turn%2==0){
cxt.beginPath();
cxt.moveTo(10,10);
cxt.lineTo(40,40);
cxt.moveTo(40,10);
cxt.lineTo(10,40);
cxt.stroke();
cxt.closePath();
content[canvasNumber-1] = 'X';
}
else{
cxt.beginPath();
cxt.arc(25,25,20,0,Math.PI*2,true);
cxt.stroke();
cxt.closePath();
content[canvasNumber-1] = 'O';
}
turn++;
painted[canvasNumber-1] = true;
squaresFilled++;
checkForWinners(content[canvasNumber-1]);
if(squaresFilled==9){
alert("THE GAME IS OVER!");
location.reload(true);
}
}
else{
alert("THAT SPACE IS ALREADY OCCUPIED WITH YOUR HEART!");
}
}
function checkForWinners(symbol){
for(var a = 0; a < winningCombinations.length; a++){
if(content[winningCombinations[a][0]]==symbol&&content[winningCombinations[a][1]]== symbol&&content[winningCombinations[a][2]]==symbol){
alert(symbol+ " WON!");
playAgain();
}
}
}
function playAgain(){
y=confirm("PLAY AGAIN?");
if(y==true){
alert("OKAY! ^^/>");
location.reload(true);
}
else{
alert("SO LONG!");
}
}
</script>
</head>
<body>
<div id ="box">
<h1>THE</h1><h2> </h2><h3> TIC - TAC - TOE</h3>
<canvas id = "canvas1" width="50" height="50"></canvas>
<canvas id = "canvas2" width="50" height="50"></canvas>
<canvas id = "canvas3" width="50" height="50"></canvas><br/>
<canvas id = "canvas4" width="50" height="50"></canvas>
<canvas id = "canvas5" width="50" height="50"></canvas>
<canvas id = "canvas6" width="50" height="50"></canvas><br/>
<canvas id = "canvas7" width="50" height="50"></canvas>
<canvas id = "canvas8" width="50" height="50"></canvas>
<canvas id = "canvas9" width="50" height="50"></canvas>
</div>
</body>
</html>