如何制作檢查圖像是否相同並返回結果的函數

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> 

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>