Tic-Tac-Toeゲームがプレイヤーの切り替え、スコアの更新、プレイヤーの変更を行っていません

Question

2人プレイのTic-Tac-Toeプロジェクトで作業しています。プレイヤーは正しくプレイヤーを切り替えていません。さらに、私のプログラムではスコアを更新する際に問題が発生しています。これは、バイナリロジック、ビットワイズ演算子、および配列を使用して勝利条件を決定するために使用しています。あなたがお使いのブラウザのDev Toolsでエラーコンソールについて学ぶ必要があります

var player1name = ""; 
 
var player2name = ""; 
 
var firstPlayer = player1name; 
 
var player1 = 0; //score for all games 
 
var player2 = 0; //score for all games 
 
var scoreX = 0; //player "X" score on current board 
 
var scoreO = 0; //player "X" score on current board 
 
var value = 0; //button binary value 
 
var player = "X"; //current player's turn X or O 
 
var winner = ""; //stores winner X or O 
 
var winArray = [7, 56, 448, 73, 146, 292, 273, 84]; 
 
var clickedArray = []; 
 
var clicksCount = 0; 
 
var currentPlayer = ""; //get player's name 
 
      
 
function start() 
 
{ 
 
    //alert("start"); 
 
    player1name = prompt("Enter first player's name:", ""); 
 
    player2name = prompt("Enter second player's name:", ""); 
 
    currentPlayer = player1name; 
 
    document.getElementById("player").innerHTML = currentPlayer + " choose a square."; 
 
} 
 
      
 
function playerMoved(id, value) 
 
{ 
 
    changeText(id); 
 
    updateScore(value); 
 
       
 
    //check for winner 
 
    if (player === "X") { 
 
    check4winner(scoreX); 
 
    } else { 
 
    check4winner(scoreO); 
 
    } 
 
    
 
    //was there a winner? 
 
    if (winner !== "") { 
 
    //alert("winner:" + winner); 
 
    //logic to display winner 
 
    document.getElementById("winner").innerHTML = currentPlayer + " won!"; 
 
    startNewGame(); 
 
    } else { 
 
    changePlayer(); 
 
    } 
 
    switchPlayer(); 
 
} 
 
      
 
function changeText(id) 
 
{ 
 
    //alert("changeText: " + player); 
 
    //alert(id.innerHTML); 
 
    if (id.innerHTML === "") { 
 
    //storing id's of clicked div to reset later 
 
    clickedArray[clicksCount] = id; 
 
    clicksCount = clicksCount + 1; 
 
    
 
    if (player === "X") { 
 
     id.innerHTML = "X"; 
 
    } else { 
 
     id.innerHTML = "O"; 
 
    } 
 
    } 
 
} 
 
      
 
function switchPlayer() 
 
{ 
 
    //alert("switchPlayer"); 
 
    //switch player prompt 
 
    if (currentPlayer === player1name) { 
 
    currentPlayer = player2name; 
 
    } else { 
 
    currentPlayer = player1name; 
 
    } 
 
    //re-display current player in h2 
 
    document.getElementById("player").innerHTML = currentPlayer + " choose a square."; 
 
} 
 
      
 
function updateScore(value) 
 
{ 
 
    //alert("updateScore"); 
 
    //alert("Update Score for " + player); 
 
    if (player === "X") { 
 
    scoreX = scorex + value; 
 
    alert("scoreX: " + scoreX); 
 
    } else { 
 
    scoreO = scoreO + value; 
 
    alert("scoreO: " + scoreO); 
 
    } 
 
    alert("PlayerX Score: " + scoreX + " PlayerO Score: " + scoreO); 
 
} 
 
      
 
function check4winner(score) 
 
{ 
 
    //alert("Checking for winner" + score); 
 
    var i; 
 
    for (i = 0; i < winsArray.length; i++) 
 
    { 
 
    if ((winsArray[i] & score) === winsArray[i]) { 
 
     if (player === "X") { 
 
     winner = "X"; 
 
     } else { 
 
     winner = "O"; 
 
     } 
 
     alert(winner + "Won!"); 
 
     i = 99; //break out of for loop 
 
    } 
 
    } 
 
} 
 
      
 
function changePlayer() 
 
{ 
 
    //alert("Changed Player: " + player); 
 
    if (player === "X") { 
 
    player = "O"; 
 
    } else { 
 
    player = "X"; 
 
    } 
 
    document.getElementById("player").innerHTML = currentPlayer + " choose a square."; 
 
} 
 
      
 
function startNewGame() 
 
{ 
 
    //alert("Start new game"); 
 
    winner = ""; 
 
    scoreO = 0; 
 
    scoreX = 0; 
 
    //reset all clicked squares 
 
    for (i = 0; i < clickedArray.length; i++) 
 
    { 
 
    clickedArray[i].innerHTML = ""; 
 
    } 
 
    //change who goes first 
 
    if (firstPlayer === player1name) { 
 
    firstPlayer = player2name; 
 
    } else { 
 
    firstPlayer = player1name; 
 
    } 
 
    currentPlayer = firstPlayer; 
 
    document.getElementById("player").innerHTML = currentPlayer + " choose a square."; 
 
    //update scores 
 
}

.Table { 
 
    display: table; 
 
} 
 

 
.Row { 
 
    display: table-row; 
 
} 
 
      
 
.Cell { 
 
    display: table-cell; 
 
    border: dashed black 2px; 
 
    padding: 0px 5px 0px 5px; 
 
    height: 50px; 
 
    width: 50px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    background-color: #3B653D; 
 
    color: #FFFEFA; 
 
    font-size: xx-large; 
 
}

<body onload="start()"> 
 
     <div class="Table"> 
 
      <div class="Title"> 
 
       <h1>Tic-Tac-Toe</h1> 
 
       <h2 id="winner"></h2> 
 
       <h2 id="player"></h2> 
 
       <div class="Row"> 
 
        <div class="Cell" onclick="playerMoved(this, 1)"></div> 
 
        <div class="Cell" onclick="playerMoved(this, 2)"></div> 
 
        <div class="Cell" onclick="playerMoved(this, 4)"></div> 
 
       </div> 
 
       <div class="Row"> 
 
        <div class="Cell" onclick="playerMoved(this, 8)"></div> 
 
        <div class="Cell" onclick="playerMoved(this, 16)"></div> 
 
        <div class="Cell" onclick="playerMoved(this, 32)"></div> 
 
       </div> 
 
       <div class="Row"> 
 
        <div class="Cell" onclick="playerMoved(this, 64)"></div> 
 
        <div class="Cell" onclick="playerMoved(this, 128)"></div> 
 
        <div class="Cell" onclick="playerMoved(this, 256)"></div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </body>

Answer 1

。移動すると、次のエラーが発生します。

js:137 Uncaught ReferenceError: scorex is not defined

これらの手がかりは、コードに問題があるときに把握するのに役立ちます。たとえば、このエラーでは、137行目にscorexという変数（小文字のXに注意）が使用されていることが示されています。あなたの実際の変数には大文字のXが含まれています。 JavaScriptにエラーが発生すると、JavaScriptは実行を停止します。

scorexは定義済みの変数ではないため、JavaScriptはエラーをスローします。これをscoreXに変更すると、そのエラーが発生します。変数は大文字と小文字を区別します。

この後にさらにエラーがありますので、私はそれらを把握させていただきます。私はあなたにヒントを与えます：winArrayまたはwinsArray？