JavaScript 井字游戏答案

【问题标题】：tic-tac-toe game with JavaScriptJavaScript 井字游戏
【发布时间】：2021-06-04 06:41:33
【问题描述】：

我将使用 html、css 和 javascript 构建一个井字游戏。我已经尝试了我所知道的一切，但似乎我的 js 代码中有错误。如果有人能帮我找出错误在我的 js 代码中的位置，我将不胜感激。一旦我点击了任何一个框，第一个标记应该是 X，然后是 O，然后 X 和 O 将继续权衡，直到有赢家。当你在一行、一列或对角线上有相同的标记时，获胜者就出现了。这是我的js代码：

const upperLeft = document.getElementById("first-up").querySelector("span");
const upperCenter = document.getElementById("second-up").querySelector("span");
const upperRight = document.getElementById("third-up").querySelector("span");
const middleLeft = document.getElementById("first-middle").querySelector("span");
const middleCenter = document.getElementById("second-middle").querySelector("span");
const middleRight = document.getElementById("third-middle").querySelector("span");
const bottomLeft = document.getElementById("first-bottom").querySelector("span");
const bottomCenter = document.getElementById("second-bottom").querySelector("span");
const bottomRight = document.getElementById("third-bottom").querySelector("span");
let addCross = true;

const allDivs = document.getElementById("game-container");
const allSpans = allDivs.querySelectorAll("span");


for (const p of allSpans) {
  p.addEventListener("click", addPlayer);
}

function addPlayer(e) {
  const boxTarget = e.target.innerText;

  if (boxTarget !== "*") {
    return;
  }

  boxTarget.classList.remove("cross");
  boxTarget.classList.remove("circle");

  if (addCross) {
    boxTarget.innerText = "X";
    boxTarget.classList.add("cross");
    addCross = false;
  } else {
    boxTarget.innerText = "O";
    boxTarget.ClassList.add("circle");
    addCross = true;
  }
  setTimeout(confirmWinner, 100);
}

//if there is no winner
function checkAllMarked() {
  const box1 = upperLeft.innerText;
  const box2 = upperCenter.innerText;
  const box3 = upperRight.innertext;
  const box4 = middleLeft.innerText;
  const box5 = middleCenter.innerText;
  const box6 = middleRight.innerText;
  const box7 = bottomLeft.innerText;
  const box8 = bottomCenter.innerText;
  const box9 = bottomRight.innerText;

  if (box1 !== "*" && box2 !== "*" &&
    box3 !== "*" && box4 !== "*" &&
    box5 !== "*" && box6 !== "*" &&
    box7 !== "*" && box8 !== "*") {

    alert("Cat's game!");
    resetGame();
  }
}

function confirmWinner() {
  const box1 = upperLeft.innerText;
  const box2 = upperCenter.innerText;
  const box3 = upperRight.innertext;
  const box4 = middleLeft.innerText;
  const box5 = middleCenter.innerText;
  const box6 = middleRight.innerText;
  const box7 = bottomLeft.innerText;
  const box8 = bottomCenter.innerText;
  const box9 = bottomRight.innerText;

  //first horizontal line
  if (box1 === box2 && box1 === box3 && box2 === box3 && box1 !== "*") {
    alert(box1 + "" + won!");
      resetGame();
      return;
    }

    //second horizontal line
    if (box4 === box5 && box4 === box6 && box5 === box6 && bo4 !== "*") {
      alert(box4 + "" + "won!");
      resetGame();
      return;
    }

    //third horizontal line
    if (box7 === box8 && box7 === box9 && box8 === box9 && bo7 !== "*") {
      alert(box7 + "" + "won!");
      resetGame();
      return;
    }

    //first vertical column
    if (box1 === box4 && box1 === box7 && box4 === box7 && bo1 !== "*") {
      alert(bo1 + "" + "won!");
      resetGame();
      return;
    }

    //second vertical row
    if (box2 === box5 && box2 === box8 && box5 === box8 && bo2 !== "*") {
      alert(box2 + "" + "won!");
      resetGame();
      return;
    }

    //third vertical row
    if (box3 === box6 && box3 === box9 && box6 === box9 && bo3 !== "*") {
      alert(box3 + "" + "won!");
      resetGame();
      return;
    }

    //first diagonal
    if (box1 === box5 && box1 === box9 && box5 === box9 && bo1 !== "*") {
      alert(box1 + "" + "won!");
      resetGame();
      return;
    }

    //second diagonal
    if (box3 === box5 && box3 === box7 && box5 === box7 && bo3 !== "*") {
      alert(box3 + "" + "won!");
      resetGame();
      return;

    }

    checkAllMarked();

  }

  function resetGame() {
    upperLeft.innerText = "*";
    upperCenter.innerText = "*";
    upperRight.innertext = "*";
    middleLeft.innerText = "*";
    middleCenter.innerText = "*";
    middleRight.innerText = "*";
    bottomLeft.innerText = "*";
    bottomCenter.innerText = "*";
    bottomRight.innerText = "*";

    allSpans.classList.remove("cross", "circle");
    addCross = true;
  }

#game-container {
  text-align: center;
  margin-top: 50px;
  color: white;
  line-height: 150px;
}

.boxes {
  font-family: sans-serif, Crimson Pro;
  font-size: 80px;
  line-height: 150px;
  height: 150px;
  width: 150px;
  display: inline-block;
  vertical-align: middle;
  margin-left: -5px;
  margin-top: -1px;
}

#first-up {
  border-bottom: 5px solid green;
  border-right: 5px solid green;
}

#second-up {
  border-bottom: 5px solid green;
  border-right: 5px solid green;
  border-left: 5px solid green;
}

#third-up {
  border-bottom: 5px solid green;
  border-left: 5px solid green;
}

#first-middle {
  border-top: 5px solid green;
  border-right: 5px solid green;
  border-bottom: 5px solid green;
}

#second-middle {
  border-top: 5px solid green;
  border-bottom: 5px solid green;
  border-left: 5px solid green;
  border-right: 5px solid green;
}

#third-middle {
  border-top: 5px solid green;
  border-bottom: 5px solid green;
  border-left: 5px solid green;
}

#first-bottom {
  border-top: 5px solid green;
  border-right: 5px solid green;
}

#second-bottom {
  border-top: 5px solid green;
  border-right: 5px solid green;
  border-left: 5px solid green;
}

#third-bottom {
  border-top: 5px solid green;
  border-left: 5px solid green;
}

span {
  display: inline-block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

span.cross {
  color: red;
}

span.circle {
  color: black;
}

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tic-tac-toe game</title>
    <link rel= "stylesheet" type= "text/css" href= "events.css">
</head>

    <body>
    <h2 align= "center">The Tic-tac-toe Game</h2>
    
    <div id="game-container">
    
        <div id="first-up" class ="boxes">
            <span class= "space">*</span>
        </div>
        
        <div id="second-up" class="boxes">
            <span class= "space">*</span>
        </div>
        
        <div id="third-up" class="boxes">
            <span class= "space">*</span>
        </div>
        <br>
        <div id="first-middle" class="boxes">
            <span class= "space">*</span>
        </div>
        
        <div id="second-middle" class="boxes">
            <span class= "space">*</span>
        </div>
        
        <div id="third-middle" class="boxes">
            <span class= "space">*</span>
        </div>
        
        <br>
        
        <div id="first-bottom" class="boxes">
            <span class= "space">*</span>
        </div>
        
        <div id="second-bottom" class="boxes">
            <span class= "space">*</span>
        </div>
        
        <div id="third-bottom" class="boxes">
            <span class= "space">*</span>
        </div>
        
    </div>
    
    <script src= "events.js"></script>
    </body>
</html>

【问题讨论】：

你得到什么错误？
您的 html 代码为空。你的 DOM 结构在哪里？请通过整个 html 文件
alert(box1 + "" + won!"); 是错误的一个“我认为应该是 alert(box1 + " won!");
我认为你在某处复制了它，因为你遗漏了一些东西。下一个错误将是因为 teher 不是播放器元素，boxTarget 是这个播放器值的值，但它不存在。使用在浏览器中按 F12 检查错误并逐个修复它们
@Rmaxx 谢谢。我添加了 +"" 以增加空格，但注意 d 更正。

标签： javascript html css tic-tac-toe

【解决方案1】：

谢谢大家，我已经能够调试代码了。我已经对其进行了测试，它给出了预期的结果。这是我的代码：

const upperLeft = document.getElementById("first-up").querySelector("span");
const upperCenter = document.getElementById("second-up").querySelector("span");
const upperRight = document.getElementById("third-up").querySelector("span");
const middleLeft = document.getElementById("first-middle").querySelector("span");
const middleCenter = document.getElementById("second-middle").querySelector("span");
const middleRight = document.getElementById("third-middle").querySelector("span");
const bottomLeft = document.getElementById("first-bottom").querySelector("span");
const bottomCenter = document.getElementById("second-bottom").querySelector("span");
const bottomRight = document.getElementById("third-bottom").querySelector("span");
let addCross = true;

const allDivs = document.getElementById("game-container");
const allSpans = allDivs.querySelectorAll("span");

document.addEventListener('DOMContentLoaded', () => {
  for(const p of allSpans){
    p.addEventListener("click", addPlayer);
}
});

function addPlayer(e){
    const boxTarget = e.target;
    
    if(boxTarget.innerText !== "*"){
        return;
    }
    
    boxTarget.classList.remove("cross");
    boxTarget.classList.remove("circle");
    
    if(addCross){
        boxTarget.innerText= "X";
        boxTarget.classList.add("cross");
        addCross = false;
    } else{
        boxTarget.innerText= "O";
        boxTarget.classList.add("circle");
        addCross = true;
    }
    setTimeout(confirmWinner, 100);
}


function confirmWinner(){
    const box1 = upperLeft.innerText;
    const box2 = upperCenter.innerText;
    const box3 = upperRight.innerText;
    const box4 = middleLeft.innerText;
    const box5 = middleCenter.innerText;
    const box6 = middleRight.innerText;
    const box7 = bottomLeft.innerText;
    const box8 = bottomCenter.innerText;
    const box9 = bottomRight.innerText;
    
    //first horizontal line
    if(box1===box2 && box2 ===box3 && box1===box3 && box1!== "*"){
        alert(box1 + " won!");
        resetGame();
        return;
        
    }
    
        //second horizontal line
     if(box4===box5 && box5===box6 && box4===box6 && box4!=="*"){
        alert(box4 + " won!");
        resetGame();
        return;
    }
    
    //third horizontal line
     if(box7===box8 && box8===box9 && box7===box9 && box7!=="*"){
        alert(box7 + " won!");
        resetGame();
        return;
    }
    
    //first vertical column
     if(box1===box4 && box4===box7 && box1===box7 && box1!=="*"){
        alert(box1 + " won!");
        resetGame();
        return;  
    }
    
    //second vertical row
     if(box2===box5 && box5===box8 && box2===box8 && box2!=="*"){
        alert(box2 + " won!");
        resetGame();
        return;
    }
    
    //third vertical row
     if(box3===box6 && box6===box9 && box3===box9 && box3!=="*"){
        alert(box3 + " won!");
        resetGame();
        return;
    }
    
    //first diagonal
     if(box1===box5 && box5===box9 && box1===box9 && box1!=="*"){
        alert(box1 + " won!");
        resetGame();
        return;
    }
    
    //second diagonal
     if(box3===box5 && box5===box7 && box3===box7 && box3!=="*"){
        alert(box3 + " won!");
        resetGame();
        return;     
    } 
    
    checkAllMarked();   
    
}   
    
    //if there is no winner
    function checkAllMarked(){
        const box1 = upperLeft.innerText;
        const box2 = upperCenter.innerText;
        const box3 = upperRight.innertext;
        const box4 = middleLeft.innerText;
        const box5 = middleCenter.innerText;
        const box6 = middleRight.innerText;
        const box7 = bottomLeft.innerText;
        const box8 = bottomCenter.innerText;
        const box9 = bottomRight.innerText;
        
        if(box1 !=="*" && box2!=="*" &&
        box3!== "*" && box4!== "*" &&
        box5 !== "*" && box6!== "*" &&
        box7!== "*" && box8!== "*"){
            
            alert("Cat's game!");
            resetGame();
        }
    }
    
function resetGame(){
    upperLeft.innerText = "*";
    upperCenter.innerText = "*";
    upperRight.innerText = "*";
    middleLeft.innerText = "*";
    middleCenter.innerText = "*";
    middleRight.innerText = "*";
    bottomLeft.innerText = "*";
    bottomCenter.innerText = "*";
    bottomRight.innerText = "*";
    
    upperLeft.classList.remove("cross");
    upperCenter.classList.remove("cross");
    upperRight.classList.remove("cross");
    middleLeft.classList.remove("cross");
    middleCenter.classList.remove("cross");
    middleRight.classList.remove("cross");
    bottomLeft.classList.remove("cross");
    bottomCenter.classList.remove("cross");
    bottomRight.classList.remove("cross");
    
    upperLeft.classList.remove("circle");
    upperCenter.classList.remove("circle");
    upperRight.classList.remove("circle");
    middleLeft.classList.remove("circle");
    middleCenter.classList.remove("circle");
    middleRight.classList.remove("circle");
    bottomLeft.classList.remove("circle");
    bottomCenter.classList.remove("circle");
    bottomRight.classList.remove("circle");
    
    addCross= true;
}

【讨论】：