<html>
<title>Tic Tac Toe</title>
<head>
<style>
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
select {
padding:3px;
margin: 0;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
-moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
background: #f8f8f8;
color:#888;
border:none;
outline:none;
display: inline-block;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
cursor:pointer;
width:100px;
}
.minContainer {
padding: 20px;
padding-right: 30px;
position: absolute;
}
table {
border-collapse:collapse;
table-layout: fixed;
border-spacing: 0;
width:250px;
height:300px;
margin-right:5px;
}
.td {
border: 2px solid #cccccc;
font-size:20px;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
color:#ccc;
line-height: 1.428571429;
width: 30px;
height: 32px;
min-width: 32px;
max-width: 302px;
min-height: 32px;
max-height: 32px;
text-align: center;
}
.X{
background-color: #FF8362;
}
.O{
background-color: #BB7365;
}
</style>
</head>
<body onload="fnLoad()">
<div class="container">
<div>
<select id="grid">
</select>
<button name="NewGame" class="newGame" value="Start a New Game" onClick="fnNewGame()">Start a New Game</button>
</div>
<div class="minContainer">
<table class="row" id="game"></table>
</div>
</div>
<script>
var turn = 'X';
var score = {
'X': 0,
'O': 0
};
var gridValue = 0;
function fnLoad() {
var select = document.getElementById("grid");
for (i = 3; i <= 100; i += 1) {
var option = document.createElement('option');
select.options[select.options.length] = new Option(i + ' X ' + i, i);
}
addEvent(document.getElementById("game"), "click", fnChoose);
fnNewGame();
}
function addEvent(element, eventName, callback) {
if (element.addEventListener) {
element.addEventListener(eventName, callback, false);
} else if (element.attachEvent) {
element.attachEvent("on" + eventName, callback);
}
}
function fnChoose(e) {
if (e.target && e.target.nodeName == "TD") {
var targetElement = document.getElementById(e.target.id);
var prevTurn;
if ((targetElement.className).indexOf("disabled") == -1) {
targetElement.innerHTML = turn;
targetElement.classList.add('disabled');
targetElement.classList.add(turn);
score[turn] += 1;
prevTurn = turn;
turn = turn === "X" ? "O" : "X";
if (fndecide(targetElement, prevTurn)) {
alert(prevTurn + ' has won the game');
fnNewGame();
} else if ((score['X'] + score['O']) == (gridValue * gridValue)) {
alert('Draw!');
fnNewGame();
}
}
}
}
function fndecide(targetElement, prevTurn) {
var UL = document.getElementById('game');
var elements, i, j, cnt;
if (score[prevTurn] >= gridValue) {
var classes = targetElement.className.split(/\s+/);
for (i = 0; i < classes.length; i += 1) {
cnt = 0;
if (classes[i].indexOf('row') !== -1 || classes[i].indexOf('col') !== -1 || classes[i].indexOf('dia') !== -1) {
elements = UL.getElementsByClassName(classes[i]);
for (j = 0; j < elements.length; j += 1) {
if (elements[j].innerHTML == prevTurn) {
cnt += 1;
}
}
if (cnt == gridValue) {
return true;
}
}
}
}
return false;
}
function fnNewGame() {
var gameUL = document.getElementById("game");
if (gameUL.innerHTML !== '') {
gameUL.innerHTML = null;
score = {
'X': 0,
'O': 0
};
turn = 'X';
gridValue = 0;
}
var select = document.getElementById("grid");
gridValue = select.options[select.selectedIndex].value;
var i, j, li, k = 0,
classLists;
var gridAdd = +gridValue + 1;
for (i = 1; i <= gridValue; i += 1) {
tr = document.createElement('tr');
for (j = 1; j <= gridValue; j += 1) {
k += 1;
li = document.createElement('td');
li.setAttribute("id", 'li' + k);
classLists = 'td row' + i + ' col' + j;
if (i === j) {
classLists = 'td row' + i + ' col' + j + ' dia0';
}
if ((i + j) === gridAdd) {
classLists = 'td row' + i + ' col' + j + ' dia1';
}
if (!isEven(gridValue) && (Math.round(gridValue / 2) === i && Math.round(gridValue / 2) === j))
classLists = 'td row' + i + ' col' + j + ' dia0 dia1';
li.className = classLists;
tr.appendChild(li);
}
gameUL.appendChild(tr);
}
}
function isEven(value) {
if (value % 2 == 0)
return true;
else
return false;
}
</script>
</body>
</html>
No comments:
Post a Comment