javascript - 如何创建一个检查图像是否相同并返回结果的函数

Question

我正在做一个石头剪刀布游戏。我对javascript相当陌生，所以我不太了解。我已经创建了一个函数，当用户进行选择时显示计算机的选择。我接下来要做的是创建一个函数，比较用户做出的选择和 cpu 做出的选择，然后返回结果，无论是赢、输还是平局。

我尝试运行 if 语句来检查它们是否相等，但我无法弄清楚在做出选择时如何检查这两个图像是否彼此相等。

let userRock = document.querySelector('.rock')
let userPaper = document.querySelector('.paper')
let userScissors = document.querySelector('.scissors')
const cpuScissors = document.querySelector('.cpu-scissors')
const cpuPaper = document.querySelector('.cpu-paper')
const cpuRock = document.querySelector('.cpu-rock')
let result = document.querySelector('.result')
let currentItem;

userPaper.addEventListener('click', start)
userScissors.addEventListener('click', cpuChoice)
userRock.addEventListener('click', cpuChoice)

function start() {
  cpuChoice()
  getWinner()
}

// Computer Choice
function cpuChoice() {
  const rand = Math.random()
  if (currentItem) {
    currentItem.style.display = 'none'
  }
  if (rand < .34) {
    cpuPaper.style.display = 'inline-block'
    currentItem = cpuPaper;
  } else if (rand >= .67) {
    cpuRock.style.display = 'inline-block'
    currentItem = cpuRock;

  } else {
    cpuScissors.style.display = 'inline-block'
    currentItem = cpuScissors;
  }
}

// Get Winner 
function getWinner() {

}

<div class="main-container">
  <div class="score">
    <p>You:0</p>
    <p>Computer:0</p>
  </div>

  <div class="user-choice">
    <img class="rock" src="icons/rock.png">
    <img class="paper" src="icons/paper.png">
    <img class="scissors" src="icons/scissors.png">
  </div>
  <div class="cpu-result">
    <img class="cpu-rock" src="icons/rock.png">
    <img class="cpu-paper" src="icons/paper.png">
    <img class="cpu-scissors" src="icons/scissors.png">

  </div>

  <div class="result"></div>

标签： javascripthtmlcss

Answer 1

你的方法是错误的：
- 你让玩家选择；
- 你让电脑选择；
- 您更新视图（隐藏/显示图像）；
- 然后您尝试比较显示的图像以确定谁赢了。

正确的逻辑是：
- 让玩家选择；
- 让电脑选择；
- 比较两个结果以确定谁赢了；
- 更新视图（隐藏/显示图像）。

所展示的只是脚本中幕后发生的事情的反映。

我在 10 分钟内完成了一个小石头剪刀布游戏。可能有更聪明的方法可以找到赢家，但你会明白的。

const items = ["rock", "paper", "scissors"],
  issues = ["Draw", "You win", "Computer wins"];

let playerChoice = "",
  compChoice = "";

$("button").click(function() {
  const $this = $(this);
  $("button").css("outline", "none");
  $this.css("outline", "blue solid 2px");
  playerChoice = $this.data("val");
  computerChooses();
})

const computerChooses = () => {
  const rand = Math.floor(Math.random() * 3); // 0,1 or 2
  compChoice = items[rand]; // "rock", "paper" or "scissors"
  $(".compChoice img").hide();
  $(".compChoice").show();
  $("#img" + rand).show();
  findWinner()
}

const findWinner = () => {
  let issue;

  if (playerChoice === compChoice) {
    issue = 0;
  } else if (playerChoice === "rock") {
    issue = compChoice === "scissors" ? 1 : 2;
  } else if (playerChoice === "paper") {
    issue = compChoice === "scissors" ? 2 : 1;
  } else { // player chose scissors
    issue = compChoice === "rock" ? 2 : 1;
  }
  $(".result").text(issues[issue]) // "Draw", "You win" or "Computer wins"
}

button {
  cursor: pointer;
}

img {
  width: 32px;
  height: 32px;
}

.compChoice {
  display: none;
}

.compChoice img {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>Choose :</div>

<button data-val="rock">
    <img src="https://image.flaticon.com/icons/svg/838/838023.svg"/>
</button>

<button data-val="paper">
    <img src="https://img.icons8.com/metro/1600/sheet-of-paper.png"/>
</button>

<button data-val="scissors">
    <img src="https://png.icons8.com/scissors/win8/1600"/></button>
<br/>
<br/>
<div class="compChoice">
  <div>Computer picks :</div><img id="img0" src="https://image.flaticon.com/icons/svg/838/838023.svg" /><img id="img1" src="https://img.icons8.com/metro/1600/sheet-of-paper.png" /><img id="img2" src="https://png.icons8.com/scissors/win8/1600" />
</div>
<br/>
<div class="result"></div>