How do I make a tic tac toe game using javascript + html? 1.The game is played o
ID: 3934288 • Letter: H
Question
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.
Explanation / Answer
<!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"></canvas>
<canvas id = "canvas2" width="50px" height="50px"></canvas>
<canvas id = "canvas3" width="50px" height="50px"></canvas><br/>
<canvas id = "canvas4" width="50px" height="50px"></canvas>
<canvas id = "canvas5" width="50px" height="50px"></canvas>
<canvas id = "canvas6" width="50px" height="50px"></canvas><br/>
<canvas id = "canvas7" width="50px" height="50px"></canvas>
<canvas id = "canvas8" width="50px" height="50px"></canvas>
<canvas id = "canvas9" width="50px" height="50px"></canvas>
<p id="content">
<input type="button" value="New game">
<input type="button" value="Home" <br/>
</p>
</div>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.