2017-06-09 8 views
0

私は自分のコードに問題があります。私は何が問題なのかを見極めようとしていますが、成功していないと本当に助けが必要です。ここでの問題は、コードが2人のプレイヤー(AIは1人のプレイヤーパートをまだやっていない)のためにうまく動作することですが、リセットボタンを押すと機能しません。すべての変数がリセットされているようです。その概念上の誤りを推測している。 Here is the code、問題は108行目です私は最初の試合ではうまくいきますが、何かがうまくリセットされなかったように狂ったように始まります。私はこれにはかなり新しいです。あなたがスタート機能を使用するときは、そのあなたの.rowsに結合クリック機能を追加するため私のJQUERYのリセットボタンが私のTIC TAC TOEコードを狂ってしまいます

$(document).ready(function(){ 
      //Lets work on the variables and what they do 
      var set=0; //I'll use this to control the 3x3 grids 
      var tempx=0; //I'll use this to control player X 
      var temp0=0; //I'll use this to control player O 
      var myturn='X'; //This is what I'll actually put out in the grid and is the human player 
      var AI='O'; //But it will change according on who's the first player to move and is the Computer 
      var contador=0; 
      //I declare the winning conditions for player vs player 
      var onex=0; 
      var onexx=0; 
      var twox=0; 
      var twoxx=0; 
      var threex=0; 
      var threexx=0; 
      var one0=0; 
      var one00=0; 
      var two0=0; 
      var two00=0; 
      var three0=0; 
      var three00=0; 
      //This is especifically for AI vs player 
      //Going to set the original state of everything 
      $('.reset').hide(); 
      $('.player').hide(); 
      $('.turns').hide(); 
      $('.whichplay').hide(); 
      //First lets work on each button function 
      //Reset button! 
      function reset(){ 
       $('.rows').prop("disabled",true); 
       $('.reset').hide(); 
       $('.player').hide(); 
       $('.turns').hide(); 
       $('.whichplay').hide(); 
       $('.two-players').show(); 
       $('.one-player').show(); 
       $('.text').show(); 
       $('#playo').prop('disabled', false); 
       $('#playx').prop('disabled', false); 
       $('.rows').empty(); 
       set=0; 
       temp0=0; 
       tempx=0; 
       contador=0; 
       onex=0; 
       onexx=0; 
       twox=0; 
       twoxx=0; 
       threex=0; 
       threexx=0; 
       one0=0; 
       one00=0; 
       two0=0; 
       two00=0; 
       three0=0; 
       three00=0; 
       console.log('tempx after reset is '+tempx); 
       console.log('temp0 after reset is '+temp0); 
      } 
      $('.reset').click(function(){ 
       reset(); 
      }); 
      function start(){ 
       console.log('IM STARTING LOOOOK') 
       $('.one-player').hide(); 
       $('.reset').show(); 
       $('.player').show(); 
       $('.two-players').hide(); 
       $('.text').hide(); 
       $('.whichplay').show(); 
       //set=2; 
       //console.log('set is '+set); 
       $('.rows').removeAttr('disabled'); 
       //Player X function 
       $('#playx').click(function(){ 
        $('.whichplay').hide(); 
        $('.turns').show(); 
        $('#playo').prop('disabled', true); 
        $('#playx').prop('disabled', true); 
        $('.rows').prop("disabled",false); 
        tempx=1; 
        console.log('tempx after start is '+tempx); 
        console.log('tempO after start is '+temp0); 
       }); 
       //Player O function 
       $('#playo').click(function(){ 
        $('.whichplay').hide(); 
        $('.turns').show(); 
        $('#playo').prop('disabled', true); 
        $('#playx').prop('disabled', true); 
        $('.rows').prop("disabled",false); 
        temp0=1; 
        console.log('tempx after start is '+tempx); 
        console.log('tempO after start is '+temp0); 
       }); 
      }; 
      //When I hit one of these two options I will go into GAME MODE 
      //LETS ENTER GAME MODE! 
      $('.one-player').click(function(){ 
       //start(); 
       console.log('ERROR'); 
      }); 
      $('.two-players').click(function(){ 
       start(); 
       $('.rows').click(function(){ 
        //I will create a variable that will store the ID's from the grid I click 
        var idstore=$(this).attr('id'); 
        $(this).prop("disabled",true); 
        contador++; 
        //Now I got to control the turns X and O 
        if(tempx===1){ 
         $(this).text('X'); 
         console.log('This is the letter '+$(this).text('X')); 
         var s=$(this).get(0).id; //With this I extract the ID value into a string 
         tempx=0; //I close PX turn 
         temp0=1; //I start PY turn 
         var checker0=s.charAt(0); //I check the first letter of the id 
         var checker1=s.charAt(1); //I check the second letter of the id 
         $('#playo').show(); //I show its PO turn 
         $('#playx').hide(); 
         if(checker0==='1'){ 
          onex++; //Everytime this gets up to 3 PX win because it means a full row 
          //console.log('onex is '+onex); 
         }else if(checker0==='2'){ 
          twox++; //Same here because it means a full row 
          //console.log('twox is '+twox); 
         }else if(checker0==='3'){ 
          threex++; //Aaaaand same 
          //console.log('threex is '+threex); 
         } 
         if(checker1==='1'){ 
          onexx++; //This means a full column 
          //console.log('onexx is '+onexx); 
         }else if(checker1==='2'){ 
          twoxx++; //This means another full column 
          //console.log('twoxx is '+twoxx); 
         }else if(checker1==='3'){ 
          threexx++; //Same 
          //console.log('threexx is '+threexx); 
         } 
         if(onexx===3||onex===3||twoxx===3||twox===3||threex===3||threexx===3){ 
          alert('Player X win!'); //This checks full rows and columns 
          $('.rows').prop("disabled",true); 

         }else if(onexx===1&&onex===1&&twoxx===1&&twox===1&&threex===1&&threexx===1){ 
          alert('Player X win!'); //This is for diagonals 
          $('.rows').prop("disabled",true); 

         }else if(contador===9){ 
          alert('draw..'); 
          $('.rows').prop("disabled",true); 

         } 
        }else if(temp0===1){ 
         $(this).text('O'); 
         var ss=$(this).get(0).id; 
         tempx=1; 
         temp0=0; 
         var checker00=ss.charAt(0); 
         var checker11=ss.charAt(1); 
         $('#playo').hide(); 
         $('#playx').show(); 
         //We're going to check the winner 
         if(checker00==='1'){ 
          one0++; 
          //console.log('one0 is '+one0); 
         }else if(checker00==='2'){ 
          two0++; 
          //console.log('two0 is '+two0); 
         }else if(checker00==='3'){ 
          three0++; 
          //console.log('three0 is '+three0); 
         } 
         if(checker11==='1'){ 
          one00++; 
          //console.log('one00 is '+one00); 
         }else if(checker11==='2'){ 
          two00++; 
          //console.log('two00 is '+two00); 
         }else if(checker11==='3'){ 
          three00++; 
          //console.log('three00 is '+three00); 
         } 
         if(one00===3||one0===3||two00===3||two0===3||three0===3||three00===3){ 
          alert('Player O win!'); 
          $('.rows').prop("disabled",true); 

         }else if(one00===1&&one0===1&&two00===1&&two0===1&&three0===1&&three00===1){ 
          alert('Player O win!'); 
          $('.rows').prop("disabled",true); 

         }else if(contador===9){ 
          alert('draw..'); 
          $('.rows').prop("disabled",true); 

         } 
        } 

       }); 

      }); 
     }); 
+1

「のコードはこれですコードのリンクを確認する " - さらに重要なことに、誰かがコードをトラブルシューティングしようとすると外部サイトに行く必要はありません。まだ質問がない場合は、[どうすれば良い質問をしますか?](https://stackoverflow.com/help/how-to-ask)と[最小限で完全で検証可能な例を作成する方法]を読んでくださいhttps://stackoverflow.com/help/mcve) - 両方のアドバイスに従うことで、より良い回答を得ることができます。 –

+0

上記のAIコードを削除しても問題を引き起こしている2つのプレーヤーモードのみを含めることができますか? – Icewine

+0

ごめんなさい@TiesonT。これは私の最初の質問です。あなたのリンクに沿ってより良い質問をしようとします。 –

答えて

0

その出来事:あなたはcodepenリンクをチェックしたくない場合は

コードはこれです。リセットした後、バインディングを削除しませんでしたが、別のバインディングを.rowsクリック機能に再度追加しました。

これは、.on.offをクリックすることで回避できます。これはあなたがクリック機能を添付したいとき、あなたは.onを使用し、あなたがそれをリセットまたは削除するとき、あなたはoff

$(".rows").off("click"); 
$('.rows').on("click", function(){ 
}); 

デモ使用:あなたがしたくない場合https://jsfiddle.net/tvabhzxn/2/

+0

ありがとうございます@マーク!このようなミスを避けるためにJavascriptを教えることができるYouTubeチャンネルについて教えてもらえますか?それとも、より最適化されたコードを書くのに役立ちますか? –