kann nicht 2 Spieler Tic Tac Toe-Spiel arbeiten JavaScript

Question

HTML machen

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

Es läuft normalerweise, aber die Ergebnisse sind nicht zu erwarten. Manchmal macht es zufällig irgendeinen Gewinner (ich schätze), ich kann den Fehler nicht finden, ich habe auch Debugger benutzt, aber ich kann das Problem einfach nicht finden ... jede Hilfe wäre willkommen. Danke

Answer 1

In die Funktion checkForWinner Änderung:

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

zu:

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

Es würde die Dinge einfacher machen, wenn Sie alles von 0 statt 1 numerieren würden. Dann brauchen Sie nicht all diese -1.

Answer 2

Überprüfen Sie Ihre Indizes.

Entweder Inhalt [0-8] oder Inhalt [1-9]

winningCombination verwendet 1-9 aber canvasClicked verwendet 0-8

Deshalb sollten Sie einige seltsame Ergebnisse zu erzielen

Answer 3

Ich weiß, ich sollte Sie mit Ihrem Code helfen, aber ich beschlossen, Teile des Codes zu verwenden und empfehlen Ihnen einen Ansatz: 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: Variablen

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

Toggle die Trun

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

Canvas Klicken Sie Handler

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

Prüfergebnis Funktion

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

Neue Spielfunktion

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

Sie können es hier sehen: https://codepen.io/FaridNaderi/pen/awROjY

Hoffe, es hilft.