按 Enter 键后如何重置分数？还有如何让用户在分数达到3后不选择选项？

问题描述 投票：0回答：1

计算机输出切换，但在我单击其中一个选项后计分板返回到原始分数

我的目标是在用户按回车键后重置分数并再次正常播放。也可以在其中一项分数达到 3 分后禁用选项。

const choices = ['Rock', 'Paper', 'Scissors']
let userScore = document.querySelector('.result-score-user')
let computerScore = document.querySelector('.result-score-computer')
const computerOutput = document.querySelector('.computer-output')
const outcome = document.querySelector('.outcome')
const rockPaperScissors = document.querySelectorAll('li')
const scores = document.querySelector('.scores')


let userPoints = 0
let computerPoints = 0
userScore.innerHTML = userPoints
computerScore.innerHTML = computerPoints

rockPaperScissors.forEach(choice => {
  choice.addEventListener('click', () => {
    userChoice = choice.innerHTML
    let arr = [...choices]
    const random = arr[Math.floor(Math.random() * arr.length)]
    computerOutput.innerHTML = random
    isWinner()
    userScore.innerHTML = userPoints
    computerScore.innerHTML = computerPoints
    reset()
  })
})

function isWinner() {
  switch (computerOutput.innerHTML + userChoice) {
    case 'RockScissors':
    case 'ScissorsPaper':
    case 'PaperRock':
      outcome.innerHTML = 'You Lose'
      computerPoints++
      break
    case 'ScissorsRock':
    case 'PaperScissors':
    case 'RockPaper':
      outcome.innerHTML = 'You Win!'
      userPoints++
      break
    case 'RockRock':
    case 'ScissorsScissors':
    case 'PaperPaper':
      outcome.innerHTML = 'Draw'
      break
  }
}

function reset() {
  if (userPoints === 3) {
    outcome.innerHTML = 'You Win the game! <br> Press Enter to reset'
    endGame()
  }

  if (computerPoints === 3) {
    outcome.innerHTML = 'You Lost the game. <br> Press Enter to reset'
    endGame()
  }
}

function endGame() {
  document.body.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
      computerOutput.innerHTML = 'Computer chose...'
      outcome.innerHTML = ''
      userPoints.textContent = 0
      computerPoints.textContent = 0
    }
  })
}


function reset() {
  if (userPoints === 3) {
    outcome.innerHTML = 'You Win the game! <br> Press Enter to reset'
    endGame()
  }

  if (computerPoints === 3) {
    outcome.innerHTML = 'You Lost the game. <br> Press Enter to reset'
    endGame()
  }
}

function endGame() {
  document.body.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
      computerOutput.innerHTML = 'Computer chose...'
      outcome.innerHTML = ''
      userPoints.textContent = 0
      computerPoints.textContent = 0
    }
  })
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <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=Lato&family=Roboto&family=Staatliches&display=swap" rel="stylesheet">
  <title>Rock Paper Scissors</title>
</head>

<body>
  <main class="container">
    <div class="scoreboard">
      <div class="score-heading">Score</div>
      <div class="scores">
        <div class="user-score score">You: <span class="result-score-user"></span></div>
        <div class="computer-score score">Computer: <span class="result-score-computer"></span></div>
      </div>
    </div>
    <div class="user-choice">
      <ul class="choices">
        <li>Rock</li>
        <li>Paper</li>
        <li>Scissors</li>
      </ul>
    </div>
    <div class="computer-choice">
      <div class="computer-output">Computer chose...</div>
    </div>
    <div class="outcome"></div>
  </main>

  <script src="script.js"></script>
  <script src="https://kit.fontawesome.com/f439b384ed.js" crossorigin="anonymous"></script>
</body>

</html>

我尝试将 userPoints 和 ComputerPoints 重置回 0，但按 Enter 并再次播放后，点数重置为原始值。

javascript dom-events reset
1个回答
0
投票

在上面的例子中，userPoints和computerPoints不是DOM元素，而是保存值的变量。 将分数重置为 0，然后

innerHTML
该值。

const choices = ['Rock', 'Paper', 'Scissors']
let userScore = document.querySelector('.result-score-user')
let computerScore = document.querySelector('.result-score-computer')
const computerOutput = document.querySelector('.computer-output')
const outcome = document.querySelector('.outcome')
const rockPaperScissors = document.querySelectorAll('li')
const scores = document.querySelector('.scores')


let userPoints = 0
let computerPoints = 0
userScore.innerHTML = userPoints
computerScore.innerHTML = computerPoints

rockPaperScissors.forEach(choice => {
  choice.addEventListener('click', () => {
    userChoice = choice.innerHTML
    let arr = [...choices]
    const random = arr[Math.floor(Math.random() * arr.length)]
    computerOutput.innerHTML = random
    isWinner()
    userScore.innerHTML = userPoints
    computerScore.innerHTML = computerPoints
    reset()
  })
})

function isWinner() {
  switch (computerOutput.innerHTML + userChoice) {
    case 'RockScissors':
    case 'ScissorsPaper':
    case 'PaperRock':
      outcome.innerHTML = 'You Lose'
      computerPoints++
      break
    case 'ScissorsRock':
    case 'PaperScissors':
    case 'RockPaper':
      outcome.innerHTML = 'You Win!'
      userPoints++
      break
    case 'RockRock':
    case 'ScissorsScissors':
    case 'PaperPaper':
      outcome.innerHTML = 'Draw'
      break
  }
}

function reset() {
  if (userPoints === 3) {
    outcome.innerHTML = 'You Win the game! <br> Press Enter to reset'
    endGame()
  }

  if (computerPoints === 3) {
    outcome.innerHTML = 'You Lost the game. <br> Press Enter to reset'
    endGame()
  }
}

function endGame() {
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
      computerOutput.innerHTML = 'Computer chose...'
      outcome.innerHTML = '';
      userPoints = 0;
      computerPoints = 0;
      userScore.innerHTML = userPoints
      computerScore.innerHTML = computerPoints
    }
  })
}
<main class="container">
  <div class="scoreboard">
    <div class="score-heading">Score</div>
    <div class="scores">
      <div class="user-score score">You: <span class="result-score-user"></span></div>
      <div class="computer-score score">Computer: <span class="result-score-computer"></span></div>
    </div>
  </div>
  <div class="user-choice">
    <ul class="choices">
      <li>Rock</li>
      <li>Paper</li>
      <li>Scissors</li>
    </ul>
  </div>
  <div class="computer-choice">
    <div class="computer-output">Computer chose...</div>
  </div>
  <div class="outcome"></div>
</main>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.