剪刀石头布游戏问题

Question

我构建了一个非常基本的石头剪刀布游戏，但似乎游戏无法正确捕获 userSelection 或输出正确的结果...

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

我不想要一个完全不同的版本来说明如何做到这一点 - 我想修复这个版本并了解它为什么目前不起作用:)

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/s a tie!');
        } 
        else if (userSelection == 'paper' && round1Answer == 'paper') {
            alert('It/s a tie!');
        } 
        else if (userSelection == 'scissors' && round1Answer == 'scissors') {
            alert('It/s a 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>