堆棧內存溢出
  簡體   English   中英

井字游戲與 JavaScript

[英]tic-tac-toe game with JavaScript

 原文  2021-06-04 06:41:33  2   1    javascript/ html/ css/ tic-tac-toe

問題描述

我將使用 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>

1 個解決方案

解決方案1
 0  2021-06-06 16:54:09

謝謝大家，我已經能夠調試代碼了。 我已經對其進行了測試，它給出了預期的結果。 這是我的代碼：

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 簡單的Java井字游戲 井字游戲Java語言 Tic-Tac-Toe JavaScript 游戲問題（界面無響應） 井字游戲； JavaScript； 代碼已編寫但不起作用 JavaScript井字游戲贏家檢查 Javascript 中的井字游戲 - 更換玩家 基本的井字游戲JavaScript 井字游戲清除方法JavaScript Tic Tac Toe游戲JavaScript 如何在 JavaScript Tic-Tac-Toe 游戲中構建獲勝、失敗和平局的邏輯檢查？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM