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

检查您的指数。

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

winnerCombination使用1-9 但canvasClicked使用0-8

这就是你得到一些奇怪结果的原因

Answer 2

在函数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。

Answer 3

我知道我应该帮助您使用代码，但我决定使用部分代码并建议您采用一种方法： HTML：

CSS：

<div class="turnInfo" id="turnInfo">Turn : O</div>
<div class="container">  
  <div id="div1" cell="1" onclick="canvasClicked(this);"></div>
  <div id="div2" cell="2" onclick="canvasClicked(this);"></div>
  <div id="div3" cell="3" onclick="canvasClicked(this);"></div>
  <div id="div4" cell="4" onclick="canvasClicked(this);"></div>
  <div id="div5" cell="5" onclick="canvasClicked(this);"></div>
  <div id="div6" cell="6" onclick="canvasClicked(this);"></div>
  <div id="div7" cell="7" onclick="canvasClicked(this);"></div>
  <div id="div8" cell="8" onclick="canvasClicked(this);"></div>
  <div id="div9" cell="9" onclick="canvasClicked(this);"></div> 
</div>

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

Canvas Click Handler

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();
   }
}

新游戏功能

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();
   }
}

您可以在此处查看：https://codepen.io/FaridNaderi/pen/awROjY

希望它有所帮助。

无法让2人Tic Tac Toe游戏工作JavaScript

3 个答案: