AI Code and Drawing functions now working

Added the code for the AI and the functions that draw the X and 0 on the grid.
ItitErickBolanos · May 13, 2016 · 23be6ca · 23be6ca
1 parent d509ef6
commit 23be6ca
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 18 deletions.
diff --git a/js/Class.TTTBoard.js b/js/Class.TTTBoard.js
@@ -53,7 +53,6 @@ TTTBoard.prototype = {
     /*Returns one of the three constants EMPTY, PLAYERX, or PLAYERO
     that correspond to the contents of the board at position (row, col).*/
     square: function(row, col){
-      console.log(this.board);
         return this.board[row][col];
     },
 
@@ -127,21 +126,19 @@ TTTBoard.prototype = {
         lines.push(diag2);
 
         // check all lines
-        for (line in lines) {
-            if (new Set(line).length == 1 && line[0] != EMPTY){
+        for (var i = 0; i < lines.length; i++) {
+            var setLine = new Set(lines[i]);
+            if (setLine.size == 1 && lines[i][0] != EMPTY){
                 if (this.reverse){
-                    console.log("SWITCH");
-                    return switch_player(line[0]);
+                    return switch_player(lines[i][0]);
                 } else {
-                    console.log("LINE");
-                    return line[0];
+                    return lines[i][0];
                 }
             }
         }
 
         // no winner, check for draw
         if (this.get_empty_squares().length == 0) {
-            console.log("DRAW");
             return DRAW;
         }
 

diff --git a/js/Class.TTTGUI.js b/js/Class.TTTGUI.js
@@ -40,13 +40,12 @@ TTTGUI.prototype = {
 
         // Set handlers
         $("#canvas").mousedown(function(event){
-          console.log(event);
-          that.click([event.clientX - 713, event.clientY - 59]);
+          that.click([event.clientX - $(this).offset().left, event.clientY - $(this).offset().top]);
         });
 
         $("#canvas").parent().append("<div class='row'><button id='new_game' class='btn btn-warning'>New game</button></div>");
         $("#new_game").click(function(){
-            this.newgame();
+            that.newgame();
         });
         //this.label = this.frame.add_label("");
     },
@@ -132,8 +131,6 @@ TTTGUI.prototype = {
       y -= canvas.offsetTop;¨*/
       if (this.inprogress && (this.turn == this.humanplayer)){
           pos = this.get_grid_from_coords(position);
-          console.log(pos);
-          console.log(this.board.square(pos[0], pos[1]));
           if (this.board.square(pos[0], pos[1]) == EMPTY){
               this.board.move(pos[0], pos[1], this.humanplayer);
               this.turn = this.aiplayer;
@@ -151,8 +148,7 @@ TTTGUI.prototype = {
     */
     aimove: function(){
         if (this.inprogress && (this.turn == this.aiplayer)){
-            pos = this.aifunction(this.board, this.aiplayer,
-                                        this.ntrials);
+            pos = this.aifunction(this.board, this.aiplayer, this.ntrials);
             if (this.board.square(pos[0], pos[1]) == EMPTY){
                 this.board.move(pos[0], pos[1], this.aiplayer);
             }

diff --git a/js/tic-tac-toe.js b/js/tic-tac-toe.js
@@ -1,10 +1,44 @@
+var SCORES = {
+              2: 1,
+              4: 0,
+              3: -1
+             };
+
 var app = angular.module("TicTacToe", []);
 
 app.controller("TTTController", ['$scope', function($scope){
     var ticTacGUI = new TTTGUI(3, PLAYERO, move_wrapper, 1, false);
     var board = new TTTBoard(3);
 }]);
 
-function move_wrapper(){
-    return null;
+function mm_move(board, player){
+    var scores = [[], []], moves = [], board_copy, winner,
+        empty_squares = board.get_empty_squares();
+    //console.log(board.get_empty_squares());
+    for (var i = 0; i < empty_squares.length; i++){
+        board_copy = board.clone();
+        board_copy.move(empty_squares[i][0], empty_squares[i][1], player);
+        winner = board_copy.check_win();
+        if (winner != null){
+            scores[0].push(SCORES[winner]);
+            scores[1].push(empty_squares[i]);
+        } else {
+            next_move = mm_move(board_copy, switch_player(player));
+            scores[0].push(next_move[0]);
+            scores[1].push(empty_squares[i]);
+        }
+    }
+    if (player == PLAYERX) {
+        minimax = [Math.max(...scores[0]), scores[1][scores[0].indexOf(Math.max(...scores[0]))]];
+    } else {
+        minimax = [Math.min(...scores[0]), scores[1][scores[0].indexOf(Math.min(...scores[0]))]];
+    }
+
+    return minimax;
+    //return [2, [0, 1]];
+}
+
+function move_wrapper(board, player, trials){
+    var move = mm_move(board, player);
+    return move[1];
 }
diff --git a/tic-tac-toe.html b/tic-tac-toe.html
@@ -6,6 +6,7 @@
         <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
         <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
         <link href="http://erickbolanos.esy.es/bootstrap-social.css" rel="stylesheet" type="text/css"/>
+        <link href="../Resources/FontAwesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
         <link href="css/tic-tac-toe.css" rel="stylesheet" type="text/css"/>
     </head>
     <body>
@@ -29,7 +30,7 @@ <h3 class="panel-title">Tic Tac Toe</h3>
         </div>
 
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
-        <script type="text/javascript" src="https://use.fontawesome.com/ad4a96e219.js"></script>
+        <!--script type="text/javascript" src="https://use.fontawesome.com/ad4a96e219.js"></script-->
         <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script>
         <script type="text/javascript" src="js/Class.TTTBoard.js"></script>