个人中心
gpt4 book ai didi

javascript - RPS 游戏的用户选择

转载 作者：行者123 更新时间：2023-12-03 08:00:17 24 4
gpt4 key购买 nike

问题:当我单击石头、布或剪刀时，我想为每个选择返回一个值。然后，我希望对 USER_CHOICE 中的值选择和 COMPUTER_CHOICE 中的值选择进行比较，以确定谁获胜。

COMPUTER_CHOICE 有效，但比较函数不起作用，或者 USER_CHOICE 函数没有返回值。我可能把这么简单的游戏过于复杂化了，而且我之前都工作过，但忘记了 git tag 它。

期望的结果:当用户点击石头、布或剪刀时，我希望它返回一个值。然后，我希望比较 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>

最佳答案

您的代码中存在多个错误，导致其无法按您想要的方式工作。

首先，您仅调用不带任何参数的 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 中亲自尝试。 。如果您查看所做的更改，应该很容易修复其余代码。

关于javascript - RPS 游戏的用户选择，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34613749/

24 4 0
文章推荐： javascript - Kendo UI - 未捕获的类型错误
文章推荐： javascript - 智能表转到所选项目
文章推荐： javascript - 指令回调函数未从 $watch 内部触发
文章推荐： javascript - 随机/随机化一组具有两个子元素的 div
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com