Part 1: Create the grid tic-tac-toe gameboard using buttons and
iteration.
Part 2: Human user gets to select an open cell on the grid - place
an X on that button selected
Part 3: Check for a win using DOM iteration - new game option if
row or column matching X pattern
Part 4: Computer gets to select an open cell on the grid - place an
O on that button selected
Part 5: Check for a win using DOM iteration - new game option if
row or column matching O pattern
Part 6: Cycle back to Part 2
Make sure that it shows a Draw condition and color in the cells for the winning condition.
<!DOCTYPE html>
<html>
<head>
<title>Tic Tac Toe</title>
<style>
.boardBtn { height: 100px; width: 100px }
.winText { color: red }
</style>
<script>
$(document).ready(function () {
//Your Javascript code goes here.
});
</script>
</head>
<body>
<div id="tttBoard"></div>
<input type="button" id="btnBuildBoard" value="Build
Board"/>
<input type="text" id="boardSize" value="3"/>
<input type="button" id="btnNewGame" value="New Game"
disabled="true"/>
</body>
</html>
<!DOCtype html>
<html>
<head>
<title>Tic Tac Toe</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body onload="mode();">
<div id="screen">
<h1 class="h1" align="center">Please Choose Game Mode</h1>
<select id="mode">
<option Selected>Choose Mode</option>
<option value="1">Computer Vs Human</option>
<option value="2">Human Vs Human</option>
<option disabled value="3">Computer Vs Computer (comming soon)</option>
</select>
</div>
<h1>Tic Tac Toe </h1>
<div id="reset"></div>
<button class="btn d" id="draw">Draw!</button>
<button class="btn l" id="loss">You Lost!</button>
<button class="btn w" id="win">You Won!</button>
<button class="btn w1" id="p2win">Player 1 (O)Won!</button>
<button class="btn w1" id="p1win">Player 2 (X)Won!</button>
<button class="btn r" id="resetbtn" onclick="resetclick()">Reset</button>
<div id="turn" style="display:none;">
<span id="p1" class="p1">Player2's (X)Turn</span>
<span id="p2" class="p2">Player1's (O)Turn</span></div>
<div id="turnc" style="display:none;">
<span id="ct" class="p1">Computer's' Turn</span>
<span id="yt" class="p2">Your Turn</span></div>
<span id="tt"></span>
<form align="center" >
<input type="button" id="b1" value=" " onclick="btn1(mode)">
<input type="button" id="b2" value=" " onclick="btn2(mode)">
<input type="button" id="b3" value=" " onclick="btn3(mode)"><br />
<input type="button" id="b4" value=" " onclick="btn4(mode)">
<input type="button" id="b5" value=" " onclick="btn5(mode)">
<input type="button" id="b6" value=" " onclick="btn6(mode)"><br />
<input type="button" id="b7" value=" " onclick="btn7(mode)">
<input type="button" id="b8" value=" " onclick="btn8(mode)">
<input type="button" id="b9" value=" " onclick="btn9(mode)">
</form>
</body>
</html>
body {
background-color:#000;
}
h1{
color:#4CAF50;
text-align:center;
text-decoration:underline ;
}
.h1{
position:fixed;
top:180px;
align:center;
}
#tt{
position:fixed;
color:#4CAF50;
left:40%;
top:330px;
}
#screen{
position:fixed;
width:100%;
height:1000px;
background-color:#0f0f0f;
z-index:1;
align:center;
}
select{
background-color: #4CAF50;
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
position:absolute;
top:300px;
left:30%;
height:40px;
width:40%;
}
input{
width:80px;
height:80px;
background-color:#4CAF50;
color:#fff;
font-size:50px;
}
#reset{
position:fixed;
width:100%;
opacity:0;
display:none;
background-color:#000;
height:1000px;
}
.vote{
color:#fff;
position:fixed;
bottom:15px;
font-size:20px;
font-style: oblique;
}
.btn{
border: none;
position:fixed;
color: white;
left:30%;
display:none;
padding: 15px 32px;
width:150px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
height:40px;
font-size:20px;
}
.w1{
top:350px;
background-color: #0cf;
color:#000;
width:200px;
left:20%;
}
.p1{
position:fixed;
color:#4CAF50;
left:10px;
top:330px;
display:none;
}
.p2{
position:fixed;
color:#4CAF50;
right:10px;
top:330px;
}
.r{
z-index:1;
top:400px;
background-color: #4CAF50;
}
.l{
top:350px;
background-color: red;
}
.w{
top:350px;
background-color: #0cf;
color:#000;
}
.vote a{
color:#4CAF50;
}
.d{
z-index:1;
top:350px;
background-color: #fff;
color:#000;
}
function turnp(){$("#tt").html("Total Moves: "+moveCount),mode==2?$("#turn").show():$("#turn").hide();mode==1?$("#turnc").show():$("#turnc").hide();0==turn?($("#p2").show(),$("#p1").hide()):($("#p1").show(),$("#p2").hide());0==turn?($("#yt").show(),$("#ct").hide()):($("#ct").show(),$("#yt").hide())}function mode(){$("#mode").change(function(){$("#screen").hide(),mode=$("#mode").val(),mode==2?$("#turn").show():$("#turn").hide();mode==1?$("#turnc").show():$("#turnc").hide()})}function btn1(){" "==$("#b1").val()&&0==turn&&1==mode?($("#b1").attr("value"," X "),sqr1T=1,turn=1,turrn(),check()):" "==$("#b1").val()&&1==turn&&2==mode?($("#b1").attr("value"," X "),sqr1T=1,turn=0,turrn(),p1c()):" "==$("#b1").val()&&0==turn&&2==mode&&($("#b1").attr("value"," O "),sqr1T=1,turn=1,turrn(),p1c()),drawCheck()}function btn2(){" "==$("#b2").val()&&0==turn&&1==mode?($("#b2").attr("value"," X "),sqr2T=1,turn=1,turrn(),check()):" "==$("#b2").val()&&1==turn&&2==mode?($("#b2").attr("value"," X "),sqr2T=1,turn=0,turrn(),p1c()):" "==$("#b2").val()&&0==turn&&2==mode&&($("#b2").attr("value"," O "),sqr2T=1,turn=1,turrn(),p1c()),drawCheck()}function btn3(){" "==$("#b3").val()&&0==turn&&1==mode?($("#b3").attr("value"," X "),sqr3T=1,turn=1,turrn(),check()):" "==$("#b3").val()&&1==turn&&2==mode?($("#b3").attr("value"," X "),sqr3T=1,turn=0,turrn(),p1c()):" "==$("#b3").val()&&0==turn&&2==mode&&($("#b3").attr("value"," O "),sqr3T=1,turn=1,turrn(),p1c()),drawCheck()}function btn4(){" "==$("#b4").val()&&0==turn&&1==mode?($("#b4").attr("value"," X "),sqr4T=1,turn=1,turrn(),check()):" "==$("#b4").val()&&1==turn&&2==mode?($("#b4").attr("value"," X "),sqr4T=1,turn=0,turrn(),p1c()):" "==$("#b4").val()&&0==turn&&2==mode&&($("#b4").attr("value"," O "),sqr4T=1,turn=1,turrn(),p1c()),drawCheck()}function btn5(){" "==$("#b5").val()&&0==turn&&1==mode?($("#b5").attr("value"," X "),sqr5T=1,turn=1,turrn(),check()):" "==$("#b5").val()&&1==turn&&2==mode?($("#b5").attr("value"," X "),sqr5T=1,turn=0,turrn(),p1c()):" "==$("#b5").val()&&0==turn&&2==mode&&($("#b5").attr("value"," O "),sqr5T=1,turn=1,turrn(),p1c()),drawCheck()}function btn6(){" "==$("#b6").val()&&0==turn&&1==mode?($("#b6").attr("value"," X "),sqr6T=1,turn=1,turrn(),check()):" "==$("#b6").val()&&1==turn&&2==mode?($("#b6").attr("value"," X "),sqr6T=1,turn=0,turrn(),p1c()):" "==$("#b6").val()&&0==turn&&2==mode&&($("#b6").attr("value"," O "),sqr6T=1,turn=1,turrn(),p1c()),drawCheck()}function btn7(){" "==$("#b7").val()&&0==turn&&1==mode?($("#b7").attr("value"," X "),sqr7T=1,turn=1,turrn(),check()):" "==$("#b7").val()&&1==turn&&2==mode?($("#b7").attr("value"," X "),sqr7T=1,turn=0,turrn(),p1c()):" "==$("#b7").val()&&0==turn&&2==mode&&($("#b7").attr("value"," O "),sqr7T=1,turn=1,turrn(),p1c()),drawCheck()}function btn8(){" "==$("#b8").val()&&0==turn&&1==mode?($("#b8").attr("value"," X "),sqr8T=1,turn=1,turrn(),check()):" "==$("#b8").val()&&1==turn&&2==mode?($("#b8").attr("value"," X "),sqr8T=1,turn=0,turrn(),p1c()):" "==$("#b8").val()&&0==turn&&2==mode&&($("#b8").attr("value"," O "),sqr8T=1,turn=1,turrn(),p1c()),drawCheck()}function btn9(){" "==$("#b9").val()&&0==turn&&1==mode?($("#b9").attr("value"," X "),sqr9T=1,turn=1,turrn(),check()):" "==$("#b9").val()&&1==turn&&2==mode?($("#b9").attr("value"," X "),sqr9T=1,turn=0,turrn(),p1c()):" "==$("#b9").val()&&0==turn&&2==mode&&($("#b9").attr("value"," O "),sqr9T=1,turn=1,turrn(),p1c()),drawCheck()}function turrn(){sqr1=$("#b1").val(),sqr2=$("#b2").val(),sqr3=$("#b3").val(),sqr4=$("#b4").val(),sqr5=$("#b5").val(),sqr6=$("#b6").val(),sqr7=$("#b7").val(),sqr8=$("#b8").val(),sqr9=$("#b9").val()}function check(){" X "==sqr1&&" X "==sqr2&&" X "==sqr3?(wb(),reset()):" X "==sqr4&&" X "==sqr5&&" X "==sqr6?(wb(),reset()):" X "==sqr7&&" X "==sqr8&&" X "==sqr9?(wb(),reset()):" X "==sqr1&&" X "==sqr5&&" X "==sqr9?(wb(),reset()):" X "==sqr1&&" X "==sqr4&&" X "==sqr7?(wb(),reset()):" X "==sqr2&&" X "==sqr5&&" X "==sqr8?(wb(),reset()):" X "==sqr3&&" X "==sqr6&&" X "==sqr9?(wb(),reset()):" X "==sqr1&&" X "==sqr5&&" X "==sqr9?(wb(),reset()):" X "==sqr3&&" X "==sqr5&&" X "==sqr7?(wb(),reset()):(winCheck(),check2(),drawCheck())}function check2(){turrn(),drawCheck()," O "==sqr1&&" O "==sqr2&&" O "==sqr3?(lb() ,reset()):" O "==sqr4&&" O "==sqr5&&" O "==sqr6?(lb() ,reset()):" O "==sqr7&&" O "==sqr8&&" O "==sqr9?(lb() ,reset()):" O "==sqr1&&" O "==sqr5&&" O "==sqr9?(lb() ,reset()):" O "==sqr1&&" O "==sqr4&&" O "==sqr7?(lb() ,reset()):" O "==sqr2&&" O "==sqr5&&" O "==sqr8?(lb() ,reset()):" O "==sqr3&&" O "==sqr6&&" O "==sqr9?(lb() ,reset()):" O "==sqr1&&" O "==sqr5&&" O "==sqr9?(lb() ,reset()):" O "==sqr3&&" O "==sqr5&&" O "==sqr7&&(lb() ,reset())}function p1c(){" X "==sqr1&&" X "==sqr2&&" X "==sqr3?(p1w(),reset()):" X "==sqr4&&" X "==sqr5&&" X "==sqr6?(p1w(),reset()):" X "==sqr7&&" X "==sqr8&&" X "==sqr9?(p1w(),reset()):" X "==sqr1&&" X "==sqr5&&" X "==sqr9?(p1w(),reset()):" X "==sqr1&&" X "==sqr4&&" X "==sqr7?(p1w(),reset()):" X "==sqr2&&" X "==sqr5&&" X "==sqr8?(p1w(),reset()):" X "==sqr3&&" X "==sqr6&&" X "==sqr9?(p1w(),reset()):" X "==sqr1&&" X "==sqr5&&" X "==sqr9?(p1w(),reset()):" X "==sqr3&&" X "==sqr5&&" X "==sqr7?(p1w(),reset()):(p2c(),drawCheck())}function p2c(){turrn(),drawCheck()," O "==sqr1&&" O "==sqr2&&" O "==sqr3?(p2w(),reset()):" O "==sqr4&&" O "==sqr5&&" O "==sqr6?(p2w(),reset()):" O "==sqr7&&" O "==sqr8&&" O "==sqr9?(p2w(),reset()):" O "==sqr1&&" O "==sqr5&&" O "==sqr9?(p2w(),reset()):" O "==sqr1&&" O "==sqr4&&" O "==sqr7?(p2w(),reset()):" O "==sqr2&&" O "==sqr5&&" O "==sqr8?(p2w(),reset()):" O "==sqr3&&" O "==sqr6&&" O "==sqr9?(p2w(),reset()):" O "==sqr1&&" O "==sqr5&&" O "==sqr9?(p2w(),reset()):" O "==sqr3&&" O "==sqr5&&" O "==sqr7&&(p2w(),reset())}function drawCheck(){turnp(),turrn(),9==(moveCount=sqr1T+sqr2T+sqr3T+sqr4T+sqr5T+sqr6T+sqr7T+sqr8T+sqr9T)&&(reset(),db())}function winCheck(){check2()," O "==sqr1&&" O "==sqr2&&0==sqr3T&&1==turn?($("#b3").attr("value"," O "),sqr3T=1,turn=0):" O "==sqr2&&" O "==sqr3&&0==sqr1T&&1==turn?($("#b1").attr("value"," O "),sqr1T=1,turn=0):" O "==sqr4&&" O "==sqr5&&0==sqr6T&&1==turn?($("#b6").attr("value"," O "),sqr6T=1,turn=0):" O "==sqr5&&" O "==sqr6&&0==sqr4T&&1==turn?($("#b4").attr("value"," O "),sqr4T=1,turn=0):" O "==sqr7&&" O "==sqr8&&0==sqr9T&&1==turn?($("#b9").attr("value"," O "),sqr9T=1,turn=0):" O "==sqr8&&" O "==sqr9&&0==sqr7T&&1==turn?($("#b7").attr("value"," O "),sqr7T=1,turn=0):" O "==sqr1&&" O "==sqr5&&0==sqr9T&&1==turn?($("#b9").attr("value"," O "),sqr9T=1,turn=0):" O "==sqr5&&" O "==sqr9&&0==sqr1T&&1==turn?($("#b1").attr("value"," O "),sqr1T=1,turn=0):" O "==sqr3&&" O "==sqr5&&0==sqr7T&&1==turn?($("#b7").attr("value"," O "),sqr7T=1,turn=0):" O "==sqr7&&" O "==sqr5&&0==sqr3T&&1==turn?($("#b3").attr("value"," O "),sqr3T=1,turn=0):" O "==sqr1&&" O "==sqr3&&0==sqr2T&&1==turn?($("#b2").attr("value"," O "),sqr2T=1,turn=0):" O "==sqr4&&" O "==sqr6&&0==sqr5T&&1==turn?($("#b5").attr("value"," O "),sqr5T=1,turn=0):" O "==sqr7&&" O "==sqr9&&0==sqr8T&&1==turn?($("#b8").attr("value"," O "),sqr8T=1,turn=0):" O "==sqr1&&" O "==sqr7&&0==sqr4T&&1==turn?($("#b4").attr("value"," O "),sqr4T=1,turn=0):" O "==sqr2&&" O "==sqr8&&0==sqr5T&&1==turn?($("#b5").attr("value"," O "),sqr5T=1,turn=0):" O "==sqr3&&" O "==sqr9&&0==sqr6T&&1==turn?($("#b6").attr("value"," O "),sqr6T=1,turn=0):" O "==sqr1&&" O "==sqr5&&0==sqr9T&&1==turn?($("#b9").attr("value"," O "),sqr9T=1,turn=0):" O "==sqr4&&" O "==sqr7&&0==sqr1T&&1==turn?($("#b1").attr("value"," O "),sqr1T=1,turn=0):" O "==sqr5&&" O "==sqr8&&0==sqr2T&&1==turn?($("#b2").attr("value"," O "),sqr2T=1,turn=0):" O "==sqr6&&" O "==sqr9&&0==sqr3T&&1==turn?($("#b3").attr("value"," O "),sqr3T=1,turn=0):" O "==sqr1&&" O "==sqr4&&0==sqr7T&&1==turn?($("#b7").attr("value"," O "),sqr7T=1,turn=0):" O "==sqr2&&" O "==sqr5&&0==sqr8T&&1==turn?($("#b8").attr("value"," O "),sqr8T=1,turn=0):" O "==sqr3&&" O "==sqr6&&0==sqr9T&&1==turn?($("#b9").attr("value"," O "),sqr9T=1,turn=0):" O "==sqr1&&" O "==sqr9&&0==sqr5T&&1==turn?($("#b5").attr("value"," O "),sqr5T=1,turn=0):" O "==sqr3&&" O "==sqr7&&0==sqr5T&&1==turn?($("#b5").attr("value"," O "),sqr5T=1,turn=0):computer(),check2()}function computer(){check2()," X "==sqr1&&" X "==sqr2&&0==sqr3T&&1==turn?($("#b3").attr("value"," O "),sqr3T=1,turn=0):" X "==sqr2&&" X "==sqr3&&0==sqr1T&&1==turn?($("#b1").attr("value"," O "),sqr1T=1,turn=0):" X "==sqr4&&" X "==sqr5&&0==sqr6T&&1==turn?($("#b6").attr("value"," O "),sqr6T=1,turn=0):" X "==sqr5&&" X "==sqr6&&0==sqr4T&&1==turn?($("#b4").attr("value"," O "),sqr4T=1,turn=0):" X "==sqr7&&" X "==sqr8&&0==sqr9T&&1==turn?($("#b9").attr("value"," O "),sqr9T=1,turn=0):" X "==sqr8&&" X "==sqr9&&0==sqr7T&&1==turn?($("#b7").attr("value"," O "),sqr7T=1,turn=0):" X "==sqr1&&" X "==sqr5&&0==sqr9T&&1==turn?($("#b9").attr("value"," O "),sqr9T=1,turn=0):" X "==sqr5&&" X "==sqr9&&0==sqr1T&&1==turn?($("#b1").attr("value"," O "),sqr1T=1,turn=0):" X "==sqr3&&" X "==sqr5&&0==sqr7T&&1==turn?($("#b7").attr("value"," O "),sqr7T=1,turn=0):" X "==sqr7&&" X "==sqr5&&0==sqr3T&&1==turn?($("#b3").attr("value"," O "),sqr3T=1,turn=0):" X "==sqr1&&" X "==sqr3&&0==sqr2T&&1==turn?($("#b2").attr("value"," O "),sqr2T=1,turn=0):" X "==sqr4&&" X "==sqr6&&0==sqr5T&&1==turn?($("#b5").attr("value"," O "),sqr5T=1,turn=0):" X "==sqr7&&" X "==sqr9&&0==sqr8T&&1==turn?($("#b8").attr("value"," O "),sqr8T=1,turn=0):" X "==sqr1&&" X "==sqr7&&0==sqr4T&&1==turn?($("#b4").attr("value"," O "),sqr4T=1,turn=0):" X "==sqr2&&" X "==sqr8&&0==sqr5T&&1==turn?($("#b5").attr("value"," O "),sqr5T=1,turn=0):" X "==sqr3&&" X "==sqr9&&0==sqr6T&&1==turn?($("#b6").attr("value"," O "),sqr6T=1,turn=0):" X "==sqr1&&" X "==sqr5&&0==sqr9T&&1==turn?($("#b9").attr("value"," O "),sqr9T=1,turn=0):" X "==sqr4&&" X "==sqr7&&0==sqr1T&&1==turn?($("#b1").attr("value"," O "),sqr1T=1,turn=0):" X "==sqr5&&" X "==sqr8&&0==sqr2T&&1==turn?($("#b2").attr("value"," O "),sqr2T=1,turn=0):" X "==sqr6&&" X "==sqr9&&0==sqr3T&&1==turn?($("#b3").attr("value"," O "),sqr3T=1,turn=0):" X "==sqr1&&" X "==sqr4&&0==sqr7T&&1==turn?($("#b7").attr("value"," O "),sqr7T=1,turn=0):" X "==sqr2&&" X "==sqr5&&0==sqr8T&&1==turn?($("#b8").attr("value"," O "),sqr8T=1,turn=0):" X "==sqr3&&" X "==sqr6&&0==sqr9T&&1==turn?($("#b9").attr("value"," O "),sqr9T=1,turn=0):" X "==sqr1&&" X "==sqr9&&0==sqr5T&&1==turn?($("#b5").attr("value"," O "),sqr5T=1,turn=0):" X "==sqr3&&" X "==sqr7&&0==sqr5T&&1==turn?($("#b5").attr("value"," O "),sqr5T=1,turn=0):AI(),check2()}function AI(){turrn()," "==$("#b5").val()&&1==turn?($("#b5").attr("value"," O "),turn=0,sqr5T=1):" "==$("#b1").val()&&1==turn?($("#b1").attr("value"," O "),turn=0,sqr1T=1):" "==$("#b9").val()&&1==turn?($("#b9").attr("value"," O "),turn=0,sqr9T=1):" "==$("#b6").val()&&1==turn?($("#b6").attr("value"," O "),turn=0,sqr6T=1):" "==$("#b2").val()&&1==turn?($("#b2").attr("value"," O "),turn=0,sqr2T=1):" "==$("#b8").val()&&1==turn?($("#b8").attr("value"," O "),turn=0,sqr8T=1):" "==$("#b3").val()&&1==turn?($("#b3").attr("value"," O "),turn=0,sqr3T=1):" "==$("#b7").val()&&1==turn?($("#b7").attr("value"," O "),turn=0,sqr7T=1):" "==$("#b4").val()&&1==turn&&($("#b4").attr("value"," O "),turn=0,sqr4T=1),check2()}function resetclick(){$("#b1").attr("value"," "),$("#b2").attr("value"," "),$("#b3").attr("value"," "),$("#b4").attr("value"," "),$("#b5").attr("value"," "),$("#b6").attr("value"," "),$("#b7").attr("value"," "),$("#b8").attr("value"," "),$("#b9").attr("value"," "),$("#win").hide(),$("#loss").hide(),$("#p1win").hide(),$("#p2win").hide(),$("#draw").hide(),$("#reset").hide(),$("#resetbtn").hide(), sqr1T=0,sqr2T=0,sqr3T=0,sqr4T=0,sqr5T=0,sqr6T=0,sqr7T=0,sqr8T=0,sqr9T=0,turrn(),turn=0,moveCount=0}function reset(){turnp(),$("#reset").show(), $("#resetbtn").show(),$("#turn").hide(), 0==turn?($("#p2").show(),$("#p1").hide()):($("#p1").show(),$("#p2").hide())}function wb(){$("#win").show()}function p1w(){$("#p1win").show()}function p2w() {$("#p2win").show()}function lb(){$("#loss").show()}function db(){$("#draw").show()}function resetter(){reset()}var sqr1,sqr2,sqr3,sqr4,sqr5,sqr6,sqr7,sqr8,sqr9,sqr1T=0,sqr2T=0,sqr3T=0,sqr4T=0,sqr5T=0,sqr6T=0,sqr7T=0,sqr8T=0,sqr9T=0,moveCount=0,turn=0;
Get Answers For Free
Most questions answered within 1 hours.