Skip to content

Instantly share code, notes, and snippets.

@thuongvu

thuongvu/0_script.js

Last active August 29, 2015 13:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save thuongvu/9965423 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save thuongvu/9965423 to your computer and use it in GitHub Desktop.
Download ZIP
Tic Tac Toe game in "vanilla" JavaScript
Raw
0_script.js
// Main script
(function() {
var Game = {
startGame: function() {
this.inSession = 1,
this.player1Turn = true,
this.claimed = [],
this.gameBoardState = [null, 1,2,3,4,5,6,7,8,9],
this.winner = null;
this.count = 0;
},
endGame: function() {
this.inSession = 0;
},
claimSpot: function(element) {
this.count++;
this.claimed.push(element.toString());
var elementNum = parseInt(element.toString()[3]);
this.player1Turn ? this.gameBoardState[elementNum] = "player1" : this.gameBoardState[elementNum] = "player2";
this.player1Turn = !this.player1Turn;
},
checkIfAvailable: function(element) {
var isAvailable = true;
for (var i = 0; i < this.claimed.length; i++) {
if (this.claimed[i] === element) {
isAvailable = false;
break;
};
};
return isAvailable;
},
checkIfWinner: function() {
if ( (this.gameBoardState[1] === this.gameBoardState[2] && this.gameBoardState[2] === this.gameBoardState[3])
|| (this.gameBoardState[4] === this.gameBoardState[5] && this.gameBoardState[5] === this.gameBoardState[6])
|| (this.gameBoardState[7] === this.gameBoardState[8] && this.gameBoardState[8] === this.gameBoardState[9])
|| (this.gameBoardState[1] === this.gameBoardState[4] && this.gameBoardState[4] === this.gameBoardState[7])
|| (this.gameBoardState[2] === this.gameBoardState[5] && this.gameBoardState[5] === this.gameBoardState[8])
|| (this.gameBoardState[3] === this.gameBoardState[6] && this.gameBoardState[6] === this.gameBoardState[9])
|| (this.gameBoardState[1] === this.gameBoardState[5] && this.gameBoardState[5] === this.gameBoardState[9])
|| (this.gameBoardState[3] === this.gameBoardState[5] && this.gameBoardState[5] === this.gameBoardState[7]) ) {
if (!this.player1Turn) {
this.winner = "player1";
return "player1";
} else {
this.winner = "player2";
return "player2";
};
};
},
checkIfGameInSession: function() {
if (this.inSession) {
return true;
} else {
return false;
};
},
checkIfTie: function() {
if (this.count === 9) {
return true;
} else {
return false;
};
}
};
var GameBoardDOM = {
changeClaimedColorNCursor: function(target) {
Game.player1Turn ? target.style["background-color"] = "blue" : target.style["background-color"] = "orange";
target.style["cursor"] = "default";
},
statusAnnounceNextPlayer: function() {
var nextTurn = null;
Game.player1Turn ? (nextTurn = 'Player1 (blue)') : (nextTurn ='Player2 (orange)');
document.getElementById("status").innerText = nextTurn + "'s turn.";
},
statusAnnounceWinner: function() {
var winner = null;
Game.player1Turn ? (winner = 'Player2 (orange)') : (winner ='Player1 (blue)');
document.getElementById("status").innerText = winner + " is the winner! Click start/reset to play again.";
},
resetBoardDOM: function () {
var gameButtons = document.getElementsByClassName("gameButtons");
for (var i = 0; i < gameButtons.length; i++) {
gameButtons[i].style["background-color"] = "grey";
gameButtons[i].style["cursor"] = "pointer";
};
},
statusAnnounceTie: function() {
document.getElementById("status").innerText = "It's a tie! Play again!";
}
};
var EventHandlerUtility = {
getEvent: function(event) {
return event ? event: window.event;
},
addHandler: function(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
};
},
removeHandler: function(element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.attachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
};
},
getTarget: function(event) {
return event.target || event.srcElement;
}
};
var clickHandler = function() {
var target = null;
event = EventHandlerUtility.getEvent(event);
target = EventHandlerUtility.getTarget(event);
switch (target.className) {
case "gameButtons":
if (Game.inSession === 1) {
if (Game.checkIfAvailable.call(Game, target.id) == true) {
GameBoardDOM.changeClaimedColorNCursor(target);
Game.claimSpot.call(Game, target.id);
GameBoardDOM.statusAnnounceNextPlayer();
if (Game.checkIfWinner.call(Game)) {
Game.endGame.call(Game);
GameBoardDOM.statusAnnounceWinner();
} else if (Game.checkIfTie.call(Game) == true) {
Game.endGame.call(Game);
GameBoardDOM.statusAnnounceTie();
};
};
};
break;
case "gameOptions":
GameBoardDOM.resetBoardDOM();
Game.startGame.apply(Game);
GameBoardDOM.statusAnnounceNextPlayer();
break;
};
};
EventHandlerUtility.addHandler(document.body, "click", clickHandler);
EventHandlerUtility.addHandler(window, "unload", function(event) {
EventHandlerUtility.removeHandler(document.body, "click", clickHandler);
});
})();
Raw
1_index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tic tac toe</title>
<link rel="stylesheet" href="2_style.css"></link>
</head>
<body>
<div id="container">
<div id="menu">
<div id="status">Start the game when you're ready! </div>
<button class="gameOptions" id="start">Start/reset game</button>
</div>
<div class="row">
<div id="btn1" class="gameButtons"></div>
<div id="btn2" class="gameButtons"></div>
<div id="btn3" class="gameButtons"></div>
</div>
<div class="row">
<div id="btn4" class="gameButtons"></div>
<div id="btn5" class="gameButtons"></div>
<div id="btn6" class="gameButtons"></div>
</div>
<div class="row">
<div id="btn7" class="gameButtons"></div>
<div id="btn8" class="gameButtons"></div>
<div id="btn9" class="gameButtons"></div>
</div>
</div>
<script src="0_script.js"></script>
</body>
</html>
Raw
2_style.css
.gameButtons {
width: 150px;
height: 150px;
background-color: grey;
display: inline-block;
border-radius: 3px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment