Created
December 22, 2014 03:20
-
-
Save Pastyguy/4850ee36785fd5f50d2f to your computer and use it in GitHub Desktop.
code for this tic tac toe game in html 5 with canvas's
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <!-- The code for this tic tac toe game was created by fromTheSprawl from www.dreamincode.net I just tweeked it a little and learn how the code works. | |
| Link | |
| http://www.dreamincode.net/forums/topic/247361-simple-tic-tac-toe-using-html5-css3-and-javascript/ | |
| --> | |
| <!-- this bit of code includes the css file in to the page its self--> | |
| <style media="screen" type="text/css"> | |
| body{ | |
| text-align:center; | |
| } | |
| .box{ | |
| text-align:left; | |
| width:auto; | |
| height:auto; | |
| } | |
| //The CSS3 Magic Begins Here! TM | |
| 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);} | |
| } | |
| </style> | |
| <!-- This is the javascript code--> | |
| <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; | |
| //Instanciate 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 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,SUCKER!"); | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <h1>Tic Tac Toe Game created with Html5 code</h1> | |
| <h2>by The Dude</h2> | |
| <!--This sets up the boxes for the game. The box's are actual all in a line and separated by the <br> tag that returns the next line down making them in to 3by3 grid--> | |
| <div id="box"> | |
| <canvas height="50" id="canvas1" onclick="canvasClicked(1)" style= | |
| "border:1px solid black" width="50"></canvas> <canvas height="50" id= | |
| "canvas2" onclick="canvasClicked(2)" style="border:1px solid black" | |
| width="50"></canvas> <canvas height="50" id="canvas3" onclick= | |
| "canvasClicked(3)" style="border:1px solid black" width= | |
| "50"></canvas><br> | |
| <canvas height="50" id="canvas4" onclick="canvasClicked(4)" style= | |
| "border:1px solid black" width="50"></canvas> <canvas height="50" id= | |
| "canvas5" onclick="canvasClicked(5)" style="border:1px solid black" | |
| width="50"></canvas> <canvas height="50" id="canvas6" onclick= | |
| "canvasClicked(6)" style="border:1px solid black" width= | |
| "50"></canvas><br> | |
| <canvas height="50" id="canvas7" onclick="canvasClicked(7)" style= | |
| "border:1px solid black" width="50"></canvas> <canvas height="50" id= | |
| "canvas8" onclick="canvasClicked(8)" style="border:1px solid black" | |
| width="50"></canvas> <canvas height="50" id="canvas9" onclick= | |
| "canvasClicked(9)" style="border:1px solid black" width="50"></canvas> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment