console
$(document).ready(function(){
var player = 1;
$(".block").click(function(){
var blockSelected = $(this);
if(blockSelected.hasClass("ex") || blockSelected.hasClass("oh")){
alert("Please select another block.");
}
else if(blockSelected.hasClass("game-over")){
alert("This game is finished. Please click 'RESET' to start a new game.");
}
else {
//player 1 goes X
if(player === 1){
blockSelected.addClass("ex").text("X");
if(checkVictory("ex")){
$(".victory-msg").text("Player " + player + "'s Victory!").fadeIn("slow");
$(".block").addClass("game-over");
}
player = 2;
}
//player 2 goes O
else {
blockSelected.addClass("oh").text("O");
if(checkVictory("oh")){
$(".victory-msg").text("Player " + player + "'s Victory!").fadeIn("slow");
$(".block").addClass("game-over");
}
player = 1;
}
}
});
$(".reset").click(function(){
$(".block").html("").removeClass("ex oh game-over");
$(".victory-msg").fadeOut("slow");
player = 1;
});
//victory checking function
//totally eight situations
function checkVictory(symbol){
//symbol is ex or oh
if($("#1").hasClass(symbol) && $("#2").hasClass(symbol)&& $("#3").hasClass(symbol)){
return true;
}
else if($("#4").hasClass(symbol) && $("#5").hasClass(symbol) && $("#6").hasClass(symbol)){
return true;
}
else if($("#7").hasClass(symbol) && $("#8").hasClass(symbol) && $("#9").hasClass(symbol)){
return true;
}
else if($("#1").hasClass(symbol) && $("#4").hasClass(symbol) && $("#7").hasClass(symbol)){
return true;
}
else if($("#2").hasClass(symbol) && $("#5").hasClass(symbol) && $("#8").hasClass(symbol)){
return true;
}
else if($("#3").hasClass(symbol) && $("#6").hasClass(symbol) && $("#9").hasClass(symbol)){
return true;
}
else if($("#1").hasClass(symbol) && $("#5").hasClass(symbol) && $("#9").hasClass(symbol)){
return true;
}
else if($("#3").hasClass(symbol) && $("#5").hasClass(symbol) && $("#7").hasClass(symbol)){
return true;
}
else {
return false;
}
}
});
<div class="container">
<div class="block" id="1"></div>
<div class="block" id="2"></div>
<div class="block" id="3"></div>
<div class="block" id="4"></div>
<div class="block" id="5"></div>
<div class="block" id="6"></div>
<div class="block" id="7"></div>
<div class="block" id="8"></div>
<div class="block" id="9"></div>
</div>
<button type="button" class="reset">RESET</button>
<div class="victory-msg"></div>
<footer>Designed by <a href="http://www.alenhu.com/" target="_blank">Alen Hu</a></footer>
body {
font-family: helvetica, sans-serif;
background: #d24d57;
color: #fff;
}
footer {
text-align: center;
}
footer a {
color: #fff;
}
.container {
background: #fff;
width: 462px;
height: 462px;
margin: 20px auto;
}
.block {
border: 2px solid #d24d57;
width: 150px;
height: 150px;
float: left;
color: #d24d57;
font-size: 60px;
text-align: center;
line-height: 150px;
cursor: pointer;
}
.block:hover,
.reset:hover {
background: #f5f5f5;
}
.reset {
border: none;
background: #fff;
color: #d24d57;
width: 462px;
height: 50px;
margin: 20px auto;
display: block;
cursor: pointer;
font-size: 24px;
letter-spacing: 0.2em;
}
.victory-msg {
width: 200px;
height: 50px;
background: #fff;
color: #d24d57;
font-size: 20px;
position: fixed;
right: 50px;
top: 250px;
display: none;
text-align: center;
line-height: 50px;
}