Skip to content

Instantly share code, notes, and snippets.

@evitolins evitolins/app.js
Created Jan 21, 2015

Embed
What would you like to do?
var app = (function () {
"use strict";
/*
Game Settings
0 = blank
1 = player 1
2 = player 2
*/
var current_player = 1;
var turn = 0;
var board = [
[0, 0, 0],
[0, 0, 0],
[0, 0, 0]
];
var elem = {};
elem.btn1 = document.getElementsByTagName('button')[0];
elem.msg = document.getElementById('message');
elem.space_0 = document.getElementById('space_0');
elem.space_1 = document.getElementById('space_1');
elem.space_2 = document.getElementById('space_2');
elem.space_3 = document.getElementById('space_3');
elem.space_4 = document.getElementById('space_4');
elem.space_5 = document.getElementById('space_5');
elem.space_6 = document.getElementById('space_6');
elem.space_7 = document.getElementById('space_7');
elem.space_8 = document.getElementById('space_8');
var spaces = [
[elem.space_0, elem.space_1, elem.space_2],
[elem.space_3, elem.space_4, elem.space_5],
[elem.space_6, elem.space_7, elem.space_8]
];
var renderMessage = function (msg) {
elem.msg.innerHTML = msg;
};
var renderValue = function (val) {
if (val === 0) return " ";
if (val === 1) return "x";
if (val === 2) return "o";
};
var renderBoard = function () {
var i, ii;
for (i=0; i<board.length; i++) {
for (ii=0; ii<board[i].length; ii++) {
spaces[i][ii].innerHTML = renderValue(board[i][ii]);
}
}
};
var gameStatus = function () {
var b = board;
// Across
if (b[0][0] === b[0][1] && b[0][0] === b[0][2] && b[0][0] > 0) return b[0][0];
if (b[1][0] === b[1][1] && b[1][0] === b[1][2] && b[1][0] > 0) return b[1][0];
if (b[2][0] === b[2][1] && b[2][0] === b[2][2] && b[2][0] > 0) return b[2][0];
// Down
if (b[0][0] === b[1][0] && b[0][0] === b[2][0] && b[0][0] > 0) return b[0][0];
if (b[0][1] === b[1][1] && b[0][1] === b[2][1] && b[0][1] > 0) return b[0][1];
if (b[0][2] === b[1][2] && b[0][2] === b[2][2] && b[0][2] > 0) return b[0][2];
// Diagonal
if (b[0][0] === b[1][1] && b[0][0] === b[2][2] && b[0][0] > 0) return b[0][0];
if (b[2][0] === b[1][1] && b[2][0] === b[0][2] && b[2][0] > 0) return b[2][0];
// Draw
if (turn >= 9) return 0;
return undefined;
};
var nextTurn = function (player) {
turn++;
current_player = (player === 1) ? 2 : 1;
status = gameStatus();
if (status !== "undefined") {
// Game Over
if (status > 0) {
renderMessage("Player " + status + " is the winner!!!");
} else {
renderMessage("The game was a draw.");
}
} else {
// Next Turn
renderMessage("It is now player #" + current_player + "'s turn...");
}
};
var markBoard = function (player, pos) {
var x = pos[0],
y = pos[1];
if (turn >= 9) return;
if (board[x][y] === 0) {
board[x][y] = player;
renderBoard();
nextTurn(player);
}
else {
renderMessage("PLEASE TRY AGAIN.");
}
};
var init = function () {
// Reset Settings
current_player = 1;
turn = 0;
board = [
[0, 0, 0],
[0, 0, 0],
[0, 0, 0]
];
renderBoard();
renderMessage("It is now player #" + current_player + "'s turn...");
};
// Event Listeners
elem.btn1.addEventListener('click', function(){
init();
});
elem.space_0.addEventListener('click', function(){
markBoard(current_player, [0, 0]);
});
elem.space_1.addEventListener('click', function(){
markBoard(current_player, [0, 1]);
});
elem.space_2.addEventListener('click', function(){
markBoard(current_player, [0, 2]);
});
elem.space_3.addEventListener('click', function(){
markBoard(current_player, [1, 0]);
});
elem.space_4.addEventListener('click', function(){
markBoard(current_player, [1, 1]);
});
elem.space_5.addEventListener('click', function(){
markBoard(current_player, [1, 2]);
});
elem.space_6.addEventListener('click', function(){
markBoard(current_player, [2, 0]);
});
elem.space_7.addEventListener('click', function(){
markBoard(current_player, [2, 1]);
});
elem.space_8.addEventListener('click', function(){
markBoard(current_player, [2, 2]);
});
})();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<table>
<tr>
<td id="space_0"></td>
<td id="space_1"></td>
<td id="space_2"></td>
</tr>
<tr>
<td id="space_3"></td>
<td id="space_4"></td>
<td id="space_5"></td>
</tr>
<tr>
<td id="space_6"></td>
<td id="space_7"></td>
<td id="space_8"></td>
</tr>
</table>
<button>Play Tic-Tac-Toe</button>
<div id="message"></div>
</body>
</html>
table {
width:240px;
height: 240px;
border: 1px solid #aaa;
table-layout:fixed;
cursor: pointer;
}
td {
border: 1px solid #aaa;
text-align: center;
vertical-align: middle;
font-size: 60px;
font-family: sans-serif;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.