时间戳

首页 > 解决方案 > 有领带时如何修复石头剪刀布逻辑不起作用？

javascript - 有领带时如何修复石头剪刀布逻辑不起作用？

问题描述

我使用 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 有没有其他方法可以做到这一点？

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

而且我正在使用Font Awesome 5 For Icons！

标签： javascripthtmlrandom

解决方案

正如所指出的，逻辑需要逻辑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>

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

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>

推荐阅读