added pretty reset button

diff --git a/ai.js b/ai.js
index 4908f52..782d04c 100644 (file)
--- a/ai.js
+++ b/ai.js
@@ -34,16 +34,22 @@ $(document).ready(function(){
                 ctx.stroke()
             }
         }
+        this.clear = function() {
+            ctx.clearRect(this.x+5, this.y+5, this.size-20, this.size-20);
+            this.state = 0;
+        }
     }
 
     function board(size, startingActor) {
         var self = this;
         this.size = size;
+        this.turn = startingActor;
         this.cellSize = canvas.width / size;
+        this.gameOver = 0;
         this.cells = [];
-        this.turn = startingActor;
         this.init = function() {
             ctx.lineWidth = 2;
+            ctx.strokeStyle = 'black';
             for (var i = 0; i < this.size; i++) {
                 this.cells.push([]);
                 if (i > 0) {
@@ -66,6 +72,15 @@ $(document).ready(function(){
             }
             return this;
         }
+        this.restart = function() {
+            for (var i = 0; i < this.size; i++) {
+                for (var ii = 0; ii < this.size; ii++) {
+                    this.cells[i][ii].clear();
+                }
+            }
+            this.gameOver = 0;
+            this.turn = startingActor;
+        }
         this.serialize = function() {
             var serial = []
             for (var i = 0; i < this.cells.length; i++) {
@@ -79,7 +94,7 @@ $(document).ready(function(){
     }
 
     $('#board').on('click', function(e){
-        if (!tictactoe && tictactoe.turn != 'player') return;
+        if (!tictactoe || tictactoe.gameOver || tictactoe.turn != 'player') return;
         event = e || window.event;
         x = event.pageX - canvas.offsetLeft,
         y = event.pageY - canvas.offsetTop;
@@ -89,13 +104,16 @@ $(document).ready(function(){
                 if (x > cell.x && x < cell.x + cell.size
                     && y > cell.y && y < cell.y + cell.size) {
                     if (!cell.state) {
+                        tictactoe.turn = 'ai';
                         var player = 'x';
                         cell.play(player);
-                        if (!endCondition(tictactoe.serialize(), true)) {
+                        endCondition(tictactoe.serialize(), 'paint');
+                        if (!tictactoe.gameOver) {
                             var aiMove = minimax(tictactoe.serialize(),
                                 player == 'o' ? 'x' : 'o').move;
                             tictactoe.cells[aiMove[1]][aiMove[0]].play(player == 'o' ? 'x' : 'o');
-                            endCondition(tictactoe.serialize(), true);
+                            endCondition(tictactoe.serialize(), 'paint');
+                            tictactoe.turn = 'player';
                         }
                         return;
                     }
@@ -104,6 +122,12 @@ $(document).ready(function(){
         }
     });
 
+    $('#restart').on('click', function(e){
+            tictactoe.restart();
+            $('#board').fadeTo('slow', 1);
+            $('#restart').fadeOut('slow');
+    });
+
     function generate(state, player) {
         var possibilities = [];
         for (var i = 0; i < state.length; i++) {
@@ -130,56 +154,55 @@ $(document).ready(function(){
         var fullCells = 0;
         var size = state.length;
         var eog = false;
-        for (var i = 0; i < size; i++) {
+        for (var i = 0; i < size && !eog; i++) {
             horizontalPlayer = state[i][0];
             horizontalTally = 0;
-            for (var ii = 0; ii < size; ii++) {
+            for (var ii = 0; ii < size && !eog; ii++) {
                 if (state[i][ii] == horizontalPlayer)
                     horizontalTally++;
                 if (horizontalTally == size) {
                     if (paint)
                         for (var iii = 0; iii < size; iii++)
                             tictactoe.cells[i][iii].play(horizontalPlayer, 'green');
-                    return horizontalPlayer;
+                    eog = horizontalPlayer;
                 }
                 if (state[i][ii] !== 0) {
                     fullCells++;
-                    if (fullCells == size*size) {
-                        return 'tie';
-                    }
+                    if (fullCells == size*size)
+                        eog = 'tie';
                 }
             }
         }
-        for (var i = 0; i < size; i++) {
+        for (var i = 0; i < size && !eog; i++) {
             verticalPlayer = state[0][i];
             verticalTally = 0;
-            for (var ii = 0; ii < size; ii++) {
+            for (var ii = 0; ii < size && !eog; ii++) {
                 if (state[ii][i] == verticalPlayer)
                     verticalTally++;
                 if (verticalTally == size) {
                     if (paint)
                         for (var iii = 0; iii < size; iii++)
                             tictactoe.cells[iii][i].play(verticalPlayer, 'green');
-                    return verticalPlayer;
+                    eog = verticalPlayer;
                 }
             }
         }
-        for (var i = 0; i < size; i++) {
+        for (var i = 0; i < size && !eog; i++) {
             if (i == 0)
                 diagonalPlayer = state[0][0];
-            for (var ii = 0; ii < size; ii++) {
+            for (var ii = 0; ii < size && !eog; ii++) {
                 if (i == ii && state[i][ii] == diagonalPlayer)
                     diagonalTally++;
                 if (diagonalTally == size) {
                     if (paint)
                         for (var iii = 0; iii < size; iii++)
                             tictactoe.cells[iii][iii].play(diagonalPlayer, 'green');
-                    return diagonalPlayer;
+                    eog = diagonalPlayer;
                 }
             }
         }
-        for (var i = 0; i < size; i++) {
-            for (var ii = 0; ii < size; ii++) {
+        for (var i = 0; i < size && !eog; i++) {
+            for (var ii = 0; ii < size && !eog; ii++) {
                 if (i == 0 && ii == size-1)
                     antiDiagonalPlayer = state[0][size-1];
                 if (i == (size-1)-ii
@@ -190,10 +213,15 @@ $(document).ready(function(){
                     if (paint)
                         for (var i = 0; i < size; i++)
                             tictactoe.cells[i][(size-1)-i].play(eog, 'green');
-                    return antiDiagonalPlayer;
+                    eog = antiDiagonalPlayer;
                 }
             }
         }
+        if (eog && paint) {
+            tictactoe.gameOver = 1;
+            $('#board').fadeTo('slow', 0.2);
+            $('#restart').fadeIn('slow');
+        }
         return eog ? eog : false;
     }
 
@@ -208,7 +236,8 @@ $(document).ready(function(){
     }
 
     function minimax(state, player, activePlayer) {
-        var activePlayer = typeof activePlayer == 'undefined' ? (player == 'x' ? 'o' : 'x') : activePlayer;
+        var activePlayer = typeof activePlayer == 'undefined' ?
+                            (player == 'x' ? 'o' : 'x') : activePlayer;
         var nextPlayer = activePlayer == 'x' ? 'o' : 'x';
         var win = score(state, activePlayer);
         if (win !== false) {

diff --git a/index.php b/index.php
index 1be5f70..21179ed 100644 (file)
--- a/index.php
+++ b/index.php
@@ -8,5 +8,6 @@
   </head>
   <body>
     <canvas width='450px' height='450px' id='board'></canvas>
+    <div class='button' id='restart'>restart</div>
   </body>
 </html>

diff --git a/style.css b/style.css
index 1ae7188..a7860d4 100644 (file)
--- a/style.css
+++ b/style.css
@@ -4,5 +4,42 @@ body {
 
 #board {
     margin: 0px auto;
-    float: left;
+    position: absolute;
+}
+
+#controls {
+    font-family: Courier New;
+    margin-top: 30px;
+}
+
+.button {
+    font-family: Courier New;
+    -moz-box-shadow: inset 0px 1px 0px 0px #54a3f7;
+    -webkit-box-shadow: inset 0px 1px 0px 0px #54a3f7;
+    box-shadow: inset 0px 1px 0px 0px #54a3f7;
+    background-color: #007dc1;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    border: 1px solid #124d77;
+    display: inline-block;
+    cursor: pointer;
+    color: #ffffff;
+    font-size: 13px;
+    padding: 6px 24px;
+    text-shadow: 0px 1px 0px #154682;
+    top: 210px;
+    left: 172px;
+    position: relative;
+    display: none;
+    width: 52px;
+}
+
+.button:hover {
+    background-color: #0061a7;
+}
+
+.button:active {
+    position: relative;
+    top: 211px;
 }