0

三目並べゲームを作りました！楽しみのためだけに。それはすべて機能しますが、誰かが勝ったかどうかはわかりません。.inArray を使用して、現在のボードで勝てるソリューションを探しました。アイデアは、正方形の勝利の組み合わせがボード上にあると、アラートがポップアップすることです（「あなたはブルーを獲得しました」）。たぶん、inArray は、勝利配列の要素と選択された要素を比較するのではなく、勝利配列と選択された要素を比較していますか? 私は困惑しています。興味がある場合は jsfiddle を確認し、理解した場合は返信を残してください。ありがとう。http://jsfiddle.net/QH6W9/7/

//更新

私は最終的に魔方陣を使用し、3 の組み合わせが 15 に追加されたかどうかを確認し、可能な組み合わせと MySQL データベースを使用して自己教育と基本的な AI を実装しました。2 番目のスクリプトを使用して、コンピューターが自己再生し、データベースを構築できるようにしました。これは最も完璧なコードではありませんが、自分の目で確かめてください..

//---//--//--//--//--//--//---//--//--//--//--//---//  
//   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
    ...
}

（両方の1次元配列）と比較するarray xsだけでなく、現在チェックされている勝利の組み合わせに が含まれているかどうかをチェックしています。【やってみたけどうまくいかない】thisxs$.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

プログラムに2つの問題がありました。

まず、次のようになりました。

parseInt（number）; 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

次に、ゲーム内でXが3つを超える状態にある場合、勝ちポジションに一致することはありません。

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順序を使用します。IDは数字で始めることはできません。また、データをのようなjQueryデータ属性に格納し、で取得することをお勧めします。ただし、この場合、divの順序でどこにあるかがわかるため、必要ありませんでした。XOs.eq()<div data-location="1">.data('location')
  • に置き換えられまし$(array).each(function(){})た$.each(array, function(){})。これは、jQueryオブジェクトではない通常の配列を反復処理する正しい方法です。
于 2012-05-10T00:25:41.743 に答える