.game {
width:200px;
height:200px;
border-style:solid;
text-align: center;
}
.game:hover {
background-color: lightgrey;
}
body {
background-color: lightblue;
}
.choice {
background-color:white;
border-style: solid;
border-color: black;
height: 200px;
width: 200px;
text-align:center;
font-size: 200px;
}
.choice2 {
background-color:white;
border-style: solid;
border-color: black;
height: 100px;
width: 200px;
text-align:center;
font-size: 50px;
}
.blue {
color: blue;
}
.dialog {
margin: 40px;
}
.red {
color: red;
}
.tictactoe {
margin: 20px;
background-color: white;
}
.O {
color: blue;
}
.X {
color: red;
}
h1 {
font-size: 150px;
}
function set_up_boardgame() {
boardgame = {};
var html_setup = "<table class=\"tictactoe\">";
for (var i = 0; i < 3; i++){
html_setup += "<tr>";
for (var j = 0; j < 3; j++){
boardgame[i + "" + j] = 0;
html_setup += "<td class=\"game\"id=\"" + i + j + "\"></td>"
}
html_setup += "</tr>";
}
html_setup = html_setup + "</table>";
$(html_setup).appendTo("#boardgame")
}
function set_up_click_events(){
$(".game").on("click",function(e){
var current_square = $(this).attr('id');
if (boardgame[current_square] == "0"){
boardgame[current_square] = 1;
$("#"+current_square).html("<h1 class=\""+player+"\">" + player + "</h1>");
determine_winner()
current_player=computer;
}
});
}
function evaluate_position(){
rows={}
cols={}
diag={}
diag[0] = ""
diag[1] = ""
for (var i = 0; i < 3; i++){
for (var j = 0; j < 3; j++){
rows[i] = ""
cols[j] = ""
}
}
for (var i = 0; i < 3; i++){
for (var j = 0; j < 3; j++){
curr_pos=i + "" + j
rows[i] += boardgame[curr_pos];
cols[j] += boardgame[curr_pos];
if (i == j){
diag[0] += boardgame[curr_pos];
}
if ( (i == 1 && j == 1) || (i == 0 && j == 2) || (i == 2 && j == 0)) {
diag[1] += boardgame[curr_pos];
}
}
}
}
function legitimate_moves(hierarchy) {
score=new Array(8)
for (i=0; i <8; i++)
score[i]=new Array(2)
n = 0
for(var j=0; j < 3; j++){
eval = rows[j].split('');
eval.sort();
eval = eval.join('').trim()
score[n][0] = hierarchy.indexOf(eval);
score[n][1] = "rows:" + j;
n++
}
for(var j=0; j < 3; j++){
eval = cols[j].split('');
eval.sort();
eval = eval.join('').trim()
score[n][0] = hierarchy.indexOf(eval);
score[n][1] = "cols:" + j;
n++
}
for(var j=0; j < 2; j++){
eval = diag[j].split('');
eval.sort();
eval = eval.join('').trim()
score[n][0] = hierarchy.indexOf(eval);
score[n][1] = "diag:" + j;
n++
}
score = score.filter(function(ele){
return ele[0] > -1
})
score.sort(function(a,b){
if (a[0] > b[0]){
return 1
} else {
return -1
}
})
return 0
}
function make_move(){
direction = move.split(':')[0]
lane = move.split(':')[1]
if (direction == "rows"){
index = rows[lane].split('').indexOf("0")
move_choice = lane + "" + index
boardgame[move_choice] = 2;
$("#" + move_choice).html("<h1 class=\""+computer+"\">"+computer+" </h1>");
}
if (direction == "cols"){
index = cols[lane].split('').indexOf("0")
move_choice = index + "" + lane
boardgame[move_choice] = 2;
$("#" + move_choice).html("<h1 class=\""+computer+"\">"+computer+"</h1>");
}
if (direction == "diag"){
index = diag[lane].split('').indexOf("0")
if (lane == 0){
lane=index;
} else {
if (index == 1){
lane = index
} else if (index == 0) {
lane = 2
} else {
lane = 0
}
}
move_choice = index + "" + lane
boardgame[move_choice] = 2;
$("#" + move_choice).html("<h1 class=\""+computer+"\">"+computer+"</h1>");
}
}
function make_decision(){
if(score.length == 0){
alert("Draw!");
restart_boardgame()
} else {
move = score[0][1]
make_move()
}
}
function determine_winner(){
evaluate_position()
legitimate_moves([ "222"])
if (score.length > 0) {
alert("computer wins...")
restart_boardgame()
}
legitimate_moves([ "111"])
if (score.length > 0){
alert("player wins...")
restart_boardgame()
}
legitimate_moves([ "022", "011", "002", "001","012","000"])
if (score.length == 0){
alert("draw!")
restart_boardgame()
}
}
function computers_turn(){
evaluate_position()
legitimate_moves([ "022", "011", "002", "001","012","000"])
make_decision()
determine_winner()
}
function start_turns(){
function update(){
if (player != current_player){
computers_turn()
current_player=player;
}
setTimeout(update, 1000);
}
setTimeout(update, 1000);
}
function restart_boardgame(){
$("#boardgame").empty()
determine_side()
}
function game(player_choice){
player=player_choice
if (player == "O") {
computer = "X"
} else {
computer = "O"
}
set_up_boardgame()
set_up_click_events()
start_turns()
}
function determine_side(){
$("#boardgame").append(
'<table class="dialog">' +
'<tr><th class="choice2" colspan="2" >choose a side?</th><tr>' +
'<td class=\"choice\ blue">O</td>' +
'<td class=\"choice\ red">X</td>' +
'</table>')
$(".choice").on("click",function(e){
var player_choice = $(this).html();
$("#boardgame").empty()
game(player_choice);
});
}
$(document).ready(function(){
determine_side()
});