Question

Part 1: Create the grid tic-tac-toe gameboard using buttons and iteration. Part 2: Human user gets...

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>

Homework Answers

Answer #1
<!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;
Know the answer?
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Not the answer you're looking for?
Ask your own homework help question
Similar Questions
ADVERTISEMENT
Need Online Homework Help?

Get Answers For Free
Most questions answered within 1 hours.

Ask a Question
ADVERTISEMENT