javascript - 将石头剪刀布游戏从警戒转变为 DOM

Question

我已经编写 javascript 代码 2 周多一点了，我正在玩一个石头剪刀布游戏。我使用警报框让游戏运行得相对较好，但现在我想将它从警报移动到屏幕上的某些内容。我创建了一个简单的表格，它将跟踪用户的猜测以及计算机的猜测，并跟踪分数。

目前我的玩家和电脑猜测出现在正确的区域，但它只显示在最后一轮。游戏进行了 3 轮，目前只显示上一轮的猜测。

const uguess = document.querySelector('#uguess')
const cguess = document.querySelector('#cguess')
const uscore = document.querySelector('#uscore')
const cscore = document.querySelector('#cscore')


let button = document.getElementById('btn')

button.addEventListener('click', playerGuess);
let numTries = 0
let userScore = 0
let computerScore = 0

function playerGuess() {
  for (let i = 0; i < 3; i++) {
    const arr = ['rock', 'paper', 'scissors'];
    const number = Math.floor(Math.random() * arr.length);
    let randomIndex = arr[number];

    numTries += 1
    console.log(randomIndex);
    const guess = prompt("Lets play rock, paper, scissors" + "\nWhat is your pick?");

    uguess.innerHTML = guess;
    cguess.innerHTML = randomIndex;

    checkGuess(guess, randomIndex)

  }

  if (userScore > computerScore) {
    alert('Your score was ' + userScore + '\n\n My score was ' + computerScore + '\n\nYou Win!')
  } else {
    alert('Your score was ' + userScore + '\n\n My score was ' + computerScore + '\n\nI Win!')
  }
}



function checkGuess(guess, randomIndex) {

  let playerScore = 0

  if (guess === randomIndex) {
    alert('My guess Was: ' + randomIndex + ' It Looks Like We Tied' + 'You have tried ' + numTries + 'times');

  } else if (guess === 'rock' && randomIndex === 'paper') {
    alert('My guess was: ' + randomIndex + ' \nI win!' + 'You have tried ' + numTries + 'times')
    computerScore++


  } else if (guess === 'rock' && randomIndex === 'scissors') {
    alert('My guess was: ' + randomIndex + '\nYou win!' + 'You have tried ' + numTries + 'times')

    userScore++

  } else if (guess === 'paper' && randomIndex === 'rock') {
    alert('My guess was: ' + randomIndex + ' \nYou win!' + 'You have tried ' + numTries + 'times')
    userScore++

  } else if (guess === 'paper' && randomIndex === 'scissors') {
    alert('My guess was: ' + randomIndex + '\nI win!' + 'You have tried ' + numTries + 'times')
    computerScore++

  } else if (guess === 'scissors' && randomIndex === 'paper') {
    alert('My guess was: ' + randomIndex + ' \nYou win!' + 'You have tried ' + numTries + 'times')
    userScore++

  } else if (guess === 'scissors' && randomIndex === 'rock') {
    alert('My guess was: ' + randomIndex + ' \nI win!' + 'You have tried ' + numTries + 'times')
    computerScore++

  }


}

<h1>Rock Paper Scissors Game</h1>
<div id='gametable'>

  <table>
    <tr>
      <th></th>
      <th>User</th>
      <th>Computer</th>
    </tr>
    <tr>
      <td>Guess</td>
      <td id='uguess'></td>
      <td id='cguess'></td>
    </tr>
    <tr>
      <td>Score</td>
      <td id='uscore'></td>
      <td id='cscore'></td>
    </tr>
    <tr></tr>
  </table>
</div>

<button id='btn' type=b utton>Start Game</button>

我很新，所以希望代码的质量不是太大的问题。提前致谢！

标签： javascript