Menu
Currently I am working on Tic Tac Toe and I am experience some difficulty with the win conditions.
I am using a .one(click, to ensure that no div can be clicked more than once.
The xoClick counts the times this has happened and toggles the switch of player between X and O
The win condition is the second if statement in the *$('.block').one('click',function(){*
I am using console.logs everywhere to view what the code can see in attempt to view where it breaks.
Currently, I am trying to view .r1c1 in the first if statement and it can't. This is my title.
The console.logs before the conditional can see the .html() of the .block but the conditional itself produces nothing in console.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TicTacToe</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<div class="r1">
<div class="r1c1 block"></div>
<div class="r1c2 block"></div>
<div class="r1c3 block"></div>
</div>
<div class="r2">
<div class="r2c1 block"></div>
<div class="r2c2 block"></div>
<div class="r2c3 block"></div>
</div>
<div class="r3">
<div class="r3c1 block"></div>
<div class="r3c2 block"></div>
<div class="r3c3 block"></div>
</div>
</div>
<aside>
<input type="submit" value="Reset" id="resetButton">
<p>Player 1 Score</p>
<p class="p1Score"></p>
<p>Player 2 Score</p>
<p class="p2Score"></p>
<p>Cat Game</p>
<p class="catGame"></p>
</aside>
<div>
<h1>Project Notes:</h1>
<p>This project was done entirely by me. There was no cheating by coping code. There were lots of Google Queries but none consisting of how to make Tic Tac Toe. Just looked up elements that I need in order to complete this personal project.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</body>
This is my CSS
body{
width: 100%;
height: 1000px;
margin: 0 auto;
}
.container{
width: 80%;
height: 450px;
display: inline-block;
float: left;
font-family: 'Montserrat', sans-serif;
}
/* For Spacing */
.r1,.r2,.r3{
width: 100%;
height: 33%;
display: inline-block;
float: left;
margin: -1px auto;
}
.r1c1,.r1c2,.r1c3,.r2c1,.r2c2,.r2c3,.r3c1,.r3c2,.r3c3{
width: 33%;
height: 98%;
display: inline-block;
float: left;
margin: 0 auto;
}
/* For Borders on the blocks */
/* Left Line for the top column */
.r1c1,.r1c2,.r2c1,.r2c2,.r3c1,.r3c2{
border-right: black 2px solid;
}
/* Bottom Lines for blocks needed. */
.r1c1,.r1c2,.r1c3,.r2c1,.r2c2,.r2c3{
border-bottom: black 2px solid;
}
/* Styling for aside */
aside{
padding: 5% 1% 1% 1%;
text-align: center;
font-family: 'Ubuntu', sans-serif;
}
/* for styling the X and O*/
.block{
font-size: 900%;
text-align: center;
}
And here is the JS
$(document).ready(function(){
// Variable that will be needed
var p1Score = 0;
var p2Score = 0;
var catGame = 0;
var xoClick = 0;
var player
// For the divs to be clicked one and track the clicks
$('.block').one('click',function(){
//for alternation
xoClick++
//console.log(xoClick);
//the alternating
if((xoClick % 2 === 0)===false){
player = "X";
$(this).html(player);
} else if((xoClick % 2 === 0)===true){
player = "O";
$(this).html(player);
} else {
null
}
//For Troubleshooting and monitoring
// console.log($('.r1c1').html());
// console.log($('.r1c2').html());
// console.log($('.r1c3').html());
// console.log($('.r2c1').html());
// console.log($('.r2c2').html());
// console.log($('.r2c3').html());
// console.log($('.r3c1').html());
// console.log($('.r3c2').html());
// console.log($('.r3c3').html());
//Win condition
if ($('.r1c1').html() === $('.r1c2').html() === $('.r1c3').html()){
console.log(player + ' Wins!');
console.log($('.r1c1').html());
// console.log($('.r1c2').html());
// console.log($('.r1c3').html());
} else if ($('.r2c1').html() === $('.r2c2').html() === $('.r2c3').html()){
console.log(player + ' Wins!');
} else if ($('.r3c1').html() === $('.r3c2').html() === $('.r3c3').html()){
console.log(player + ' Wins!');
} else if ($('.r1c1').html() === $('.r2c1').html() === $('.r3c1').html()){
console.log(player + ' Wins!');
} else if ($('.r1c2').html() === $('.r3c2').html() === $('.r3c2').html()){
console.log(player + ' Wins!');
} else if ($('.r3c3').html() === $('.r3c3').html() === $('.r3c3').html()){
console.log(player + ' Wins!');
} else if ($('.r1c1').html() === $('.r2c2').html() === $('.r3c3').html()){
console.log(player + ' Wins!');
} else if ($('.r1c3').html() === $('.r3c2').html() === $('.r3c1').html()){
console.log(player + ' Wins!');
} else { null };
//proving that no matter where I put it; it can see .r1c1
//console.log($('.r1c1').html());
});
// This is for the reset button
});
Please let me know if there is anything else you need.
The rest and counters will come later.
788
asked Feb 26 '26 08:02
For the win conditions, you cannot check the equality of three items with your current condition syntaxes. You can use a partial transitive relation and check if none of the items are blank.
So instead of using
$('.r1c1').html() === $('.r1c2').html() === $('.r1c3').html()
use
$('.r1c1').html() === $('.r1c2').html() &&
$('.r1c2').html() === $('.r1c3').html() &&
$('.r1c1').html() !== "" &&
$('.r1c2').html() !== "" &&
$('.r1c3').html() !== ""
It is like saying that if x = y, y = z, and neither x, y, nor z is blank, then execute the statements.
The reason for the blank test is that you do not want the script to announce a win if the equivalent values are blanks.
99
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
