【问题标题】:How to Fix Rock Paper Scissors Logic Not Working when there is Tie?有领带时如何修复石头剪刀布逻辑不起作用?
【发布时间】:2021-07-28 07:37:07
【问题描述】:

我使用 HTML JavaScript & CSS & RandoJs 制作了一个简单的石头剪刀布游戏,用于随机选择,但我遇到了一些逻辑问题

var rock = document.getElementById("rock"); // Getting User pickable Rock Element
var paper = document.getElementById("paper"); // Getting User Pickable Paper Element
var scissor = document.getElementById("scissor"); // Getting User Pickable Scissor Element

let robotPick = ["rock", "paper", "scissor"]; // What Robot Can Pick

// Getting Human Score Element For Changing Scores
var humanScore = document.getElementById("humanScore");
var robotScore = document.getElementById("robotScore");
var message = document.getElementById("message"); // Getting message Element

// Adding Event Listeners To Pickable Elements
window.addEventListener("load", function(e) {
    rock.addEventListener("click", function(e) { checkWin("rock"); });
    paper.addEventListener("click", function(e) { checkWin("paper"); });
    scissor.addEventListener("click", function(e) { checkWin("scissor"); });    
});

function checkWin(pick) {
    let humanPick = pick;
    let picks = rando(robotPick).index; // What Robot Will Pick is Generated Randomly using RandoJS
    let whoWon; // This Will Contain Who Won

  // Main Logic
  if (humanPick === "rock" || robotPick[picks] === "rock") whoWon = "tie";
    if (humanPick === "rock" || robotPick[picks] === "paper") whoWon = "robot";
    if (humanPick === "rock" || robotPick[picks] === "scissor") whoWon = "human";

    if (humanPick === "paper" || robotPick[picks] === "paper") whoWon = "tie";
    if (humanPick === "paper" || robotPick[picks] === "scissor") whoWon = "robot";
    if (humanPick === "paper" || robotPick[picks] === "rock") whoWon = "human";

    if (humanPick === "scissor" || robotPick[picks] === "scissor") whoWon = "tie";
    if (humanPick === "scissor" || robotPick[picks] === "rock") whoWon = "robot";
    if (humanPick === "scissor" || robotPick[picks] === "paper") whoWon = "human";

    // Checking Who Won!
    if (whoWon === "human") {
        let x = parseInt(humanScore.innerHTML);
        message.innerHTML = "Robot Chose " + robotPick[picks];
        x++; humanScore.innerHTML = x;
    }
    
    if (whoWon === "robot") {
        let x = parseInt(robotScore.innerHTML);
        message.innerHTML = "Robot Chose " + robotPick[picks];
        x++; robotScore.innerHTML = x;
    }
    
    if (whoWon === "tie") {
        let x = parseInt(robotScore.innerHTML);
        message.innerHTML = "Robot Chose " + robotPick[picks];
        x++; robotScore.innerHTML = x;
    }
}
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rock, Paper & Scissors</title>
  <style>*{transition:all 0.2s ease;-webkit-transition:all 0.2s ease}body{position:absolute;font-family:sans-serif;transform:translate(-50%, -50%);background:#252525;left:50%;top:50%;user-select:none}.body i{font-size:4em;margin:5px}.score{font-size:1.5em;text-align:center;margin-top:2em}p{margin:20px 0;padding:0;color:#ffd900;font-size:0.9em}#hands{text-align:center}#hands i{margin:10px;font-size:3em;color:#ffd900;cursor:pointer}#hands i:hover{transform:scale(1.3)}.humanScore{color:#48ff00}.robotScore{color:#00ccff}</style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>

<div id="hands">
    <i id="rock" class="fas fa-hand-rock"></i>
    <i id="paper" class="fas fa-hand-paper"></i>
    <i id="scissor" class="fas fa-hand-peace"></i>
</div>

<div class="score">
    <span class="humanScore"><i class="fas fa-user-alt"></i> <span id="humanScore">0</span></span>
    &nbsp;&nbsp;
    <span class="robotScore"><i class="fas fa-robot"></i> <span id="robotScore">0</span></span>
    <p id="message">Choose First</p>
</div>

<script src="https://randojs.com/2.0.0.js"></script>

当有平局时它不起作用,我正在使用RandoJs 随机挑选机器人的 Pick 有没有其他方法可以这样做?

我已经使用 cmets 在代码中指定了我所做的事情

我也在使用Font Awesome 5 图标!

【问题讨论】:

  • 请仔细检查您的代码,平局的条件分支会增加一个包含机器人得分的变量,然后将其分配给robotScore,即。您正在指示机器在领带上给机器人一个分数……也请参阅 Chrillewoodz 的回答 :)

标签: javascript html random


【解决方案1】:

您正在执行 OR 检查 (||) 而不是 AND 检查 (&amp;&amp;),请更改为:

if (humanPick === "rock" && robotPick[picks] === "rock") whoWon = "tie";
if (humanPick === "rock" && robotPick[picks] === "paper") whoWon = "robot";
if (humanPick === "rock" && robotPick[picks] === "scissor") whoWon = "human";

if (humanPick === "paper" && robotPick[picks] === "paper") whoWon = "tie";
if (humanPick === "paper" && robotPick[picks] === "scissor") whoWon = "robot";
if (humanPick === "paper" && robotPick[picks] === "rock") whoWon = "human";

if (humanPick === "scissor" && robotPick[picks] === "scissor") whoWon = "tie";
if (humanPick === "scissor" && robotPick[picks] === "rock") whoWon = "robot";
if (humanPick === "scissor" && robotPick[picks] === "paper") whoWon = "human";

【讨论】:

  • 乐于助人:)
【解决方案2】:

您的问题来自您正在使用的运算符||,因为if(A || B) 的意思是if A is true OR B is true then 又名。您只需要其中一个语句为真即可输入 if 语句。其中if(A &amp;&amp; B) 表示if A is true AND B is true then,这意味着两个语句都必须为真才能符合 if 语句。

基本上将||&amp;&amp; 切换。
希望你能明白||&amp;&amp;之间的区别

【讨论】:

    【解决方案3】:

    正如所指出的,逻辑需要AND 而不是OR,当出现平局时,要么双方都得分,要么都不得分,后者更合适。

    var rock = document.getElementById("rock"); // Getting User pickable Rock Element
    var paper = document.getElementById("paper"); // Getting User Pickable Paper Element
    var scissor = document.getElementById("scissor"); // Getting User Pickable Scissor Element
    
    let robotPick = ["rock", "paper", "scissor"]; // What Robot Can Pick
    
    // Getting Human Score Element For Changing Scores
    var humanScore = document.getElementById("humanScore");
    var robotScore = document.getElementById("robotScore");
    var message = document.getElementById("message"); // Getting message Element
    
    
    
    
    // Adding Event Listeners To Pickable Elements
    window.addEventListener("load", function(e) {
        rock.addEventListener("click", function(e) { checkWin("rock"); });
        paper.addEventListener("click", function(e) { checkWin("paper"); });
        scissor.addEventListener("click", function(e) { checkWin("scissor"); });    
    });
    
    function checkWin(pick) {
        let humanPick = pick;
        let picks = rando(robotPick).index; // What Robot Will Pick is Generated Randomly using RandoJS
        let whoWon; // This Will Contain Who Won
    
        // Main Logic
        if (humanPick === "rock" && robotPick[picks] === "rock") whoWon = "tie";
        if (humanPick === "rock" && robotPick[picks] === "paper") whoWon = "robot";
        if (humanPick === "rock" && robotPick[picks] === "scissor") whoWon = "human";
    
        if (humanPick === "paper" && robotPick[picks] === "paper") whoWon = "tie";
        if (humanPick === "paper" && robotPick[picks] === "scissor") whoWon = "robot";
        if (humanPick === "paper" && robotPick[picks] === "rock") whoWon = "human";
    
        if (humanPick === "scissor" && robotPick[picks] === "scissor") whoWon = "tie";
        if (humanPick === "scissor" && robotPick[picks] === "rock") whoWon = "robot";
        if (humanPick === "scissor" && robotPick[picks] === "paper") whoWon = "human";
    
        // Checking Who Won!
        if (whoWon === "human") {
            let x = parseInt(humanScore.innerHTML);
            message.innerHTML = "Robot Chose " + robotPick[picks] + ' - you win!';
            x++; humanScore.innerHTML = x;
        }
        
        if (whoWon === "robot") {
            let x = parseInt(robotScore.innerHTML);
            message.innerHTML = "Robot Chose " + robotPick[picks] + ' - Robot wins!';
            x++; robotScore.innerHTML = x;
        }
        
        if (whoWon === "tie") {
            let x = parseInt(robotScore.innerHTML);
            let y = parseInt(humanScore.innerHTML);
            message.innerHTML = "You both Chose " + pick;
            
            robotScore.innerHTML = x;
            humanScore.innerHTML = y;
        }
    }
    *{transition:all 0.2s ease;-webkit-transition:all 0.2s ease}body{position:absolute;font-family:sans-serif;transform:translate(-50%, -50%);background:#252525;left:50%;top:50%;user-select:none}.body i{font-size:4em;margin:5px}.score{font-size:1.5em;text-align:center;margin-top:2em}p{margin:20px 0;padding:0;color:#ffd900;font-size:0.9em}#hands{text-align:center}#hands i{margin:10px;font-size:3em;color:#ffd900;cursor:pointer}#hands i:hover{transform:scale(1.3)}.humanScore{color:#48ff00}.robotScore{color:#00ccff}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    
    
    <div id="hands">
        <i id="rock" class="fas fa-hand-rock"></i>
        <i id="paper" class="fas fa-hand-paper"></i>
        <i id="scissor" class="fas fa-hand-peace"></i>
    </div>
    
    
    <div class="score">
        <span class="humanScore"><i class="fas fa-user-alt"></i> <span id="humanScore">0</span></span>
        &nbsp;&nbsp;
        <span class="robotScore"><i class="fas fa-robot"></i> <span id="robotScore">0</span></span>
        <p id="message">Choose First</p>
    </div>
    
    
    <script src="https://randojs.com/2.0.0.js"></script>

    --更新-- 在工作了奇怪的一天之后,当我回来时,我对代码进行了一些尝试,因为我觉得存在比我之前发布的更完善的解决方案。目标始终是尝试编写干净的标记和代码,所以我在这里谦虚地提供一个堕落的漫谈,希望它有意义......

    document.addEventListener('DOMContentLoaded',()=>{
      const q=(e,n=document)=>n.querySelector(e);
      let i=0;
    
    
      function checkWin( e ) {
        let humanScore = q('.score .human span');
        let robotScore = q('.score .robot span');
        let message = q('#message');
    
    
        const mt_rand=(a,b)=>Math.floor(Math.random()*(b-a+1)+a);
        const announce=(m,c)=>message.innerHTML=[ 'Robot picked '+c, m ].join(' - ');
        const lookup={
          'Rock':'r',
          'Paper':'p',
          'Scissors':'s'
        };
        const options=Object.keys( lookup );
        const matrix=[
          /* player chooses Rock */
          ['r','r',0],  //draw
          ['r','p',0],  //lose
          ['r','s',1],  //win
    
          /* Player chooses Paper */
          ['p','p',0],  //draw
          ['p','r',1],  //win
          ['p','s',0],  //lose
    
          /* Player chooses Scissors */
          ['s','s',0],  //draw
          ['s','r',0],  //lose
          ['s','p',1]       //win
        ];
    
        let pick=e.target.dataset.id;
        let rp=mt_rand( 0, options.length - 1 );
    
    
    
    
        matrix.some( a=>{
          let robot=lookup[ options[ rp ] ];
          let human=lookup[ pick ];
    
          if( a[0]==human && a[1]==robot ){
    
            let msg=a[2] ? 'You win!' : 'Robot wins!';
            if( human == robot )msg='It was a draw!';
    
            // find current score for both - cast as number
            let hs=Number( humanScore.dataset.score );
            let rs=Number( robotScore.dataset.score );
    
            //update both player & robot scores
            if( human!=robot ){
              i++;
              // update total count
              q('div[data-total]').dataset.total=i;                         
    
              // scores
              humanScore.dataset.score = a[2] ? hs + a[2] : hs + 0;
              robotScore.dataset.score = !a[2] ? rs + ( 1 - a[2] ) : rs + 0;
              // percentages
              humanScore.dataset.pc=( ( Number( humanScore.dataset.score ) / i ) * 100 ).toFixed(0);
              robotScore.dataset.pc=( ( Number( robotScore.dataset.score ) / i ) * 100 ).toFixed(0);
            }
    
            announce( msg, options[ rp ].toLowerCase() );
            return true;
          }
        });
      }
    
    
      // Adding Event Listeners To Pickable Elements
      document.querySelectorAll('#hands > i').forEach( n => n.addEventListener( 'click', checkWin ) );
    });
    *{transition:all 0.2s ease;-webkit-transition:all 0.2s ease}
    body{position:absolute;font-family:sans-serif;transform:translate(-50%, -50%);background:#252525;left:50%;top:50%;user-select:none}
    .body i{font-size:4em;margin:5px}
    .score{font-size:1.5em;text-align:center;margin-top:2em}
    p{margin:20px 0;padding:0;color:#ffd900;font-size:0.9em}
    #hands{text-align:center}
    #hands i{margin:10px;font-size:3em;color:#ffd900;cursor:pointer}
    #hands i:hover{transform:scale(1.3)}
    .human{color:#48ff00}
    .robot{color:#00ccff}
          
          
    [data-score]:after{ content:" (" attr( data-pc )"%)";font-size:0.75rem; }
    [data-score]:before{content:attr(data-score)}
    
    .score > span,
    .score > span span{margin:0 0.5rem;display:inline-block;}
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
    <div id='hands'>
      <i data-id='Rock' class='fas fa-hand-rock'></i>
      <i data-id='Paper' class='fas fa-hand-paper'></i>
      <i data-id='Scissors' class='fas fa-hand-peace'></i>
    </div>
    <div class='score' data-total=0>
      <span class='human'>
        <i class='fas fa-user-alt'></i>
        <span data-score=0 data-pc=0></span>
      </span>
      <span class='robot'>
        <i class='fas fa-robot'></i>
        <span data-score=0 data-pc=0></span>
      </span>
      <p id='message'>You choose first</p>
    </div>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2014-11-29
      • 1970-01-01
      • 2014-03-13
      • 1970-01-01
      • 2017-11-27
      • 1970-01-01
      • 2021-01-10
      • 2018-04-06
      相关资源
      最近更新 更多