Homework SourseHow do I make a tic tac toe game using javascript html 1The
How do I make a tic tac toe game using javascript + html?
1.The game is played on a 4x4 board.
2.The computer plays one side (O) and the user plays the other (X). X plays first.
3.The players take turns placing tokens in unoccupied cells on the board. The computer\'s
strategy for playing O need not be complex. It can pick a random cell, or use a more
sophisticated strategy.
Each player is limited to four tokens on the board. When the fifth and subsequent plays are made by a player, the oldest token for that player must be removed before a new one is positioned.
Solution
<!DOCTYPE html>
<html>
<head>
<style>
#block {
position:absolute;
top: 50%;
left: 50%;
width: 30em;
margin-top: -250px;
margin-left: -15em;
background-color: #f3f3f3;
border: 1px solid #ccc;
text-align:center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#content {
font-size:15px;
padding-top:10px;
}
canvas {
position:relative;
-webkit-animation:canvasAnimation 2s;
}
#canvas1, #canvas2, #canvas3,
#canvas4, #canvas5, #canvas6,
#canvas7, #canvas8, #canvas9 {
border:1px solid black;
}
@-webkit-keyframes canvasAnimation {
0% {-webkit-transform:rotate(90deg);left:0px; top:0px;}
}
</style>
<script language=\"javascript\" type=\"text/javascript\">
//Variables declaration
var painted;
var content;
var winningCombinations;
var turn = 0;
var theCanvas;
var c;
var cxt;
var squaresFilled = 0;
var w;
var yes;
//Arrays
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]=\'\';
}
}
//Game methods
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] = \'Opponent \"X\" wins. \';
}
else{
cxt.beginPath();
cxt.arc(25,25,20,0,Math.PI*2,true);
cxt.stroke();
cxt.closePath();
content[canvasNumber-1] = \'Opponent \"O\" wins. \';
}
turn++;
painted[canvasNumber-1] = true;
squaresFilled++;
checkForWinners(content[canvasNumber-1]);
if(squaresFilled==9){
alert(\"Draw. Game over.\");
location.reload(true);
}
}
else{
alert(\"Column filled !\");
}
}
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+ \"Congrats ..\");
playAgain();
}
}
}
function playAgain(){
yes=confirm(\"Play again?\");
if(yes==true){
location.reload(true);
}
else{
alert(\"Bye !\");
location.reload(true);
}
}
</script>
</head>
<body>
<div id=\"block\">
<h1>Game Tic-tac-toe“</h1>
<h3>You are playing against computer</h3>
<canvas id = \"canvas1\" width=\"50px\" height=\"50px\" onclick=\"canvasClicked(1)\"></canvas>
<canvas id = \"canvas2\" width=\"50px\" height=\"50px\" onclick=\"canvasClicked(2)\"></canvas>
<canvas id = \"canvas3\" width=\"50px\" height=\"50px\" onclick=\"canvasClicked(3)\"></canvas><br/>
<canvas id = \"canvas4\" width=\"50px\" height=\"50px\" onclick=\"canvasClicked(4)\"></canvas>
<canvas id = \"canvas5\" width=\"50px\" height=\"50px\" onclick=\"canvasClicked(5)\"></canvas>
<canvas id = \"canvas6\" width=\"50px\" height=\"50px\" onclick=\"canvasClicked(6)\"></canvas><br/>
<canvas id = \"canvas7\" width=\"50px\" height=\"50px\" onclick=\"canvasClicked(7)\"></canvas>
<canvas id = \"canvas8\" width=\"50px\" height=\"50px\" onclick=\"canvasClicked(8)\"></canvas>
<canvas id = \"canvas9\" width=\"50px\" height=\"50px\" onclick=\"canvasClicked(9)\"></canvas>
<p id=\"content\">
<input type=\"button\" value=\"New game\" onClick=\"document.location.reload(true)\">
<input type=\"button\" value=\"Home\" onClick=\"javascript:location.href=\'index.html <br/>
</p>
</div>
</body>
</html>
