Can'；t使2人Tic-Tac-Toe游戏工作JavaScript

HTML

JavaScript

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

var//全局变量
var含量；
var Winning组合；
甘瓦变种；
var c；
var-cxt；
var-w；
变量y；
var-turn=0；
var squaresFilled=0//全局变量结束
window.onload=function（）{//实例化变量
painted=new Array（）；//检查画布是否已包含某些内容
content=new Array（）；//查看画布包含的“X”或“O”
Winning组合=[[1,2,3]，[4,5,6]，[7,8,9]，[1,4,7]，[2,5,8]，[3,6,9]，
[1,5,9]，[3,5,7]；//所有可能的组合：P
对于（var i=0；i检查您的指数

内容[0-8]或内容[1-9]

Winning组合使用1-9
但拉票使用0-8

这就是为什么你会得到一些奇怪的结果
检查你的指数

内容[0-8]或内容[1-9]

Winning组合使用1-9
但拉票使用0-8

这就是为什么在函数
checkForWinner
change中会出现一些奇怪的结果的原因：

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!!');
    }
}

致：

如果从0而不是1开始对所有内容进行编号，事情会变得更简单。这样，您就不需要在函数
checkForWinner
change:

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!!');
    }
}

致：

如果从0而不是1开始对所有内容进行编号，事情会变得更简单。这样，您就不需要所有这些
-1
我知道我应该帮助您编写代码，但我决定使用部分代码，并建议您一种方法：
HTML:

JS:
变量

.turnInfo{
    text-align:center;
    font-size:40px;
    font-weight:bold;
    margin-top: 6%;
    margin-bottom:10px;
}
.container{     /*some css*/
    border: 2px solid red;
    width: 400px;
    height: 400px;
    margin: 0 auto;
}

.container div{
    float: left;
    height: 102px;
    width: 131.3px;
    border: 1px solid black;
    text-align:center;
    padding-top:30px;
    font-size:50px;
}

切换Trun

var cells = [0,0,0,0,0,0,0,0,0,0]; // make it 10 for the sake of array index  
var turn = 'O'; // first turn : O 
var infoDiv = document.getElementById('turnInfo');

function checkWinner(){
   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 index=0; index <  winningCombinations.length;index++){
       winCond = winningCombinations[index];
       if(cells[winCond[0]] != 0 && 
          cells[winCond[0]] == cells[winCond[1]] && 
          cells[winCond[1]] == cells[winCond[2]])
       {
          alert(turn + ' is winner');
          playAgain();
          return;
       }
   }

   var allCellsFilled = 1;
   for(var index =1; index < cells.length; index++){
       if(!cells[index]){
          allCellsFilled = 0;
          break;
       }
   } 
   if(allCellsFilled){
      alert('Game is draw!');
      playAgain();
   }
}

画布单击处理程序

function toggleTurn(){
   turn = turn == 'O' ? 'X' : 'O';
   infoDiv.innerHTML = 'Turn : '+turn;
   return turn;
}

检查结果函数

function canvasClicked(cell){
   var cellIndex = cell.getAttribute('cell');
   if(!cells[cellIndex]){
      cells[cellIndex] = toggleTurn();
      cell.innerHTML = turn; // you can add image here.
      checkWinner();
   }
}

你可以在这里看到：

希望能有所帮助。
我知道我应该帮助您编写代码，但我决定使用部分代码，并向您建议一种方法：
HTML:

JS:
变量

.turnInfo{
    text-align:center;
    font-size:40px;
    font-weight:bold;
    margin-top: 6%;
    margin-bottom:10px;
}
.container{     /*some css*/
    border: 2px solid red;
    width: 400px;
    height: 400px;
    margin: 0 auto;
}

.container div{
    float: left;
    height: 102px;
    width: 131.3px;
    border: 1px solid black;
    text-align:center;
    padding-top:30px;
    font-size:50px;
}

切换Trun

var cells = [0,0,0,0,0,0,0,0,0,0]; // make it 10 for the sake of array index  
var turn = 'O'; // first turn : O 
var infoDiv = document.getElementById('turnInfo');

function checkWinner(){
   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 index=0; index <  winningCombinations.length;index++){
       winCond = winningCombinations[index];
       if(cells[winCond[0]] != 0 && 
          cells[winCond[0]] == cells[winCond[1]] && 
          cells[winCond[1]] == cells[winCond[2]])
       {
          alert(turn + ' is winner');
          playAgain();
          return;
       }
   }

   var allCellsFilled = 1;
   for(var index =1; index < cells.length; index++){
       if(!cells[index]){
          allCellsFilled = 0;
          break;
       }
   } 
   if(allCellsFilled){
      alert('Game is draw!');
      playAgain();
   }
}

画布单击处理程序

function toggleTurn(){
   turn = turn == 'O' ? 'X' : 'O';
   infoDiv.innerHTML = 'Turn : '+turn;
   return turn;
}

检查结果函数

function canvasClicked(cell){
   var cellIndex = cell.getAttribute('cell');
   if(!cells[cellIndex]){
      cells[cellIndex] = toggleTurn();
      cell.innerHTML = turn; // you can add image here.
      checkWinner();
   }
}

你可以在这里看到：

希望能有帮助