不能使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。

Answer 2

檢查您的指數。

無論是內容[0-8]或內容[1-9]

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

這就是爲什麼你得到一些奇怪的結果

Answer 3

我知道我應該可以幫助您與您的代碼，但我決定用你的部分代碼，並建議你的方法： HTML：

<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> 

CSS：

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

JS： 變量

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

個切換Trun的

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

新的遊戲功能

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

你可以在這裏看到：https://codepen.io/FaridNaderi/pen/awROjY

希望它能幫助。