RPS 游戏的用户选择答案

【问题标题】：User Choice for an RPS gameRPS 游戏的用户选择
【发布时间】：2022-03-14 21:16:22
【问题描述】：

问题：当我点击石头、纸或剪刀时，我想为每个选择返回一个值。然后，我希望比较来自 USER_CHOICE 的值选择和来自 COMPUTER_CHOICE 的值选择以确定谁获胜。

COMPUTER_CHOICE 有效，但比较函数无效或 USER_CHOICE 函数未返回值。我可能把这么简单的游戏复杂化了，我以前都做过，但忘了给它打标签。

期望结果：当用户点击石头、纸或剪刀时，我希望它返回一个值。然后，我希望比较 USER_CHOICE 和 COMPUTER_CHOICE 的值，以便确定获胜者。

JSBIN：http://jsbin.com/rukomugaze/edit?html,js,output

JavaScript：

window.onload = function() {

var CHOICE_ROCK = document.querySelector('#rock'),
  CHOICE_PAPER = document.querySelector('#paper'),
  CHOICE_SCISSORS = document.querySelector('#scissors'),
  WINNER_TXT = document.querySelector('#winner'),
  BUTTONS = document.querySelectorAll('input'),
  COMP_TXT = document.querySelector('#compChoice');


CHOICE_ROCK.addEventListener('click', USER_CHOICE, false);
CHOICE_PAPER.addEventListener('click', USER_CHOICE, false);
CHOICE_SCISSORS.addEventListener('click', USER_CHOICE, false);



// Return user choice value;
function USER_CHOICE(e) {
  var el = e.target;
  if (el === CHOICE_ROCK) {
    ROCK();
    COMP_TXT.innerHTML = COMPUTER_CHOICE() + ' is the computers choice!';
    console.log('I am rock');
    return 'rock';
  } else if (el === CHOICE_PAPER) {
    COMP_TXT.innerHTML = COMPUTER_CHOICE() + ' is the computers choice!';
    console.log('I am paper');
    return 'paper';
  } else if (el === CHOICE_SCISSORS) {
    COMP_TXT.innerHTML = COMPUTER_CHOICE() + ' is the computers choice!';
    console.log('I am scissors');
    return 'scissors';
  }
  e.stopPropagation();
}
// Return value of computer choice
function COMPUTER_CHOICE() {
  var num = Math.floor(Math.random() * 3) + 1;
  var choice = '';
  if (num === 1) {
    choice = 'rock';
  } else if (num === 2) {
    choice = 'paper';
  } else {
    choice = 'scissors';
  }
  return choice;
}

// function TIE(USER_CHOICE, COMPUTER_CHOICE) {
//   if (USER_CHOICE === COMPUTER_CHOICE) {
//     WINNER_TXT.innerHTML = 'ITS A TIE!';
//   }
// }


// Break up into functions
// compare values of user choice and computer chocie
function ROCK(COMPUTER_CHOICE) {
  if (USER_CHOICE === CHOICE_ROCK && COMPUTER_CHOICE === 'scissors') {
    WINNER_TXT.innerHTML = 'ROCK WINS!';
  } else if (USER_CHOICE === CHOICE_ROCK && COMPUTER_CHOICE === 'paper') {
    WINNER_TXT.innerHTML = 'PAPER WINS!';
  }
}

function PAPER(USER_CHOICE, COMPUTER_CHOICE) {
  //Paper
  if (USER_CHOICE === CHOICE_PAPER && COMPUTER_CHOICE === 'rock') {
    WINNER_TXT.innerHTML = 'PAPER WINS!';
  } else if (USER_CHOICE === CHOICE_PAPER && COMPUTER_CHOICE === 'scissors') {
    WINNER_TXT.innerHTML = 'PAPER WINS!';
  }
}

function SCISSORS(USER_CHOICE, COMPUTER_CHOICE) {
  //scissors
  if (USER_CHOICE === CHOICE_SCISSORS && COMPUTER_CHOICE === 'paper') {
    WINNER_TXT.innerHTML = 'SCISSORS WINS!';
  } else if (USER_CHOICE === CHOICE_SCISSORS && COMPUTER_CHOICE === 'rock') {
    WINNER_TXT.innerHTML = 'ROCK WINS!';
  }
}
};

HTML：

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <!-- Place favicon.ico in the root directory -->
        <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" integrity="sha384-XXXXXXXX" crossorigin="anonymous">
        <link rel="stylesheet" href="main.css">
        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <div class="container">
          <div class="header"><h1>ROCK, PAPER, OR SCISSORS!</h1></div>
          <div><span>Choose wisely...</span></div>
          <div><span id="winner">Winner text</span></div>
          <div><span id="compChoice">Winner text</span></div>
          <div class="inner-container">
            <div class="row">
              <div class='items'>
                <img class="rps" src="https://cdn0.iconfinder.com/data/icons/rock-paper-scissors-emoji/792/rock-paper-scissors-emoji-cartoon-027-128.png" width="200" height="300">
                  <div><input type="submit" value="Rock" id="rock"></div>
              </div>
              <div class='items'>
                <img class="rps" src="https://cdn0.iconfinder.com/data/icons/rock-paper-scissors-emoji/792/rock-paper-scissors-emoji-cartoon-019-256.png" width="200" height="300">
                  <div><input type="submit" value="Paper" id="paper"></div>
              </div>
              <div class='items'>
                <img class="rps" src="https://cdn0.iconfinder.com/data/icons/rock-paper-scissors-emoji/792/rock-paper-scissors-emoji-cartoon-014-512.png" width="200" height="300">
                  <div><input type="submit" value="Scissors" id="scissors"></div>
              </div>
              </div>
          </div>
          <div class="footer">
            <span>&copy; Zack 2016</span>
          </div>
        </div>






        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>

        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
            (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
            function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
            e=o.createElement(i);r=o.getElementsByTagName(i)[0];
            e.src='https://www.google-analytics.com/analytics.js';
            r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
            ga('create','UA-XXXXX-X','auto');ga('send','pageview');
        </script>
      <script src="rps.js"></script>
    </body>
</html>

【问题讨论】：

控制台出现什么错误？我在JSFiddle 中尝试了您的代码，它按预期工作，所以肯定有其他问题。
您需要将 COMPUTER_CHOICE() 和 USER_CHOICE() 的返回值存储在一个变量中。而且你没有调用你的 ROCK,... 函数
@Daniel B. 是的，计算机选择部分有效，但如果您查看 ROCK、PAPER 和 SCISSORS 功能。我希望他们在单击时比较用户选择和计算机选择。写有“获胜者文字”的文字应更改为：“ROCK WINS”或“PAPER WINS！”等
好吧，你永远不会调用ROCK 函数，因此不会发生任何事情。你是问点击按钮后如何调用比较函数？
@Daniel B，我试过打电话给 ROCK，但仍然得到相同的结果。除非我说错了？

标签： javascript dom-events

【解决方案1】：

您的代码中有多个错误使其无法按您想要的方式工作。

首先，您只调用ROCK() 而没有任何参数，从而错误地调用了相应的事件处理程序。

您可以简单地使用用户选择和计算机选择调用事件处理程序，而不是从事件侦听器函数返回某些内容，如下所示。

if (el === CHOICE_ROCK) {
    COMP_TXT.innerHTML = computerChoice + ' is the computers choice!';
    console.log('I am rock');
    ROCK("rock", computerChoice);
}

对于其他两个选择也是如此。

在您的代码中，您将字符串与元素进行比较，而不是元素的值。在您的情况下，您使用了混合大小写，因此使用 element.id 而不是值会更容易。

function ROCK(USER_CHOICE, COMPUTER_CHOICE) {
    console.log("Inside rock function");
    //Note that CHOICE_ROCK is an element, and you try to compare it to a string
    //Instead, look at the elements id and use that to compare
    if (USER_CHOICE === CHOICE_ROCK.id && COMPUTER_CHOICE === 'scissors') {
        console.log("rock wins");
        WINNER_TXT.innerHTML = 'ROCK WINS!';
    } else if (USER_CHOICE === CHOICE_ROCK.id && COMPUTER_CHOICE === 'paper') {
        console.log("PAPER wins");
        WINNER_TXT.innerHTML = 'PAPER WINS!';
        console.log(WINNER_TXT)
    }
}

我修复了代码，使其在用户单击 rock 按钮时工作，您可以在this JSFiddle 中自己尝试。如果您查看更改，应该很容易修复其余代码。

【讨论】：

卫生署！我总是忘记在没有参数的情况下调用我的函数。一件事我需要开始养成不忘记的习惯。既然我看到函数正在传递参数，那么您的更改就完全有意义了。哇，我什至不知道 element.id 存在。我也确实想出了另一种获得结果的方法，这就是我对语言的热爱，一个问题的许多解决方案。我感谢您今天的所有帮助，我肯定从您那里学到了一些新东西！干杯！
很高兴我能帮上忙。我认为您应该查看 document.querySelector('#rock') 返回的内容，因为这不是您最初的想法。它选择并返回一个元素，或者如果使用类标识符，则返回一个元素数组。
getElementByID 会以不同的方式返回吗？我读过关于选择元素的不同方法，但我想我可能错过了这样做时它们返回的部分。
不，正如函数名称所暗示的那样，它从 id 中获取元素。因此它将返回对匹配元素的引用。然后，您可以使用element.id、element.style 等访问元素属性。养成检查 MDN 上的函数的习惯，因为他们解释了它们是如何工作的。
是的，我确实检查了功能。自从我读到 ELEMNTBYID 和 QUERYSELECTOR 之类的 getter 以来已经有一段时间了。谢谢男人的欢呼！