Tic-Tac-Toe Game - Jquery

Developer
Matheus
Size
5,818 Kb
Views
58,696
  1. Tic-Tac-Toe Game - Jquery Previews
  2. Tic-Tac-Toe Game - Jquery HTML Codes
  3. Tic-Tac-Toe Game - Jquery CSS Codes
  4. Tic-Tac-Toe Game - Jquery JS Codes

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

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

Tic-Tac-Toe Game - Jquery Previews
IQ Test

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

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tic-Tac-Toe Game - Jquery</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="scorePlayer1Single">player 1: </p> <p class="score1" id="Score1Single"></p> <p class="score2" id="scoreComputer">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 - Jquery - 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 - Jquery - 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 player1ScoreComputer = document.getElementById("Score1Single"); player1ScoreComputer.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 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 (playersNumFlag==2){ 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); } } else if(playersNumFlag==1){ console.log("Entrou A"); if (playerWon==player1Choice){ //updates score console.log("Entrou B"); var player1Score = document.getElementById("Score1Single"); 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 console.log("Entrou C"); var player2Score = document.getElementById("ScoreComputer"); player2Score.innerHTML=parseInt(player2Score.innerHTML)+1; //shows game-status var status = document.getElementById("gameStatus"); status.innerHTML="computer wins!" $("#gameStatus").addClass("blink_me"); setTimeout(function() { resetTable(); $("#gameStatus").removeClass("blink_me"); status.innerHTML=""; }, 2000); } } return; } function gameTableStatus(){ var gameTable=[[elem1x1,elem1x2,elem1x3],[elem2x1,elem2x2,elem2x3],[elem3x1,elem3x2,elem3x3]]; console.log(gameTable); } //function to check victory event function checkVictory(){ console.log("Funcao vitoria"); console.log(elem1x1); console.log(elem2x1); console.log(elem3x1); //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); return true; } 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); return true; } 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); return true; } //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); return true; } 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); return true; } 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); return true; } //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); return true; } 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 true; } return false; } //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; } //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]; } console.log("Verficando icone"); console.log(player2Choice); 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: elem3x3=player2Choice; drawX("square3x3",player2Choice); break; } gameTableStatus(); } //function to define computer's move function computerMove(){ //var canvasID=victoryEminence(); //if (canvasID != 0) // drawX(canvasID,player2Choice); console.log("Entrou na jogada pc"); document.getElementById("scorePlayer1Single").style.color='white'; document.getElementById("Score1Single").style.color='white'; document.getElementById("scoreComputer").style.color='#e8e283'; document.getElementById("ScoreComputer").style.color='#e8e283'; setTimeout(function() { randomMove(); checkVictory(); playersTurn=1; document.getElementById("scoreComputer").style.color='white'; document.getElementById("ScoreComputer").style.color='white'; document.getElementById("scorePlayer1Single").style.color='#e8e283'; document.getElementById("Score1Single").style.color='#e8e283'; }, 2000); 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){ if(playersTurn==2 && playersNumFlag==1) playersTurn=1; elem1x1=handleGameClick('square1x1',elem1x1); checkTie(); if (!checkVictory() && playersNumFlag==1){ computerMove(); checkTie(); checkVictory(); } }); //handles clicks at square1x2 var elem = document.getElementById('square1x2'); elem.addEventListener('click', function(event){ if(playersTurn==2 && playersNumFlag==1) playersTurn=1; elem1x2=handleGameClick('square1x2',elem1x2); checkTie(); if (!checkVictory() && playersNumFlag==1){ computerMove(); checkTie(); checkVictory(); } }); //handles clicks at square1x3 var elem = document.getElementById('square1x3'); elem.addEventListener('click', function(event){ if(playersTurn==2 && playersNumFlag==1) playersTurn=1; elem1x3=handleGameClick('square1x3',elem1x3); checkTie(); if (!checkVictory() && playersNumFlag==1){ computerMove(); checkTie(); checkVictory(); } }); //handles clicks at square2x1 var elem = document.getElementById('square2x1'); elem.addEventListener('click', function(event){ if(playersTurn==2 && playersNumFlag==1) playersTurn=1; elem2x1=handleGameClick('square2x1',elem2x1); checkTie(); if (!checkVictory() && playersNumFlag==1){ computerMove(); checkTie(); checkVictory(); } }); //handles clicks at square2x2 var elem = document.getElementById('square2x2'); elem.addEventListener('click', function(event){ if(playersTurn==2 && playersNumFlag==1) playersTurn=1; elem2x2=handleGameClick('square2x2',elem2x2); checkTie(); if (!checkVictory() && playersNumFlag==1){ computerMove(); checkTie(); checkVictory(); } }); //handles clicks at square2x3 var elem = document.getElementById('square2x3'); elem.addEventListener('click', function(event){ if(playersTurn==2 && playersNumFlag==1) playersTurn=1; elem2x3=handleGameClick('square2x3',elem2x3); checkTie(); if (!checkVictory() && playersNumFlag==1){ computerMove(); checkTie(); checkVictory(); } }); //handles clicks at square3x1 var elem = document.getElementById('square3x1'); elem.addEventListener('click', function(event){ if(playersTurn==2 && playersNumFlag==1) playersTurn=1; elem3x1=handleGameClick('square3x1',elem3x1); checkTie(); if (!checkVictory() && playersNumFlag==1){ computerMove(); checkTie(); checkVictory(); } }); //handles clicks at square3x2 var elem = document.getElementById('square3x2'); elem.addEventListener('click', function(event){ if(playersTurn==2 && playersNumFlag==1) playersTurn=1; elem3x2=handleGameClick('square3x2',elem3x2); checkTie(); if (!checkVictory() && playersNumFlag==1){ computerMove(); checkTie(); checkVictory(); } }); //handles clicks at square3x3 var elem = document.getElementById('square3x3'); elem.addEventListener('click', function(event){ if(playersTurn==2 && playersNumFlag==1) playersTurn=1; elem3x3=handleGameClick('square3x3',elem3x3); checkTie(); if (!checkVictory() && 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 - Jquery - Script Codes
Tic-Tac-Toe Game - Jquery - Script Codes
Home Page Home
Developer Matheus
Username MatheusLima92
Uploaded September 03, 2022
Rating 3
Size 5,818 Kb
Views 58,696
Do you need developer help for Tic-Tac-Toe Game - Jquery?

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
Name
Markdown Previewer
Pomodoro Clock
Recipe Box
Quote Machine
Javascript Calculator
Voting App - register
Weather App
Alumni ECA
A Pen by Matheus
Portfolio
Create amazing blog posts 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!