2017-06-20 9 views
0

私は初心者ですので、これは初めてのことです。私たちのコースでは、SQLインタラクションのためにAjaxとPHPを使用して、対戦ゲームを作成する必要があります。私たちは、例として、javascriptを使ってクライアント側のtictactoeを使用しました。しかし今、私たちは最後のコードに立ち往生しています。基本的に私たちがやったことのボックスの値を取得するために、SQLクエリを作成し、このようなjavascriptの変数にすべてのそれらを割り当てられます。php/ajaxを使ったtictactoeは失敗し続ける

var box0 = <?=$box1?>; 
    var box1 = <?=$box2?>; 
    var box2 = <?=$box3?>; 
    var box3 = <?=$box4?>; 
    var box4 = <?=$box5?>; 
    var box5 = <?=$box6?>; 
    var box6 = <?=$box7?>; 
    var box7 = <?=$box8?>; 
    var box8 = <?=$box9?>; 

その後、我々は我々ができた最後のオプションとして長いjavascriptのコードを書きました(誰が勝つかを決定するために)値を追跡する2つの配列を作成し、空白が埋め込まれているかどうか(すでにブロックが埋められているのを変更しないようにする)を考えてください。 `

 //Global Variables 

     var painted; 

     var content; 

     var winningCombinations; 

     //Instanciate Arrays 

     window.onload = function() { 


      painted = new Array(); 

      content = new Array(); 

      winningCombinations = [ 
       [0, 1, 2], 
       [3, 4, 5], 
       [6, 7, 8], 
       [0, 3, 6], 
       [1, 4, 7], 
       [2, 5, 8], 
       [0, 4, 8], 
       [2, 4, 6] 
      ]; 

      if (box0 == " ") { 
       painted[0] = "false"; 
       content[0] = ""; 
      } else { 
       painted[0] = "true"; 
       content[0] = box0; 
      } 
      if (box1 == " ") { 
       painted[1] = "false"; 
       content[1] = ""; 
      } else { 
       painted[1] = "true"; 
       content[1] = box1; 
      } 
      if (box2 == " ") { 
       painted[2] = "false"; 
       content[2] = ""; 
      } else { 
       painted[2] = "true"; 
       content[2] = box2; 
      } 
      if (box3 == " ") { 
       painted[3] = "false"; 
       content[3] = ""; 
      } else { 
       painted[3] = "true"; 
       content[3] = box3; 
      } 
      if (box4 == " ") { 
       painted[4] = "false"; 
       content[4] = ""; 
      } else { 
       painted[4] = "true"; 
       content[4] = box4; 
      } 
      if (box5 == " ") { 
       painted[5] = "false"; 
       content[5] = ""; 
      } else { 
       painted[5] = "true"; 
       content[5] = box5; 
      } 
      if (box6 == " ") { 
       painted[6] = "false"; 
       content[6] = ""; 
      } else { 
       painted[6] = "true"; 
       content[6] = box6; 
      } 
      if (box7 == " ") { 
       painted[7] = "false"; 
       content[7] = ""; 
      } else { 
       painted[7] = "true"; 
       content[7] = box7; 
      } 
      if (box8 == " ") { 
       painted[8] = "false"; 
       content[8] = ""; 
      } else { 
       painted[8] = "true"; 
       content[8] = box8; 
      } 
     }` 

だから、これは我々がチェックしたいデータを含む二つの配列を作成する必要がありますJavascriptを次のようになります。しかし、onclickハンドラによって起動された次のコードを実行しようとすると、何も起こりません。我々はboxClicked(boxid)を実行することにより、まったく応答がない理由

 //Game methods 

     function boxClicked(boxid) { 

      if (painted[boxid - 1] == "false") { 

       if (turn % 2 == 0) { 
        content[boxid - 1] = "X"; 
        $.ajax({ 
         type: "POST", 
         url: "add.php", 
         data: { 
          id: boxid, 
          weapon: "X" 
         } 
        }); 



       } else { 
        content[boxid - 1] = "O"; 
        $.ajax({ 
         type: "POST", 
         url: "add.php", 
         data: { 
          id: boxid, 
          weapon: "O" 
         } 
        }); 



       } 

       $.ajax({ 
        type: "POST", 
        url: "count.php", 
       }); 

       painted[boxid - 1] = "true"; 

       checkForWinners(content[boxid - 1]); 

       squaresFilled++; 

       if (squaresFilled == 11) { 

        alert("THE GAME IS OVER!"); 

       } 
       location.reload(true); 

      } else { 

       alert("THAT SPACE IS ALREADY FILLED"); 

      } 



     } 




     function checkForWinners(symbol) { 



      for (var a = 0; a < winningCombinations.length; a++) { 

       if (content[winningCombinations[a][0]] == symbol && content[winningCombinations[a][1]] == symbol && content[winningCombinations[a][2]] == symbol) { 

        alert(symbol + " WON!"); 

        if (symbol == "X") { 
         $.ajax({ 
          type: "POST", 
          url: "score.php", 
          data: { 
           player: "X" 
          } 
         }); 

        } 
        if (symbol == "O") { 
         $.ajax({ 
          type: "POST", 
          url: "/score.php", 
          data: { 
           player: "O" 
          } 
         }); 

        } 

        playAgain(); 

       } 

      } 



     } 

     function playAgain() { 

      y = confirm("PLAY AGAIN?"); 

      if (y == true) { 

       $.ajax({ 
        type: "POST", 
        url: ".resetcount.php", 
       }); 

       $.ajax({ 
        type: "POST", 
        url: "delete.php", 
        success: function() { 
         location.reload(true); 
        } 
       }); 

      } else { 

       alert("Thanks for playing!"); 

      } 



     } 

だから、基本的に、誰もが私たちに伝えることができますか?私たちはajaxを使ってadd.phpを実行し、新しい値でボードを更新することを期待しました。そして、コードは勝者、ゲームの終了、ボックスが既に埋め込まれているかどうかをチェックします。

+0

[あなたは、ブラウザの開発ツールでAJAXリクエスト/レスポンスを見たことがありますか?プロジェクトにjQueryライブラリを含めましたか?エラーが報告されていますか?あなたはこれをWebサーバー上で実行していますか?](http://jayblanchard.net/basics_of_jquery_ajax.html) –

答えて

0

まず、ブラウザのコンソールを使用することを強くお勧めします。そうしないと、痛みや涙がいっぱいです。 F12またはCtrl+Shift+Iを押して、ブラウザのコンソールを開きます。

スクリプトから、console.log()を呼び出してメッセージを記録できます。今

$.ajaxSuccess(function (event, jqXHR, ajaxOptions, data) { 
    console.log(ajaxOptions.url, data, textStatus, jqXHR); 
}); 

:...またはグローバルajaxSuccessハンドラを登録することにより、

$.ajax({ 
    type: "POST", 
    url: "add.php", 
    data: { 
    id: boxid, 
    weapon: "X" 
    } 
}).done(function (data, textStatus, jqXHR) { 
    console.log("add.php", data, textStatus, jqXHR); 
}); 

:どちらかの各$.ajaxコールにdoneハンドラを渡すことによって、あなたのAjaxリクエストのそれぞれをログに記録するのは良い考えかもしれPHPからJSにデータを渡す方法があります。

var box0 = ; 
var box1 = X; 
var box2 = ; 
var box3 = O; 
var box4 = O; 
var box5 = ; 
var box6 = X; 
var box7 = X; 
var box8 = ; 

注意不足している引用符:それは直接(ブラウザのURLバーにそのURLを貼り付けることによって)生成されたJSファイルを見て面白いかもしれ、あなたはおそらくこのようなものが表示されます。ソースコードを生成しようとすると、それが問題になります:10回以上9回、引用符で問題があります。エラーが起こりにくいソリューションは、Ajaxを介して共通のデータ交換フォーマット(JSON、XML、プレーンテキストなど)でデータを渡すことです。今の

、不足している引用符を追加してPHPを修正:

var box0 = "<?=$box1?>"; 
var box1 = "<?=$box2?>"; 
var box2 = "<?=$box3?>"; 
var box3 = "<?=$box4?>"; 
var box4 = "<?=$box5?>"; 
var box5 = "<?=$box6?>"; 
var box6 = "<?=$box7?>"; 
var box7 = "<?=$box8?>"; 
var box8 = "<?=$box9?>"; 

次にまた、あなたのクリックハンドラでconsole.logを追加したい場合があります。言ってるだけ。

残りのコードについては、すばらしい開発の世界であなたを欺くことはありませんが、それを行う方法は間違いありません。いくつかのヒント:

  • これらのすべてのテストは、ループとしてforにリファクタリングすることができました。
  • これらの9つの変数box0 ... box8は配列内にある可能性があります。
  • は、これら2つのアレイが不要ですpaintedcontentです。あなたはまた、

...幸運を2次元配列(3つの値それぞれの3つの配列を)検討するかもしれない
  • ;)

  • 関連する問題