石头剪刀布游戏问题

Question

我构建了一个非常基本的石头剪刀布游戏，但似乎游戏没有正确捕获用户选择或输出正确的结果......

我花了几个小时研究和调整我的代码的各个方面，但无法弄清楚 - 我猜我太绿了。

我不想要一个完全不同的版本 - 我想修复这个版本并理解为什么它目前不起作用:)

https://codepen.io/anna_whiskey/pen/XWRjQXV

    const gameInputs = ['rock', 'paper', 'scissors'];
    let computerSel;
    let round1Answer;
    let userSelection;


    
    function game() {
    function humanPlay() {

      document.getElementById("btn1").addEventListener("click", () => {
                userSelection = "rock";
            
            })
      document.getElementById("btn2").addEventListener("click", () => {
                userSelection = "paper";
                
            })
      document.getElementById("btn3").addEventListener("click", () => {
                userSelection = "scissors";
                
            })
            
        }

        

        function computerPlay() {
            computerSel = Math.floor(Math.random() * gameInputs.length);
            round1Answer = (gameInputs[computerSel]);
            console.log((gameInputs[computerSel]));
            humanPlay();
        }
        computerPlay();

        document.getElementById("outcome").textContent = `You: ${userSelection} Computer: ${round1Answer}`

        function playRound(round1Answer, userSelection) {

            if (userSelection === 'rock' && round1Answer === 'scissors') {
                alert('You WIN!');
            } else if (userSelection === 'rock' && round1Answer === 'rock') {
                alert('It/s a tie!');
            } else if (userSelection === 'paper' && round1Answer === 'rock') {
                alert('You WIN!');
            } else if (userSelection === 'paper' && round1Answer === 'paper') {
                alert('It/s a tie!');
            } else if (userSelection === 'scissors' && round1Answer === 'paper') {
                alert('You WIN!');
            } else if (userSelection === 'scissors' && round1Answer === 'scissors') {
                alert('It/s a tie!');
            } else {
                alert('You LOSE!');
            }
        }
        playRound(round1Answer, userSelection);
    } 

<!DOCTYPE html>
<html>
 <head>
<meta charset="utf-8">
</head>
<title>Rock Paper Scissors</title>
<body>
<div class="bg"></div>


<button id="btn1" onclick="game()">Rock</button>
<button id="btn2" onclick="game()">Paper</button>
<button id="btn3" onclick="game()">Scissors</button>

<div id="outcome"></div>


<link rel="stylesheet" href="rps.css">
<script type="text/javascript" src="rpsv2.js"></script>

</body>
</html>

Answer 1

您应该尝试为人工输入添加事件侦听器

 const gameInputs = ['rock', 'paper', 'scissors']; let computerSel; let round1Answer; let userSelection; function game() { function humanPlay() { document.getElementById("btn1").addEventListener("click", () => { userSelection = "rock"; console.log(`User Selection: ${userSelection}`) }) document.getElementById("btn2").addEventListener("click", () => { userSelection = "paper"; console.log(`User Selection: ${userSelection}`) }) document.getElementById("btn3").addEventListener("click", () => { userSelection = "scissor"; console.log(`User Selection: ${userSelection}`) }) } function computerPlay() { computerSel = Math.floor(Math.random() * 3); round1Answer = (gameInputs[computerSel]); // console.log(`Round ans is ${round1Answer}`) } function playRound(round1Answer, userSelection) { if (userSelection == 'rock' && round1Answer == 'scissors') { alert('You WIN!'); } else if (userSelection == 'paper' && round1Answer == 'rock') { alert('You WIN!'); } else if (userSelection == 'scissors' && round1Answer == 'paper') { alert('You WIN!'); } else if (userSelection == 'rock' && round1Answer == 'rock') { alert('It/sa tie!'); } else if (userSelection == 'paper' && round1Answer == 'paper') { alert('It/sa tie!'); } else if (userSelection == 'scissors' && round1Answer == 'scissors') { alert('It/sa tie!'); } else { alert('You LOSE!'); } } humanPlay(); computerPlay(); playRound(round1Answer, userSelection); }

使用这个我设法记录了石头纸和剪刀

Answer 2

您可以通过以下脚本JS简单地完成任务

const gameInputs = ['rock', 'paper', 'scissors'];
let computerSel;
let round1Answer;
let userSelection;


function game (humanChoosed) {
  
  userSelection = gameInputs[humanChoosed];

  function computerPlay() {
    computerSel = Math.floor(Math.random() * gameInputs.length);
    round1Answer = (gameInputs[computerSel]);
  }
computerPlay();

  document.querySelector('h1').textContent = `Human: ${userSelection} Computer: ${round1Answer}`;

  function playRound (round1Answer, userSelection) {
 
    if (userSelection === 'rock' && round1Answer === 'scissors') {
        alert ('You WIN!');
    } else if (userSelection === 'rock' && round1Answer === 'rock') {
        alert ('It/s a tie!');
    } else if (userSelection === 'paper' && round1Answer === 'rock') {
        alert ('You WIN!');
    } else if (userSelection === 'paper' && round1Answer === 'paper') {
        alert ('It/s a tie!');
    } else if (userSelection === 'scissors' && round1Answer === 'paper') {
        alert ('You WIN!');
    } else if (userSelection === 'scissors' && round1Answer === 'scissors') {
        alert ('It/s a tie!');
    } else {
       alert ('You LOSE!');
    }
  } 
  playRound (round1Answer, userSelection);
}

HTML

<body>
  <div class="bg"></div>

  <button id="btn1" onclick="game(0)">Rock</button> 
  <button id="btn2" onclick="game(1)">Paper</button>  
  <button id="btn3" onclick="game(2)">Scissors</button> 

  <h1>Hello</h1>
  <link rel="stylesheet" href="rps.css">
  <script type="text/javascript" src="rps.js"></script>
</body>

石头剪刀布游戏问题

问题描述

2 个解决方案

解决方案1
0 已采纳 2021-07-11 14:51:27

解决方案2
0 2021-07-11 15:29:31

石头剪刀布游戏问题

问题描述

2 个解决方案

解决方案1 0 已采纳 2021-07-11 14:51:27

解决方案2 0 2021-07-11 15:29:31

解决方案1
0 已采纳 2021-07-11 14:51:27

解决方案2
0 2021-07-11 15:29:31