Tic-Tac-Toe Game - v3

Developer
Size
5,827 Kb
Views
34,408

How do I make an tic-tac-toe game - v3?

What is a tic-tac-toe game - v3? How do you make a tic-tac-toe game - v3? This script and codes were developed by Matheus on 03 September 2022, Saturday.

Tic-Tac-Toe Game - v3 Previews

Tic-Tac-Toe Game - v3 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tic-Tac-Toe Game - v3</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Pacifico">
<body> <div id="state1"> <p class="game-title" id="title"> Tic-tac-toe game </p> <button class="playersBtn" id="btn1">1 player</button> <button class="playersBtn" id="btn2">2 players</button> </div> <div id="state2"> <p id="options"> Would you like to be X or O?</p> <button class="btnOption" id="btnX"> X </button> <button class="btnOption" id="btnO"> O </button> </div> <div id="game-table"> <canvas id="myCanvas" width="500" height="500" style="border:0px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> <canvas id="square1x1" width="150" height="150" style="border:0px solid #d3d3d3;"></canvas> <canvas id="square1x2" width="150" height="150" style="border:0px solid #d3d3d3;"></canvas> <canvas id="square1x3" width="150" height="150" style="border:0px solid #d3d3d3;"></canvas> <canvas id="square2x1" width="150" height="150" style="border:0px solid #d3d3d3;"></canvas> <canvas id="square2x2" width="150" height="150" style="border:0px solid #d3d3d3;"></canvas> <canvas id="square2x3" width="150" height="150" style="border:0px solid #d3d3d3;"></canvas> <canvas id="square3x1" width="150" height="150" style="border:0px solid #d3d3d3;"></canvas> <canvas id="square3x2" width="150" height="150" style="border:0px solid #d3d3d3;"></canvas> <canvas id="square3x3" width="150" height="150" style="border:0px solid #d3d3d3;"></canvas> <button id="back"> Back </button> </div> <div id="game-status"> <p id="gameStatus"></p> </div> <div id="game-score-2players"> <p class="score1" id="scorePlayer1">player 1: </p> <p class="score1" id="Score1"></p> <p class="score2" id="scorePlayer2">player 2: </p> <p class="score2" id="Score2"></p> </div> <div id="game-score-1player"> <p class="score1" id="scorePlayer1">player 1: </p> <p class="score1" id="Score1"></p> <p class="score2" id="scorePlayer2">computer: </p> <p class="score2" id="scoreComputer"></p> </div>
</body> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Tic-Tac-Toe Game - v3 - Script Codes CSS Codes

body{ background: url(http://www.dotcomclassroom.com/images/chalkboard-background----background-labs-qis2map7.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width:800px; heigth:700px; margin: auto;
}
#state1{ width: 600px; height: 600px; margin: auto;
}
.game-title{ font-family: 'Pacifico', serif; font-size: 60px; text-align: center; color: white
}
.playersBtn{ background-color: Transparent; border: none; font-family: 'Pacifico', serif; color: white; font-size: 30px;
}
#btn1{ position: relative; left: 25%;
}
#btn2{ position: relative; left: 35%;
}
.playersBtn:hover{ color: #e8e283;
}
#back:hover{ color: #e8e283;
}
#state2{ width: 700px; height: 600px; margin: auto; position: relative; top: 20px;
}
#options{ font-family: 'Pacifico', serif; color: white; font-size: 50px; text-align: center;
}
.btnOption{ background-color: Transparent; font-size: 50px; font-family: 'Pacifico', serif; color: white; border: none;
}
#btnX{ position: absolute; left: 37%;
}
#btnO{ position: absolute; left: 56%;
}
.btnOption:hover{ color: #e8e283;
}
#game-table{ width: 600px; height: 600px; margin: auto; position: relative; right: 121px; top: 120px;
}
#myCanvas{ position: relative; left: 31.8%; top: 65px;
}
#square1x1{ position: relative; left: 195px; bottom: 435px;
}
#square1x2{ position: relative; left: 34.5%; bottom: 435px;
}
#square1x3{ position: relative; left: 36.8%; bottom: 435px;
}
#square2x1{ position: relative; left: 32.5%; bottom: 420px;
}
#square2x2{ position: relative; left: 34.5%; bottom: 420px;
}
#square2x3{ position: relative; left: 36.9%; bottom: 420px;
}
#square3x1{ position: relative; left: 32.5%; bottom: 410px;
}
#square3x2{ position: relative; left: 34.5%; bottom: 410px;
}
#square3x3{ position: relative; left: 36.9%; bottom: 410px;
}
#game-status{ width: 500px; height: 200px; font-family: 'Pacifico', serif; font-size: 60px; color: white; position: relative; text-align: center; bottom: 670px; left: 160px;
}
#game-score-2players, #game-score-1player{ width: 500px; height: 100px; font-family: 'Pacifico', serif; font-size: 40px; color: white; position: relative; bottom: 760px; left: 280px;
}
.score1{ position: relative; display: inline; right: 80px; color: #e8e283;
}
.score2{ position: relative; display: inline;
}
.blink_me { animation: blinker 1s linear infinite;
}
@keyframes blinker { 50% { opacity: 0; }
}
.blink_me { animation: blinker 1s linear 2;
}
@keyframes blinker { 50% { opacity: 0; }
}
#back{ position: relative; bottom: 330px; left: 33%; font-size: 30px; font-family: 'Pacifico', serif; color: white; background: Transparent; border: none;
}

Tic-Tac-Toe Game - v3 - Script Codes JS Codes

//display properties:
//https://www.w3schools.com/jsref/prop_style_display.asp
//canvas draw:
//https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_tut_path
//https://www.html5canvastutorials.com/tutorials/html5-canvas-lines/
//alternativa aos botoes com canvas:
//http://stackoverflow.com/questions/9880279/how-do-i-add-a-simple-onclick-event-handler-to-a-canvas-element
$(document).ready(function(){ //set initial scores var player1Score = document.getElementById("Score1"); player1Score.innerHTML=0; var player2Score = document.getElementById("Score2"); player2Score.innerHTML=0; var computerScore = document.getElementById("scoreComputer"); computerScore.innerHTML=0; //set flags var playersNumFlag=0; var playersTurn=0; var player1Choice=''; var player2Choice=''; var flagVictory=0; var state=1; var elem1x1 = ""; var elem1x2 = ""; var elem1x3 = ""; var elem2x1 = ""; var elem2x2 = ""; var elem2x3 = ""; var elem3x1 = ""; var elem3x2 = ""; var elem3x3 = ""; //function to draw a X or a O in canvas object function drawX(canvasID, symbol){ var squareCanvas = document.getElementById(canvasID); var ctx = squareCanvas.getContext("2d"); if (symbol=="X"){ ctx.beginPath(); ctx.moveTo(20,20); ctx.lineTo(130,130); ctx.moveTo(130,20); ctx.lineTo(20,130); ctx.lineWidth=10; ctx.strokeStyle='#ffffff'; ctx.stroke(); } else if (symbol=="O"){ ctx.beginPath(); ctx.arc(75,75,30,0,2*Math.PI); ctx.lineWidth=10; ctx.strokeStyle='#ffffff'; ctx.stroke(); } return; } //function to reset the table function resetTable(){ elem1x1=''; elem1x2=''; elem1x3=''; elem2x1=''; elem2x2=''; elem2x3=''; elem3x1=''; elem3x2=''; elem3x3=''; var squareCanvas1x1 = document.getElementById("square1x1"); squareCanvas1x1.style.background = 'none'; var ctx1x1 = squareCanvas1x1.getContext("2d"); ctx1x1.clearRect(0, 0, squareCanvas1x1.width, squareCanvas1x1.height); var squareCanvas1x2 = document.getElementById("square1x2"); squareCanvas1x2.style.background = 'none'; var ctx1x2 = squareCanvas1x2.getContext("2d"); ctx1x2.clearRect(0, 0, squareCanvas1x2.width, squareCanvas1x2.height); var squareCanvas1x3 = document.getElementById("square1x3"); squareCanvas1x3.style.background = 'none'; var ctx1x3 = squareCanvas1x3.getContext("2d"); ctx1x3.clearRect(0, 0, squareCanvas1x3.width, squareCanvas1x3.height); var squareCanvas2x1 = document.getElementById("square2x1"); squareCanvas2x1.style.background = 'none'; var ctx2x1 = squareCanvas2x1.getContext("2d"); ctx2x1.clearRect(0, 0, squareCanvas2x1.width, squareCanvas2x1.height); var squareCanvas2x2 = document.getElementById("square2x2"); squareCanvas2x2.style.background = 'none'; var ctx2x2 = squareCanvas2x2.getContext("2d"); ctx2x2.clearRect(0, 0, squareCanvas2x2.width, squareCanvas2x2.height); var squareCanvas2x3 = document.getElementById("square2x3"); squareCanvas2x3.style.background = 'none'; var ctx2x3 = squareCanvas2x3.getContext("2d"); ctx2x3.clearRect(0, 0, squareCanvas2x3.width, squareCanvas2x3.height); var squareCanvas3x1 = document.getElementById("square3x1"); squareCanvas3x1.style.background = 'none'; var ctx3x1 = squareCanvas3x1.getContext("2d"); ctx3x1.clearRect(0, 0, squareCanvas3x1.width, squareCanvas3x1.height); var squareCanvas3x2 = document.getElementById("square3x2"); squareCanvas3x2.style.background = 'none'; var ctx3x2 = squareCanvas3x2.getContext("2d"); ctx3x2.clearRect(0, 0, squareCanvas3x2.width, squareCanvas3x2.height); var squareCanvas3x3 = document.getElementById("square3x3"); squareCanvas3x3.style.background = 'none'; var ctx3x3 = squareCanvas3x3.getContext("2d"); ctx3x3.clearRect(0, 0, squareCanvas3x3.width, squareCanvas3x3.height); return; } //function to update score function updateScore(playerWon){ if (playerWon==player1Choice){ //updates score var player1Score = document.getElementById("Score1"); player1Score.innerHTML=parseInt(player1Score.innerHTML)+1; //shows game-status var status = document.getElementById("gameStatus"); status.innerHTML="player 1 wins!"; $("#gameStatus").addClass("blink_me"); setTimeout(function() { resetTable(); $("#gameStatus").removeClass("blink_me"); status.innerHTML=""; }, 2000); } else if (playerWon==player2Choice){ //updates score var player2Score = document.getElementById("Score2"); player2Score.innerHTML=parseInt(player2Score.innerHTML)+1; //shows game-status var status = document.getElementById("gameStatus"); status.innerHTML="player 2 wins!" $("#gameStatus").addClass("blink_me"); setTimeout(function() { resetTable(); $("#gameStatus").removeClass("blink_me"); status.innerHTML=""; }, 2000); } return; } //function to check victory event function checkVictory(){ //line-case victory if (elem1x1 != "" && elem1x1==elem1x2 && elem1x1==elem1x3){ document.getElementById("square1x1").style.background = '#800000'; document.getElementById("square1x2").style.background = '#800000'; document.getElementById("square1x3").style.background = '#800000'; if(elem1x1==player1Choice) updateScore(player1Choice); else updateScore(player2Choice); } else if (elem2x1 != "" && elem2x1==elem2x2 && elem2x1==elem2x3){ document.getElementById("square2x1").style.background = '#800000'; document.getElementById("square2x2").style.background = '#800000'; document.getElementById("square2x3").style.background = '#800000'; if(elem2x1==player1Choice) updateScore(player1Choice); else updateScore(player2Choice); } else if (elem3x1 != "" && elem3x1==elem3x2 && elem3x1==elem3x3){ document.getElementById("square3x1").style.background = '#800000'; document.getElementById("square3x2").style.background = '#800000'; document.getElementById("square3x3").style.background = '#800000'; if(elem3x1==player1Choice) updateScore(player1Choice); else updateScore(player2Choice); } //column-case victory else if (elem1x1 != "" && elem1x1==elem2x1 && elem1x1==elem3x1){ document.getElementById("square1x1").style.background = '#800000'; document.getElementById("square2x1").style.background = '#800000'; document.getElementById("square3x1").style.background = '#800000'; if(elem1x1==player1Choice) updateScore(player1Choice); else updateScore(player2Choice); } else if (elem1x2 != "" && elem1x2==elem2x2 && elem1x2==elem3x2){ document.getElementById("square1x2").style.background = '#800000'; document.getElementById("square2x2").style.background = '#800000'; document.getElementById("square3x2").style.background = '#800000'; if(elem1x2==player1Choice) updateScore(player1Choice); else updateScore(player2Choice); } else if (elem1x3 != "" && elem1x3==elem2x3 && elem1x3==elem3x3){ document.getElementById("square1x3").style.background = '#800000'; document.getElementById("square2x3").style.background = '#800000'; document.getElementById("square3x3").style.background = '#800000'; if(elem1x3==player1Choice) updateScore(player1Choice); else updateScore(player2Choice); } //diagonal-case vitory else if (elem1x1 != "" && elem1x1==elem2x2 && elem1x1==elem3x3){ document.getElementById("square1x1").style.background = '#800000'; document.getElementById("square2x2").style.background = '#800000'; document.getElementById("square3x3").style.background = '#800000'; if(elem1x1==player1Choice) updateScore(player1Choice); else updateScore(player2Choice); } else if (elem3x1 != "" && elem3x1==elem2x2 && elem3x1==elem1x3){ document.getElementById("square3x1").style.background = '#800000'; document.getElementById("square2x2").style.background = '#800000'; document.getElementById("square1x3").style.background = '#800000'; if(elem3x1==player1Choice) updateScore(player1Choice); else updateScore(player2Choice); } return; } //handles game tie function checkTie(){ if (elem1x1!="" && elem1x2!="" && elem1x3!="" && elem2x1!="" && elem2x2!="" && elem2x3!="" && elem3x1!="" && elem3x2!="" && elem3x3!=""){ var status = document.getElementById("gameStatus"); status.innerHTML="it's a Tie!" $("#gameStatus").addClass("blink_me"); setTimeout(function() { resetTable(); $("#gameStatus").removeClass("blink_me"); status.innerHTML=""; }, 2000); } return; } //function to handle game-button clicks function handleGameClick(canvasID, square){ //defines that player 1 plays first if (playersTurn==0) playersTurn=1; //changes square content only if it is empty if (square==""){ //player1 turn if (playersTurn == 1){ drawX(canvasID,player1Choice); square=player1Choice; playersTurn=2; document.getElementById("scorePlayer1").style.color='white'; document.getElementById("Score1").style.color='white'; document.getElementById("scorePlayer2").style.color='#e8e283'; document.getElementById("Score2").style.color='#e8e283'; return square; } //player 2 turn else if (playersTurn == 2){ drawX(canvasID,player2Choice); square=player2Choice; playersTurn=1; document.getElementById("scorePlayer2").style.color='white'; document.getElementById("Score2").style.color='white'; document.getElementById("scorePlayer1").style.color='#e8e283'; document.getElementById("Score1").style.color='#e8e283'; return square; } } return; } //function to check victory's eminence (returns canvas-square that would lead to victory) function victoryEminence(){ //line-case eminence if(elem1x1!="" && elem1x1==elem1x2 && elem1x3==""){ elem1x3=player2Choice; return "square1x3"; } if(elem1x1!="" && elem1x1==elem1x3 && elem1x2==""){ elem1x2=player2Choice; return "square1x2"; } if(elem1x2!="" && elem1x2==elem1x3 && elem1x1==""){ elem1x1=player2Choice; return "square1x1"; } else if(elem2x1!="" && elem2x1==elem2x2 && elem2x3==""){ elem2x3=player2Choice; return "square2x3"; } else if(elem2x1!="" && elem2x1==elem2x3 && elem2x2==""){ elem2x2=player2Choice; return "square2x2"; } else if(elem2x2!="" && elem2x2==elem2x3 && elem2x1==""){ elem2x1=player2Choice; return "square2x1"; } else if(elem3x1!="" && elem3x1==elem3x2 && elem3x3==""){ elem3x3=player2Choice; return "square3x3"; } else if(elem3x1!="" && elem3x1==elem3x3 && elem3x2==""){ elem3x2=player2Choice; return "square3x2"; } else if(elem3x2!="" && elem3x2==elem3x3 && elem3x1==""){ elem3x1=player2Choice; return "square3x1"; } //column-case eminence else if(elem1x1!="" && elem1x1==elem2x1 && elem3x1==""){ elem3x1=player2Choice; return "square3x1"; } else if(elem1x1!="" && elem1x1==elem3x1 && elem2x1==""){ elem2x1=player2Choice; return "square2x1"; } else if(elem2x1!="" && elem2x1==elem3x1 && elem1x1==""){ elem1x1=player2Choice; return "square1x1"; } else if(elem1x2!="" && elem1x2==elem2x2 && elem3x2==""){ elem3x2=player2Choice; return "square3x2"; } else if(elem1x2!="" && elem1x2==elem3x2 && elem2x2==""){ elem2x2=player2Choice; return "square2x2"; } else if(elem2x2!="" && elem2x2==elem3x2 && elem1x2==""){ elem1x2=player2Choice; return "square1x2"; } else if(elem1x3!="" && elem1x3==elem2x3 && elem3x3==""){ elem3x3=player2Choice; return "square3x3"; } else if(elem1x3!="" && elem1x3==elem3x3 && elem2x3==""){ elem2x3=player2Choice; return "square2x3"; } else if(elem2x3!="" && elem2x3==elem3x3 && elem1x3==""){ elem1x3=player2Choice; return "square1x3"; } //diagonal-case eminence else if(elem1x1!="" && elem1x1==elem2x2 && elem3x3==""){ elem3x3=player2Choice; return "square3x3"; } else if(elem1x1!="" && elem1x1==elem3x3 && elem2x2==""){ elem2x2=player2Choice; return "square2x2"; } else if(elem2x2!="" && elem2x2==elem3x3 && elem1x1==""){ elem1x1=player2Choice; return "square1x1"; } else if(elem3x1!="" && elem3x1==elem2x2 && elem1x3==""){ elem1x3=player2Choice; return "square1x3"; } else if(elem3x1!="" && elem3x1==elem1x3 && elem2x2==""){ elem2x2=player2Choice; return "square2x2"; } else if(elem2x2!="" && elem2x2==elem1x3 && elem3x1==""){ elem3x1=player2Choice; return "square3x1"; } //no victory eminence else return 0; } //functions to define a random computer move function randomMove(){ var squares=[elem1x1,elem1x2,elem1x3,elem2x1,elem2x2,elem2x3,elem3x1,elem3x2,elem3x3]; var pos=Math.floor(Math.random()*squares.length); console.log(pos); var item = squares[pos]; while(item!=""){ pos=Math.floor(Math.random()*squares.length); item = squares[pos]; } switch(pos){ case 0: elem1x1=player2Choice; drawX("square1x1",player2Choice); break; case 1: elem1x2=player2Choice; drawX("square1x2",player2Choice); break; case 2: elem1x3=player2Choice; drawX("square1x3",player2Choice); break; case 3: elem2x1=player2Choice; drawX("square2x1",player2Choice); break; case 4: elem2x2=player2Choice; drawX("square2x2",player2Choice); break; case 5: elem2x3=player2Choice; drawX("square2x3",player2Choice); break; case 6: elem3x1=player2Choice; drawX("square3x1",player2Choice); break; case 7: elem3x2=player2Choice; drawX("square3x2",player2Choice); break; case 8: elem1x1=player2Choice; drawX("square3x3",player2Choice); break; } } //function to define computer's move function computerMove(){ var canvasID=victoryEminence(); console.log(canvasID); if (canvasID != 0){ drawX(canvasID,player2Choice); console.log("entrou A!"); } else{ console.log("Entrou B!"); randomMove(); } playersTurn=1; document.getElementById("scorePlayer2").style.color='white'; document.getElementById("Score2").style.color='white'; document.getElementById("scorePlayer1").style.color='#e8e283'; document.getElementById("Score1").style.color='#e8e283'; return; } //get canvas and draws game-table var c = document.getElementById("myCanvas"); var ctxVertical = c.getContext("2d"); var ctxHorizontal = c.getContext("2d"); //draws vertical lines ctxVertical.moveTo(166,0); ctxVertical.lineTo(166,500); ctxVertical.moveTo(333,0); ctxVertical.lineTo(333,500); ctxVertical.lineWidth=15; ctxVertical.strokeStyle='#ffffff'; ctxVertical.stroke(); //draws horizontal lines ctxHorizontal.moveTo(0,166); ctxHorizontal.lineTo(500,166); ctxHorizontal.moveTo(0,333); ctxHorizontal.lineTo(500,333); ctxHorizontal.lineWidth=15; ctxHorizontal.strokeStyle='#ffffff'; ctxHorizontal.stroke(); //hides sections while user chooses menu options document.getElementById("game-table").style.display = "none"; document.getElementById("state2").style.display = "none"; //document.getElementById("state1").style.display = "none"; document.getElementById("game-score-2players").style.display = "none"; document.getElementById("game-score-1player").style.display = "none"; //1 player mode selected $("#btn1").click(function(){ $("#state1").fadeOut(0); $("#state2").fadeIn(600); playersNumFlag=1; }); //2 player mode selected $("#btn2").click(function(){ $("#state1").fadeOut(0); $("#state2").fadeIn(600); playersNumFlag=2; }); //player 1 will be X $("#btnX").click(function(){ $("#state2").fadeOut(0); $("#game-table").fadeIn(600); if (playersNumFlag==1) $("#game-score-1player").fadeIn(100); else $("#game-score-2players").fadeIn(100); player1Choice='X'; player2Choice='O'; }); //player 1 will be O $("#btnO").click(function(){ $("#state2").fadeOut(0); $("#game-table").fadeIn(600); if (playersNumFlag==1) $("#game-score-1player").fadeIn(100); else $("#game-score-2players").fadeIn(100); player1Choice='O'; player2Choice='X'; }); //handles clicks at square1x1 var elem = document.getElementById('square1x1'); elem.addEventListener('click', function(event){ elem1x1=handleGameClick('square1x1',elem1x1); checkTie(); checkVictory(); if (playersNumFlag==1){ computerMove(); checkTie(); checkVictory(); } }); //handles clicks at square1x2 var elem = document.getElementById('square1x2'); elem.addEventListener('click', function(event){ elem1x2=handleGameClick('square1x2',elem1x2); checkTie(); checkVictory(); if (playersNumFlag==1){ computerMove(); checkTie(); checkVictory(); } }); //handles clicks at square1x3 var elem = document.getElementById('square1x3'); elem.addEventListener('click', function(event){ elem1x3=handleGameClick('square1x3',elem1x3); checkTie(); checkVictory(); if (playersNumFlag==1){ computerMove(); checkTie(); checkVictory(); } }); //handles clicks at square2x1 var elem = document.getElementById('square2x1'); elem.addEventListener('click', function(event){ elem2x1=handleGameClick('square2x1',elem2x1); checkTie(); checkVictory(); if (playersNumFlag==1){ computerMove(); checkTie(); checkVictory(); } }); //handles clicks at square2x2 var elem = document.getElementById('square2x2'); elem.addEventListener('click', function(event){ elem2x2=handleGameClick('square2x2',elem2x2); checkTie(); checkVictory(); if (playersNumFlag==1){ computerMove(); checkTie(); checkVictory(); } }); //handles clicks at square2x3 var elem = document.getElementById('square2x3'); elem.addEventListener('click', function(event){ elem2x3=handleGameClick('square2x3',elem2x3); checkTie(); checkVictory(); if (playersNumFlag==1){ computerMove(); checkTie(); checkVictory(); } }); //handles clicks at square3x1 var elem = document.getElementById('square3x1'); elem.addEventListener('click', function(event){ elem3x1=handleGameClick('square3x1',elem3x1); checkTie(); checkVictory(); if (playersNumFlag==1){ computerMove(); checkTie(); checkVictory(); } }); //handles clicks at square3x2 var elem = document.getElementById('square3x2'); elem.addEventListener('click', function(event){ elem3x2=handleGameClick('square3x2',elem3x2); checkTie(); checkVictory(); if (playersNumFlag==1){ computerMove(); checkTie(); checkVictory(); } }); //handles clicks at square3x3 var elem = document.getElementById('square3x3'); elem.addEventListener('click', function(event){ elem3x3=handleGameClick('square3x3',elem3x3); checkTie(); checkVictory(); if (playersNumFlag==1){ computerMove(); checkTie(); checkVictory(); } }); //handles back buttom $("#back").click(function(){ document.getElementById("game-table").style.display = "none"; document.getElementById("state2").style.display = "none"; document.getElementById("game-score-2players").style.display = "none"; document.getElementById("game-score-1player").style.display = "none"; resetTable(); $("#state1").fadeIn(600); //set initial scores var player1Score = document.getElementById("Score1"); player1Score.innerHTML=0; var player2Score = document.getElementById("Score2"); player2Score.innerHTML=0; var computerScore = document.getElementById("scoreComputer"); computerScore.innerHTML=0; document.getElementById("scorePlayer2").style.color='white'; document.getElementById("Score2").style.color='white'; document.getElementById("scorePlayer1").style.color='#e8e283'; document.getElementById("Score1").style.color='#e8e283'; //set flags playersNumFlag=0; playersTurn=0; player1Choice=''; player2Choice=''; state=1; elem1x1 = ""; elem1x2 = ""; elem1x3 = ""; elem2x1 = ""; elem2x2 = ""; elem2x3 = ""; elem3x1 = ""; elem3x2 = ""; elem3x3 = ""; });
});
Tic-Tac-Toe Game - v3 - Script Codes
Tic-Tac-Toe Game - v3 - Script Codes
Home Page Home
Developer Matheus
Username MatheusLima92
Uploaded September 03, 2022
Rating 3
Size 5,827 Kb
Views 34,408
Do you need developer help for Tic-Tac-Toe Game - v3?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Matheus (MatheusLima92) Script Codes
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!