TicTacToe : http://jsbin.com/nuxum/25/edit
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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment