0

我做了一个井字游戏！只是为了好玩。它有效，但不能说一旦有人赢了。我使用 .inArray 在当前板上寻找成功的解决方案。这个想法是，一旦棋盘上出现一个获胜的方块组合，就会弹出一个警报（“你赢了 Bruh”）。也许 inArray 正在将 win 数组与所选元素进行比较，而不是将 win 数组的元素与所选元素进行比较？我难住了。如果您有兴趣，请查看 jsfiddle，如果您想通了，请留下回复。谢谢。http://jsfiddle.net/QH6W9/7/

//更新

我最终使用了一个幻方并检查 3 的组合是否加到 15 中，并使用可能的组合和 MySQL 数据库实现了自学和基本 AI。我使用了第二个脚本让计算机自行运行并建立数据库。这不是最完美的代码，但你自己看看..

//---//--//--//--//--//--//---//--//--//--//--//---//  
//   TIC-TAC-TOE:                                  //
//Good Old game. This version is meant to be a self//
//teaching system as a means to utilise and master //
//exchange between web-page, server and database.  //
//---//--//--//--//--//--//---//--//--//--//--//---//  

// Author: Dylan Madisetti
// Date: I don't remember?


$(document).ready(function(){

    var magiclist = [8,3,4,1,5,9,6,7,2]; //for humans          
    var squares = [8,3,4,1,5,9,6,7,2];  //Le Magic Square\\ 
    var xs = [];                         //------------//
    var os = [];                         //  8 | 3 | 4 //
    var x = 0;                           //----+---+---//
    var o = 0;                           //  1 | 5 | 9 //
    var gameover = -1;                   //----+---+---//
    var FirstMoves = [];                 //  6 | 7 | 2 //
    var SecondMoves = [];                //------------//
    var ThirdMoves = [];    //All Diagonals,rows and Columns add to 15\\            
    var moves = [];
    var i = 0;
    win = false;
    end = false;
    // I have a radio button for whether the human plays as x or o     
          if(document.getElementById('human').checked) {
              humanmove("x",x,xs,moves,squares,gameover,i,magiclist,"o",o,os); //human move    
          }else{
              ajaxmove("x",x,xs,moves,squares,gameover,i,magiclist,"o",o,os); //computer move
            x++;
            i++;             
            humanmove("o",o,os,moves,squares,gameover,i,magiclist,"x",x,xs); //human move
          };                
});

//---//--//--//--//--//--//--//--//--//--//--//---//  
// AjaxMove Desc. Checks if can win or block if it//
//can't, Sends data to MYSQLtest which in turn    //
//queries xos database and returns best move is   //
//then used.                                      //
//---//--//--//--//--//--//--//--//--//--//--//---//

function ajaxmove(status,counter,turn,moves,squares,gameover,i,magiclist,otherturn){

bestmove = 0;
if (turn.length >= 2){ //goes through each possibility
     FirstMoves = turn.slice(0);
     while (FirstMoves.length > 1){                        
           FirstX = FirstMoves[0];
           SecondMoves = FirstMoves.slice(1);
           ThirdMoves = squares.slice(0);
           $.each (SecondMoves,function(){
                if (ThirdMoves.length > 0){
                                     SecondX = this;
                         $.each (ThirdMoves,function(){
                             ThirdX = this;
                             if (FirstX + SecondX + ThirdX == 15){
                             bestmove = this;
                             };
                         });
                       ThirdMoves = ThirdMoves.slice(1);                                
                 };
           });
           FirstMoves = FirstMoves.slice(1); 
     }
};
if ((bestmove == 0) && (otherturn.length >= 2)){
     FirstMoves = otherturn.slice(0);
     while (FirstMoves.length > 1){
           FirstX = FirstMoves[0];
           SecondMoves = FirstMoves.slice(1);
           ThirdMoves = squares.slice(0);
           $.each (SecondMoves,function(){
                if (ThirdMoves.length > 0){
                      SecondX = this;
                         $.each (ThirdMoves,function(){
                             ThirdX = this;
                             if (FirstX + SecondX + ThirdX == 15){
                                 bestmove = this;
                             };
                         });
                       ThirdMoves = ThirdMoves.slice(1);                                
                 };
           });
           FirstMoves = FirstMoves.slice(1); 
     }  
};
if (bestmove == 0){
    $.ajax({type:'POST',
        async: false,
        url:'/XOsAI/MYSQLtest.php',
        data:{
            status: status,
            moves: moves,
            remaining: squares,
            gameover: gameover
        },
        success: 
            function(data){
                 bestmove = data;                                           
            }
   });
};
bestmove = Number(bestmove);
index = squares.indexOf(bestmove);
    turn[counter] = bestmove; 
select = magiclist.indexOf(bestmove);
    $('.square').eq(select).addClass(status);
    $('.square').eq(select).addClass('clicked');
    squares.splice(index,1);
    moves[i] = turn[counter];          
    gamecheck(turn,squares,moves); //game check (see below)
    if (win) {
         alert ("You Lose!");
         while (i <= 9){                          
               i++;
               moves[i] = "'" + status + "'";                      
         };                                   
         $.ajax({type:'POST',
               async: false,
               url:'/XOsAI/MYSQLtest.php',
               data:{
                    status: status,
                    moves: moves,
                    remaining: squares,
                    gameover: gameover
              }                      
        });
   };
};

//---//--//--//--//--//--//--//--//--//--//--//---//  
// HumanMove Desc. Allows human to make a move and//
//checks if they have won.Updates Database if so. //
//Also Triggers computer move.                    //
//---//--//--//--//--//--//--//--//--//--//--//---//

function humanmove(status,counter,turn,
              moves,squares,gameover,
              i,magiclist,otherstatus,
              othercounter,otherturn){      
  $(".XOs").on('click', '.square:not(.clicked)', function() {
       if (gameover == -1){
       if (!$(this).hasClass("clicked")) {
              $(this).addClass('clicked');
              $(this).addClass(status);
              data = magiclist[$('.square').index(this)];
              turn[counter] = data;
              index = squares.indexOf(data);
              squares.splice(index,1);
              moves[i] = turn[counter];
              gamecheck(turn,squares,moves); //game check (see below)
              if (!(end)){
              if (win) {
                      alert ("You Win!");
                      gameover = 1;
                      while (i <= 9){                          
                          i++;
                          moves[i] = "'" + status + "'";                      
                      };                                  
                      $.ajax({type:'POST',
                           async: false,
                           url:'/XOsAI/MYSQLtest.php',
                           data:{
                               status: status,
                               moves: moves,
                               remaining: squares,
                               gameover: gameover
                           }                     
                      });
                      $('.squares').addClass('clicked');
              };
              counter++;
              i++;
              if (gameover == -1){
              ajaxmove(otherstatus,othercounter,otherturn,moves,squares,gameover,i,magiclist,turn); //computer move           
              othercounter++;
              i++;
              if (win) {gameover = 1;};
              };
              }; 
       };
    };
  });
};

//---//--//--//--//--//--//--//--//--//--//--//---//  
//  GameCheck Desc. Runs through each possibility.//
//As data locations of divs are arranged in magic //
//square, checks if any three add to 15. Checks   //
//for cat game as well.                           //
//---//--//--//--//--//--//--//--//--//--//--//---//  

function gamecheck(turn,squares,moves){ 
    if (turn.length >= 3){
       FirstMoves = turn.slice(0);
       while (FirstMoves.length >= 3){                        
           FirstX = FirstMoves[0];
           SecondMoves = FirstMoves.slice(1);
           ThirdMoves = SecondMoves.slice(1);
           $.each (SecondMoves,function(){
                if (ThirdMoves.length > 0){
                      SecondX = this;
                         $.each (ThirdMoves,function(){
                             ThirdX = this;
                             if (FirstX + SecondX + ThirdX == 15){
                                 win = true;
                             };
                         });
                       ThirdMoves = ThirdMoves.slice(1);                                
                 };
           });
           FirstMoves = FirstMoves.slice(1); 
       }
   };

  if (!(squares.length > 0) && win == false) { //if any remain      
       alert ("You Draw!");
       gameover = 1;
       moves[9] = "'c'";                                                             
       $.ajax({type:'POST',  //ajax to tell server Cat Game
               async: false,
               url:'/XOsAI/MYSQLtest.php',
               data:{
                    status: "c",
                    moves: moves,
                    remaining: squares,
                    gameover: gameover
               }                      
       });
       end = true;
  };
};

和 php 如果有人有兴趣

//--------------------------------------------------------------------------
// 1) Connect to mysql database
//--------------------------------------------------------------------------
$con = mysqli_connect($host,$user,$pass,$databaseName);
$dbs = mysqli_select_db($con,$databaseName);

//--------------------------------------------------------------------------
// 2) Query database for bestmove or insert data if gameover
//--------------------------------------------------------------------------
$gameover = 0;
$col = 0;
$status = $_POST['status'];
$moves = $_POST['moves'];
$gameover = $_POST['gameover'];
$remaining = $_POST['remaining'];
$bestresult = 0;
if ($gameover < 0){
  $required = (count($remaining) * 50); //seemed large enough to make a smart move
  if (count($moves) > 0){
    foreach ($moves as $move){
      $columns[$col].=' AND ';
      $columns[$col].= '`';
      $columns[$col].= ($col + 1);
      $columns[$col].= '`=';
      $columns[$col].= $move;
      $col++;
    };    
  $moves = implode(' ',$columns); 
  };
  $sql = '
            SELECT *
            FROM xos
            WHERE status=\'';
  $sql .= $status;
  $sql .= '\' ';
  if (count($moves) > 0){
    $sql .= $moves ;
  };
  $results = mysqli_query($con,$sql); //fetch result
  $results = $results->num_rows;
  echo $con->error; 
if ($results > $required){
        if (count($moves) == 0){
          $col = 1;
      };
      $reset = $sql;
      foreach ($remaining as $bestmove){
          $sql .=' AND ';
          $sql .= '`';
          $sql .= $col;              
          $sql .= '`='; 
          $sql .= $bestmove;
          $sql .= ' ';
          $results = mysqli_query($con,$sql);
          $results = $results->num_rows;
          if ($con->error){
              echo $con->error ."\n";
              echo $sql .":";
              echo $results ."\n \n";
          }
          if ($results >= $bestresult){
              $bestresult = $results;
              $bestplay = $bestmove;
          };
          $sql = $reset;
      };  
}else{
    $sql = '
           SELECT *
           FROM xos
           WHERE status=\'c\'';
    if (count($moves) > 0){
        $sql .=' AND ';
        $sql .= $moves ;
    };
   $results = mysqli_query($con,$sql); //fetch result
   $results = $results->num_rows;
    if ($results > $required){
          if (count($moves) == 0){
          $col = 1;
        };
        $reset = $sql;
        foreach ($remaining as $bestmove){
          $sql .=' AND ';
          $sql .= '`';
          $sql .= $col;              
          $sql .= '`='; 
          $sql .= $bestmove;
          $sql .= ' ';
          $results = mysqli_query($con,$sql);
          $results = $results->num_rows;
          if ($con->error){
              echo $con->error ."\n";
              echo $sql .":";
              echo $results ."\n \n";
          }
          if ($results >= $bestresult){
              $bestresult = $results;
              $bestplay = $bestmove;
          };
          $sql = $reset;
      };
    }else{
    $max = count($remaining) - 1;
    $bestplay = rand(0,$max);
    $bestplay= $remaining[$bestplay];
    };
  };echo $bestplay;
}else{
$sql = "INSERT INTO `xos`(`1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `Status`) VALUES (";
      for ($i = 0; $i <= 8; $i++) {
          $sql .= $moves[$i];
          $sql .= ",";
      };
      $sql .= "";
      $sql .= $moves[9];
      $sql .= ")";
      if ($con->query($sql) === false){
          echo $con->error;
          echo $sql;
      };     
};
4

3 回答 3

2

乍一看，它看起来像在

$(wins).each(function(){
    var maybe = $.inArray(this,xs); //if Xs match combos win
    ...
}

您正在检查是否array xs在当前检查的获胜组合中找到 ，而不仅仅是比较this（xs两个一维数组）。【试过$.inArray(wins, xs)了，还是不行。】

会是这样吗？

更新：此版本有效：http: //jsfiddle.net/QH6W9/9/

我修复了您的代码以检索 X'ed 字段的 ID：

var xs = $(".x").map(function(i, el) {
             return parseInt($(el).attr('id'))
         }).get(); // get ids as array

还有获胜情况的检测：

$(wins).each(function() {
    var found = true;
    for(var i =0; i<this.length; i++) {
        found &= ($.inArray(this[i], xs) > -1);
    }
    if (!found) return;
    alert("You Won Bruh");
    var all = $(".square");
    $(all).addclass('clicked'); //stops more turns
    return;
});
于 2012-05-10T00:03:17.877 回答
1

您的程序中有两个问题：

首先，您有以下内容：

parseInt(数字); xs[i] = 数字；

xs[i]仍然得到一个字符串，因为parseInt()没有修改它的参数。相反，它返回数值。所以我将该代码更改为更紧凑：

xs[i] = parseInt(number);

其次，在您的$(wins).each()循环中，您正在使用$.inArray()，但您已经拥有单独的数组，因此您真的想在那里进行数组子集比较。由于 Javascript/jQuery 没有内置的数组子集函数，我只是比较了数组中的每个元素：

$(wins).each(function(){
    console.log( 'template: ' + this );
    var allIn = true;
    for( var i=0; i<this.length; i++ ) {
        console.log( this[i] );
        if( $.inArray( this[i], xs ) == -1 ) allIn = false;
    }
if ( allIn ){
    alert("You Won Bruh");

现在它可以工作了。我只是为 X 做的，不是为 O 做的……我会留给你的！你可以在这里看到我的 jsfiddle 解决方案：

http://jsfiddle.net/HxGZE/2/

编辑：我的解决方案现在有效。请参阅 jsfiddle 以获取证据。

于 2012-05-10T00:25:23.020 回答
1

你有几个问题。

首先，您将 的所有位置.x放入一个数组中，然后查看该数组是否在wins数组中。

不幸的是，只有当项目是相同$.inArray()的项目时才会返回索引，而不是如果它们具有匹配的值。

$.inArray([4,5,6], [[1,2,3], [4,5,6]]) // returns -1  

var ary1 = [1,2,3];
var ary2 = [4,5,6];
$.inArray(ary2, [ary1, ary2]); // returns 1

$.inArray(ary2, [ary1, [4,5,6]]); // returns -1

其次，如果您在游戏中处于拥有超过 3 个 X 的状态，您将永远无法匹配获胜位置：

X O _
X X O
X O _

在这种情况下xs将等于[1,4,5,7]。这是一个获胜的位置，但不会匹配您的任何阵列。

还有许多其他方法可以解决这个问题。给定您的wins数组，最简单的方法是遍历每个数组并检查div数组中每个位置的X. 如果是这样，停止并宣布获胜。

演示：http: //jsfiddle.net/jtbowden/4BDwt/1/

请注意，我在此示例中清理了一些其他代码。

  • 删除了多余的clickable类，并使用 .square:not(.clicked).
  • 替换.click()为.on()。
  • 删除了.squareID，只使用div顺序XOs作为位置，.eq()与数组位置一起使用。ID 不应该以数字开头，最好将数据存储在 jQuery 数据属性中，例如<div data-location="1">，然后使用.data('location'). 但是，在这种情况下，不需要它，因为 div 顺序告诉我们它在哪里。
  • 替换$(array).each(function(){})为$.each(array, function(){})。这是迭代不是 jQuery 对象的普通数组的正确方法。
于 2012-05-10T00:25:41.743 回答