我的石頭剪刀布應用程式出了什么問題？-有解無憂

現在我正在學習 DOM，我一直在嘗試將我的舊 JavaScript 學習專案變成難以處理的 Web 應用程式。自從我撰寫這樣的基本 JavaScript 腳本以來已經有一段時間了，所以我可能在這里遺漏了一些明顯的東西，但是我的程式輸出了我的游戲演算法中的最后一行，而不管用戶的選擇如何（'Rock beats scissors。你輸了。' )，并且計算機分數以 3 為增量更新。這顯然不是我的本意。

我相信輸出應該是相當直觀的，但是我在我的 JavaScript 檔案中包含了注釋以突出顯示所需的輸出（游戲應該遵循石頭剪刀布的常規規則）。抱歉，如果界面看起來很混亂，我將其設計為 15.6 英寸螢屏，但尚未開發出跨用戶功能。

//HTML elements saved as JS variables
let rock = document.getElementById("rock");
let paper = document.getElementById("paper");
let scissors = document.getElementById("scissors");
let gameResults = document.getElementById("gameResults");
let scoreboard = document.getElementById("scoreboard")

/*Generates a random number between 0 and 2 to be substituted for rock, paper, or scissors, respectively.*/
const getComputerChoice = () => {
    // Rock is 0; Paper is 1; Scissors is 2.
    let choice = Math.floor(Math.random() * 3);
    return choice;
};

/*Player and computer scores which update the "scoreboard" element id; score should update in increments of one.*/
let playerScore = 0;
let computerScore = 0;

/*Game algorithm which should return a random choice from the computer and update the "gameResults" element id, according to the standard rules of Rock Paper Scissors, when interacted with through the event listeners at the bottom of the program.*/
const game = () => {
    let playerChoice;
    let computerChoice = getComputerChoice();

    if (playerChoice === computerChoice) {
        gameResults.innerHTML = 'You tied!';
        playerScore  ;
        computerScore  ;
    }

    if (playerChoice === rock && computerChoice === 2) {
        gameResults.innerHTML = 'Rock beats scissors. You win!'
        playerScore  ;
    } else {
        gameResults.innerHTML = 'Paper covers rock. You lose.'
        computerScore  ;
    }

    if (playerChoice === paper && computerChoice === 0) {
        gameResults.innerHTML = 'Paper covers rock. You win!'
        playerScore  ;
    } else {
        gameResults.innerHTML = 'Scissors cuts paper. You lose.'
        computerScore  ;
    }

    if (playerChoice === scissors && computerChoice === 1) {
        gameResults.innerHTML = 'Scissors cuts paper. You win!'
        playerScore  ;
    } else {
        gameResults.innerHTML = 'Rock beats scissors. You lose.'
        computerScore  ;
    }

    scoreboard.innerHTML = `Player: ${playerScore} | Computer: ${computerScore}`
};

//Event listeners
rock.addEventListener("click", game);
paper.addEventListener("click", game);
scissors.addEventListener("click", game);

body {
    background-image: url("pexels-pixabay-326311.jpg");
}

p {
    color: white;
    text-align: center;
}

#gameHeader {
    font-family: 'Shizuru', cursive, serif, sans-serif;
    font-size: 75px;
    border: 3px solid white;
    padding-bottom: 20px;
    margin-left: 350px;
    margin-right: 350px;
}

#gameResults {
    font-family: 'Rowdies', cursive, serif, sans-serif;
    font-size: 50px;
}

#scoreboard {
    font-family: 'Rowdies', cursive, serif, sans-serif;
    font-size: 20px;
    background-color: black;
    margin-left: 600px;
    margin-right: 600px;
    border: 2px solid white;
    border-radius: 50px;
    padding: 5px;
}

.results {
    position: relative;
    top: 100px;
}

label {
    font-family: 'Roboto Mono', sans-serif, serif;
    font-size: 25px;
    color: white;
}

.labels {
    display: inline-flexbox;
    margin-top: 20px;
}

#rockLabel {
    border: 2px solid white;
    border-radius: 10px;
    padding: 5px;
    position: fixed;
    left: 520px;
    background-color: black;
}

#paperLabel {
    border: 2px solid white;
    border-radius: 10px;
    padding: 5px;
    position: fixed;
    left: 722px;
    background-color: black;
}

#scissorsLabel {
    border: 2px solid white;
    border-radius: 10px;
    padding: 5px;
    position: fixed;
    left: 915px;
    background-color: black;
}


#rock {
    background-image: url("Rock.jpeg");
    background-color: white;
    background-position: center;
    background-size: contain;
    padding: 50px;
    border: 3px solid black;
    border-radius: 50px;
}

#paper {
    background-image: url("Papers.jpg");
    background-color: white;
    background-position: center;
    background-size: contain;
    padding: 50px;
    border: 3px solid black;
    border-radius: 50px;
    margin-left: 100px;
    margin-right: 100px;
}

#scissors {
    background-image: url("Scissors.jpg");
    background-position: center;
    background-size: contain;
    padding: 50px;
    border: 3px solid black;
    border-radius: 50px;
}

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Rock Paper Scissors</title>
    <link rel="stylesheet" href="Rock-Paper-Scissors.css">
    <script src="Rock-Paper-Scissors.js" async></script>
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Marko One&family=Orbitron&family=Roboto Mono:wght@100&family=Rowdies:wght@300&family=Saira Condensed:wght@100&family=Shizuru&family=Supermercado One&display=swap" rel="stylesheet"> 

</head>

<body>

    <header>
        <p id="gameHeader">Rock Paper Scissors</p>
    </header>

    <div class="buttons">
        <center>
            <button id="rock"></button>
            <button id="paper"></button>
            <button id="scissors"></button>
        </center>
    </div>

    <div class="labels">
        <label for="rock" id="rockLabel">Rock</label>
        <label for="paper" id="paperLabel">Paper</label>
        <label for="scissors" id="scissorsLabel">Scissors</label>
    </div>

    <div class="results">
        <p id="gameResults">Try your luck!</p>
        <p id="scoreboard">Player: 0 | Computer: 0</p>
    </div>
    
</body>

</html>

uj5u.com熱心網友回復：

您需要添加玩家選擇。

在 HTML 代碼中

<button data-choice="0" id="rock"></button>
<button data-choice="1" id="paper"></button>
<button data-choice="2" id="scissors"></button>

在游戲功能

const game = (event) => {
let playerChoice = event.currentTarget.dataset.choice;

uj5u.com熱心網友回復：

你的game()函式中的邏輯有點不對勁。即如果要使用else條件，則需要嵌套，否則每次不滿足primary條件時都會執行。

此外，對于結果系結的情況，看起來好像您正在將未定義的playerChoice值與computerChoice的整數值進行比較。我已將此行注釋掉并修改了您的事件偵聽器以將pcValue（0、1 或 2）傳遞給您的方法。

看看下面。

const game = (playerChoice, pcValue) => {

    // let playerChoice;
    let computerChoice = getComputerChoice();

    if(pcValue === computerChoice) {
        gameResults.innerHTML = 'You tied!';
        playerScore  ;
        computerScore  ;
    } else {

        if(playerChoice === rock) {
            if(computerChoice === 2) {
                gameResults.innerHTML = 'Rock beats scissors. You win!'
                playerScore  ;
            } else {
                gameResults.innerHTML = 'Paper covers rock. You lose.'
                computerScore  ;
            }
        }

        if(playerChoice === paper) {
            if(computerChoice === 0) {
                gameResults.innerHTML = 'Paper covers rock. You win!'
                playerScore  ;
            } else {
                gameResults.innerHTML = 'Scissors cuts paper. You lose.'
                computerScore  ;
            }
        }

        if(playerChoice === scissors) {
            if(computerChoice === 1) {
                gameResults.innerHTML = 'Scissors cuts paper. You win!'
                playerScore  ;
            } else {
                gameResults.innerHTML = 'Rock beats scissors. You lose.'
                computerScore  ;
            }
        }
    }

    scoreboard.innerHTML = `Player: ${playerScore} | Computer: ${computerScore}`
};

我還修改了您的事件偵聽器，以便您的按鈕單擊將單擊的元素和一個值傳遞給游戲函式，然后可用于跟蹤分數。

//Event listeners
rock.addEventListener("click", evt => game(rock, 0));
paper.addEventListener("click", evt => game(paper, 1));
scissors.addEventListener("click", evt => game(scissors, 2));

現在應該可以了。

uj5u.com熱心網友回復：

讓我們減少大量重復的邏輯并在按鈕組上使用單個事件偵聽器，然后利用事件委托。

最重要的是，為玩家的選擇分配一個價值

//HTML elements saved as JS variables
let rock = document.getElementById("rock");
let paper = document.getElementById("paper");
let scissors = document.getElementById("scissors");
let gameResults = document.getElementById("gameResults");
let scoreboard = document.getElementById("scoreboard");

/*Set up a matirx of results */
let gameMatrix = {
  "rock": {
    "defeats": "scissors",
    "action": "smashes"
  },
  "paper": {
    "defeats": "rock",
    "action": "covers"
  },
  "scissors": {
    "defeats": "paper",
    "action": "cuts"
  }
};

/*Computer options*/
let computerChoices = ["rock", "paper", "scissors"];

/*Generates a random number between 0 and 2 to be substituted for rock, paper, or scissors, respectively.*/
const getComputerChoice = () => {
  // Rock is 0; Paper is 1; Scissors is 2.
  let choice = Math.floor(Math.random() * 3);
  //Get actual name to use as a key
  return computerChoices[choice];
}

/*Player and computer scores which update the "scoreboard" element id; score should update in increments of one.*/
let playerScore = 0;
let computerScore = 0;

/*Game algorithm which should return a random choice from the computer and update the "gameResults" element id, according to the standard rules of Rock Paper Scissors, when interacted with through the event listeners at the bottom of the program.*/
/*Use event delegation from button group*/
const game = (event) => {
  //Check it's a button
  if (event.target.matches("button")) {
    //get player choince from id
    let playerChoice = event.target.id;
    let computerChoice = getComputerChoice();
    let result;
    console.log(`C: ${computerChoice}, P: ${playerChoice}`);

    //Check for a tie
    if (playerChoice === computerChoice) {
      result = 'You tied!';
      playerScore  ;
      computerScore  ;
      //From the matrix, check if player defets computer choice
    } else if (gameMatrix[playerChoice].defeats === computerChoice) {
      playerScore  ;
      //Set the result using the action from the matrix
      result = `You win, ${playerChoice} ${gameMatrix[playerChoice].action} ${computerChoice}`;
    } else {
      computerScore  ;
      //Set the result usig the action  from the matrix but using the computer choice instead
      result = `You lose, ${computerChoice} ${gameMatrix[computerChoice].action} ${playerChoice}`;
    }

    console.log(result);
    gameResults.innerHTML = result;
    scoreboard.innerHTML = `Player: ${playerScore} | Computer: ${computerScore}`
  }
};

//Event listeners- sust to the group holding the button
document.querySelector(".buttons").addEventListener("click", game);

body {
  background-image: url("pexels-pixabay-326311.jpg");
}

p {
  color: white;
  text-align: center;
}

#gameHeader {
  font-family: 'Shizuru', cursive, serif, sans-serif;
  font-size: 75px;
  border: 3px solid white;
  padding-bottom: 20px;
  margin-left: 350px;
  margin-right: 350px;
}

#gameResults {
  font-family: 'Rowdies', cursive, serif, sans-serif;
  font-size: 50px;
  background-color: #EEE;
}

#scoreboard {
  font-family: 'Rowdies', cursive, serif, sans-serif;
  font-size: 20px;
  background-color: black;
  margin-left: 600px;
  margin-right: 600px;
  border: 2px solid white;
  border-radius: 50px;
  padding: 5px;
}

.results {
  position: relative;
  top: 100px;
}

label {
  font-family: 'Roboto Mono', sans-serif, serif;
  font-size: 25px;
  color: white;
}

.labels {
  display: inline-flexbox;
  margin-top: 20px;
}

/*Set a standard class for the labels*/
.labels label{
border: 2px solid white;
  border-radius: 10px;
  padding: 5px;
  position: fixed;
  left: 520px;
  background-color: black;
}

/*Now just set what is needed*/
#rockLabel {
  left: 520px;
}

#paperLabel {
  left: 722px;
}

#scissorsLabel {
  left: 915px;
}

/*Set a standard class for the buttons*/
.buttons button{
  background-color: white;
  background-position: center;
  background-size: contain;
  padding: 50px;
  border: 3px solid black;
  border-radius: 50px;

}


/*Now just set what is needed*/
#rock {
  background-image: url("Rock.jpeg");
}

#paper {
  background-image: url("Papers.jpg");
  margin-left: 100px;
  margin-right: 100px;
}

#scissors {
  background-image: url("Scissors.jpg");
}

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Rock Paper Scissors</title>
  <link rel="stylesheet" href="Rock-Paper-Scissors.css">
  <script src="Rock-Paper-Scissors.js" async></script>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Marko One&family=Orbitron&family=Roboto Mono:wght@100&family=Rowdies:wght@300&family=Saira Condensed:wght@100&family=Shizuru&family=Supermercado One&display=swap" rel="stylesheet">

</head>

<body>

  <header>
    <p id="gameHeader">Rock Paper Scissors</p>
  </header>

  <div class="buttons">
    <center>
      <button id="rock"></button>
      <button id="paper"></button>
      <button id="scissors"></button>
    </center>
  </div>

  <div class="labels">
    <label for="rock" id="rockLabel">Rock</label>
    <label for="paper" id="paperLabel">Paper</label>
    <label for="scissors" id="scissorsLabel">Scissors</label>
  </div>

  <div class="results">
    <p id="gameResults">Try your luck!</p>
    <p id="scoreboard">Player: 0 | Computer: 0</p>
  </div>

</body>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/429552.html

標籤：javascript html css 功能 dom

上一篇：Redux：useSelector回傳undefined但在第3次回傳資料

下一篇：計算陣列布林值的遞回方法