石頭剪刀布：第一輪得分保持在0

從我凌亂的代碼可以看出，我仍然是 JavaScript 的初學者，所以如果這會傷害你的眼睛，我真的很抱歉。

我正在處理來自The Odin Project 的Rock, Paper, Scissors 專案，我們將通過應用 DOM 方法為其添加一個簡單的 UI。老實說，我真的不知道我這樣做是否正確。我覺得這些if陳述句不應該在事件偵聽器中，但這是我發現使分數計算作業的唯一方法。通過將代碼放在這里，我使它可以播放，但不太正確：

let playerScore = 0;
let computerScore = 0;
let scores = document.createElement('p');
let body = document.querySelector('body');
const results = document.createElement('div');
body.appendChild(results);

const buttons = document.querySelectorAll('button');
buttons.forEach((button) => {
    button.addEventListener('click', () => {
        let playerSelection = button.className;
        let computerSelection = computerPlay();
        let roundResult =  playRound(playerSelection, computerSelection);
        console.log(roundResult);
        score();
        gameEnd();
        if (roundResult === 'playerWin') {
            playerScore  ;
        } else if (roundResult === 'computerWin') {
            computerScore  ;
        }
    })
})

//computer pick
function computerPlay() {
    const pick = ['rock', 'paper', 'scissors'];
    return pick[Math.floor(Math.random() * pick.length)];
}

// Round Play
function playRound(playerSelection, computerSelection) {
    //message that specifies the winner
    let tie = `It's a tie you both picked ${playerSelection}`;
    let playerWin = `You win this round! ${playerSelection} beats ${computerSelection}`;
    let computerWin = `You lose this round! ${computerSelection} beats 
    ${playerSelection}`;

    if(playerSelection === computerSelection) {
        results.innerHTML = tie;
        return 'tie';
    } else if (playerSelection === 'rock' && computerSelection === 'scisors') {
        results.innerHTML = playerWin;
        return 'playerWin';
    } else if (playerSelection === 'paper' && computerSelection === 'rock') {
        results.innerHTML = playerWin;
        return 'playerWin';
    } else if (playerSelection === 'scissors' && computerSelection === 'paper') {
        results.innerHTML = playerWin;
        return 'playerWin';
    } else {
        results.innerHTML = computerWin;
        return 'computerWin';
    }
}

function score() {
    //new element where score would be seen
    scores.innerHTML = `player: ${playerScore} | computer: ${computerScore}`; 
    body.appendChild(scores); 
}

function gameEnd() {
    if(playerScore === 5 || computerScore === 5) {
        document.querySelector('.rock').disabled = true;
        document.querySelector('.paper').disabled = true;
        document.querySelector('.scissors').disabled = true;
        if (playerScore > computerScore) {
            alert('You win the game');
        } else if (computerScore > playerScore) {
            alert('Aww you lose');
        }
    }
}

<button class="rock">Rock</button>
<button class="paper">Paper</button>
<button class="scissors">Scissors</button>

這就是問題所在，第一輪之后得分都保持在 0。它會顯示誰是獲勝者，但在我選擇下一輪之前它不會計算它的分數。我到底哪里錯了？（如果我的解釋聽起來像我的代碼一樣令人困惑，我真的很抱歉。）

無論如何，在應用 DOM 方法之前，這就是初始代碼的樣子。我最初試圖使用這段代碼，但我什至無法用這段代碼計算分數，因為我似乎無法獲得函式 playRound() 的回傳值。

function computerPlay() {
const pick = ['rock', 'paper', 'scissors'];
return pick[Math.floor(Math.random() * pick.length)];
}

function playRound(playerSelection, computerSelection) {
 if (playerSelection === computerSelection) {
    alert(`It's a tie! you both picked ${playerSelection}`);
    return "tie";
 } else if (playerSelection !== "rock" && playerSelection !== "paper" && 
   playerSelection !== "scissors"){
    alert(`You sure about using ${playerSelection} on a game of "Rock, Paper, 
    Scissors"?`)
 } else if (playerSelection === "rock" && computerSelection === "scissors") {
    alert(`You win this round! ${playerSelection} beats ${computerSelection}`);
    return "playerWin";
 } else if (playerSelection === "paper" && computerSelection === "rock") {
    alert(`You win this round! ${playerSelection} beats ${computerSelection}`);
    return "playerWin";
 } else if (playerSelection === "scissors" && computerSelection === "paper") {
    alert(`You win this! ${playerSelection} beats ${computerSelection}`);
    return "playerWin";
 } else {
    alert(`You lose this round! ${computerSelection} beats ${playerSelection}`);
    return "botWin";
 }
}

const computerSelection = computerPlay();

// to loop the game until 5 rounds
function game() {
  let playerScore = 0;
  let botScore = 0;
  let gameWinner = '';

   for (let i = 0; i < 5; i  ) {

    let playerSelection = prompt(`Round ${i 1}: Choose among "Rock, Paper, Scissors" 
      as your weapon`).toLowerCase();
    let roundResult = playRound(playerSelection, computerPlay());

    if (roundResult === "playerWin" ) {
      playerScore  ;
    } else if (roundResult === "botWin" ) {
      botScore  ;
    }
  }

  if (playerScore > botScore) {
    gameWinner = 'You win!';
  } else if (botScore > playerScore) {
    gameWinner = 'You lose, Computer wins!';
  } else {
    gameWinner = 'Draw';
  }

  alert(`Player: ${playerScore}  |  Bot: ${botScore}`);

 if (gameWinner === 'Draw') {
    alert("There is no match winner, draw!");
 } else {
    alert(`${gameWinner}`);
 }
}

game();

這些代碼之間哪個更有可能被修復？還是完全扔掉這段代碼然后重新開始會更好？

uj5u.com熱心網友回復：

問題出在這部分代碼中：

        score();
        gameEnd();
        if (roundResult === 'playerWin') {
            playerScore  ;
        } else if (roundResult === 'computerWin') {
            computerScore  ;
        }

score()將更新 HTML 頁面中的分數，但此時分數尚未更新。這只發生在該if ... else if區塊的后期。

所以解決方案是首先更新分數，然后呼叫score()：

        score();
        gameEnd();
        if (roundResult === 'playerWin') {
            playerScore  ;
        } else if (roundResult === 'computerWin') {
            computerScore  ;
        }

還有一個與此相關的問題：在游戲結束時（當玩家達到 5 分時），gameEnd()將呼叫alert. 但alert不允許頁面實際顯示最新的更改。相反，它會阻止對其進行任何更新。我會在 HTML 元素中而不是在 中顯示游戲結束訊息alert，就像您已經為分數所做的那樣。或者，您可以使用計時器延遲執行alert，但我會避免使用alert.

以下是您可以在gameEnd當前使用的函式中執行的操作alert：

        if (playerScore > computerScore) {
            results.innerHTML  = '<p><b>You win the game</b>';
        } else if (computerScore > playerScore) {
            results.innerHTML  = '<p><b>Aww you lose</b>';
        }

標籤：javascript 功能 dom 前锋 打回来

上一篇：JS克隆html元素導致丟失初始元素

下一篇：如何使用不可用的DOM物件運行函式？