javascript - 无法让 2 人井字棋游戏运行 JavaScript

Question

HTML

<div class="container"> <-- div container -->

<div id="div1" onclick="canvasClicked(1);"></div>
<div id="div2" onclick="canvasClicked(2);"></div>
<div id="div3" onclick="canvasClicked(3);"></div>
<div id="div4" onclick="canvasClicked(4);"></div>
<div id="div5" onclick="canvasClicked(5);"></div>
<div id="div6" onclick="canvasClicked(6);"></div>
<div id="div7" onclick="canvasClicked(7);"></div>
<div id="div8" onclick="canvasClicked(8);"></div>
<div id="div9" onclick="canvasClicked(9);"></div>


</div> <-- div container end -->

CSS

  .container{     /*some css*/
border: 2px solid red;
width: 400px;
height: 400px;
margin: 0 auto;
margin-top: 10%;
}

.container div{
float: left;
height: 132px;
width: 131.3px;
border: 1px solid black;
}

JavaScript

var painted; //global variables
var content;
var winningCombinations;
var theCanvas; 
var c;
var cxt;
var w;
var y;

var turn = 0;
var squaresFilled = 0; //global variables end

window.onload = function(){               //instantiating variables
painted = new Array();   //to check if the canvas contains something already
content = new Array();  //to see what the canvas contains 'X' or 'O'

winningCombinations = [[1,2,3],[4,5,6],[7,8,9],[1,4,7],[2,5,8],[3,6,9],
[1,5,9],[3,5,7]]; //all possible combinations :P

for(var i=0; i<=8; i++){
    painted[i] = false;
    content[i]=false;
}
}


function canvasClicked(number){

theCanvas = "div" + number; //takes the div Id from html
c = document.getElementById(theCanvas);

if(painted[number-1]==false){
    if(turn%2==0){               //use X here
        c.innerHTML = '<img src="cross image" alt="x" width=100% 
height=100%>';
        content[number-1] = 'X'; //storing value in content array
    }else{                       // user O here
        c.innerHTML = '<img src=" O image" height="100%" 
width="100%" alt="O">';
        content[number-1] = 'O'; //storing value in content array
    }
}
else{
    alert('This block is already occupied, try another block');
    turn--;
    squaresFilled--;
}
turn++;
painted[number-1]= true;
squaresFilled++;
checkForWinner(content[number-1]);

if(squaresFilled == 9){
    alert('It is a TIE');
    playAgain();
}
}

function checkForWinner(symbol){  // This functions seems to be the problem

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

    if(content[winningCombinations[a][0]]==symbol && 
content[winningCombinations[a][1]]==symbol && content[winningCombinations[a]
[2]]==symbol){
        console.log(symbol + ' won!!');
    }


}
}
function playAgain(){ // just another function to reset the game
    y=confirm("PLAY AGAIN?");
    if(y==true){
        location.reload(true);
    }else{
        alert('Good Bye Then!!');
    }
}

运行正常，但结果不是预期的。有时它会随机地使任何人获胜(我猜)，我似乎找不到错误，我也使用了调试器，但我只是找不到问题......任何帮助将不胜感激。谢谢

Answer 1

在函数checkForWinner中更改:

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

至:

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

如果您从 0 而不是 1 开始对所有内容进行编号，事情会变得更容易。然后您就不需要所有这些 -1。