石头布剪刀游戏问题

gdrx4gfi  于 2021-09-13  发布在  Java
关注(0)|答案(2)|浏览(283)

我建立了一个非常基本的石头剪纸游戏,但似乎游戏没有正确地捕捉用户选择或输出正确的结果。。。
我花了好几个小时研究和调整我的代码的各个方面,但都搞不清楚——我想我太幼稚了。
我不想要一个完全不同的版本来解决这个问题-我想修复这个版本,并理解为什么它目前不起作用:)
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>
webghufk

webghufk1#

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

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>
dzhpxtsq

dzhpxtsq2#

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

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);
}

用这个,我设法用石头纸和剪刀记录下来

相关问题