Scribd
Upload
577 views

Tic Tac Toe Coding Sample

The document provides code for a tic tac toe game including HTML and CSS files. The HTML file creates the layout for the game board using canvas elements and includes JavaScript code for game logic and handling clicks. The CSS file styles elements and includes animations for headings.

Uploaded by

Niharika Jain
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
577 views

Tic Tac Toe Coding Sample

The document provides code for a tic tac toe game including HTML and CSS files. The HTML file creates the layout for the game board using canvas elements and includes JavaScript code for game logic and handling clicks. The CSS file styles elements and includes animations for headings.

Uploaded by

Niharika Jain
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

TIC TAC TOE GAME

SOFTWARE REQUIREMENT SPECIFICATION


Save the files as .html and .css and use it with Google chrome or Firefox.
JavaScript should be enabled on your browser.

SOURCE CODE
HTML FILE
Save the file as tic tac toe.html
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css3.css"/>
<script type="text/javascript">

//Global Variables
var painted;
var content;
var winningCombinations;
var turn = 0;
var theCanvas;
var c;
var cxt;
var squaresFilled = 0;
var w;
var y;

//Create 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] = '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 USED!");
}

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("THE GAME IS RESET NOW");
location.reload(true);
}
else{
alert("GAME OVER");
}

</script>
</head>
<body>

<div id ="box">
<h1>THE</h1><h2>TIC TAC TOE GAME </h2>
<canvas id = "canvas1" width="50" height="50" style="border:1px solid black"
onclick="canvasClicked(1)"></canvas>
<canvas id = "canvas2" width="50" height="50" style="border:1px solid black"
onclick="canvasClicked(2)"></canvas>
<canvas id = "canvas3" width="50" height="50" style="border:1px solid black"
onclick="canvasClicked(3)"></canvas><br/>
<canvas id = "canvas4" width="50" height="50" style="border:1px solid black"
onclick="canvasClicked(4)"></canvas>
<canvas id = "canvas5" width="50" height="50" style="border:1px solid black"
onclick="canvasClicked(5)"></canvas>
<canvas id = "canvas6" width="50" height="50" style="border:1px solid black"
onclick="canvasClicked(6)"></canvas><br/>
<canvas id = "canvas7" width="50" height="50" style="border:1px solid black"
onclick="canvasClicked(7)"></canvas>
<canvas id = "canvas8" width="50" height="50" style="border:1px solid black"
onclick="canvasClicked(8)"></canvas>
<canvas id = "canvas9" width="50" height="50" style="border:1px solid black"
onclick="canvasClicked(9)"></canvas>
</div>
</body>
</html> // for creating the layout for the game //

CSS FILE
Save the file as css3.css:

body{

text-align:center;

.box{

text-align:left;
width:auto;
height:auto;

h3{

position:relative;
-webkit-animation:h3Animation 5s;

h1{

position:relative;
-webkit-animation:h1Animation 5s;

h2{

position:relative;
-webkit-animation:h2Animation 5s;

canvas{

position:relative;
-webkit-animation:canvasAnimation 5s;

@-webkit-keyframes canvasAnimation {

0% {-webkit-transform:rotate(90deg);left:0px; top:0px;}

@-webkit-keyframes h1Animation {

0% {-webkit-transform:rotate(0deg)}
25% {-webkit-transform:rotate(90deg)}
50% {-webkit-transform:rotate(180deg)}
75% {-webkit-transform:rotate(270deg)}
100% { -webkit-transform:rotate(360deg)}

@-webkit-keyframes h2Animation{

0% {-webkit-transform: scale(1,2);}
25% {-webkit-transform: scale(2,3);}
50% {-webkit-transform: scale(3,4);}

75% {-webkit-transform: scale(4,5);}


100% { -webkit-transform: scale(0,0);}

}
@-webkit-keyframes h3Animation{

0% {-webkit-transform: scale(0,0);}
50% {-webkit-transform: scale(0,0);}
100% {-webkit-transform: scale(100,100);}

You might also like