剪刀石頭布宣布獲勝者邏輯-有解無憂

我正在嘗試撰寫一個簡單的 Rock Paper Scissors 游戲，其中包含玩家單擊以觸發事件偵聽器并啟動游戲的三個影像playGame()。
我的第二個函式遇到問題的地方，declareWinner()它應該評估 if/else 陳述句以及用戶和計算機選擇并宣布獲勝者。我認為問題在于，userInput但我不知道問題是什么。每次游戲運行時，它都會跳到else陳述句和 console.logs “It's a tie.”。.
我究竟做錯了什么？

這是我的 HTML 和 CSS

//Initialize scores to zero
let yourScore = 0;
let computerScore = 0;
let roundNum = 0;
let userInput;
let computerInput;

//Global Variables
const userRock = document.querySelector(".user-rock");
const userPaper = document.querySelector(".user-paper");
const userScissors = document.querySelector(".user-scissors");
const computerRock = document.querySelector(".computer-rock");
const computerPaper = document.querySelector(".computer-paper");
const computerScissors = document.querySelector(".computer-scissors");
const scoreUser = document.querySelector(".user-score");
const scoreComputer = document.querySelector(".computer-score");


let computerSelection = document.getElementById("computer-selection");
          
// Adding event listener to User icons
userRock.addEventListener("click", playGame);
userPaper.addEventListener("click", playGame);
userScissors.addEventListener("click", playGame);

// Create playGame() to start game when image is clicked
function playGame (){
    let computerInput = Math.floor(Math.random() * 4);
        if (computerInput === 1) {
            computerInput === 'rock'
            console.log ("computer chose rock");
        }
        if (computerInput === 2) {
            computerInput === 'paper'        
            console.log ("computer chose paper");
        }
        if (computerInput === 3) {
            computerInput === 'scissors'
            console.log ("computer chose scissors");
        }
    evaluateRound(userInput, computerInput);
}

    function evaluateRound(userInput, computerInput) {
        if(userInput === 'rock' && computerInput === 'paper') {
            console.log ('You lose! Paper beats rock!'); 
            scoreComputer.innerHTML = scoreComputer  ;    
        } if (userInput === 'rock' && computerInput === 'rock') {
            console.log ('Its a tie!');     
        } if (userInput === 'rock' && computerInput === 'scissors') {
            console.log ('You win! Rock beats scissors!');
            scoreUser.innerHTML = scoreUser  ;      
        // User Chooses Paper
        } else if(userInput === "paper" && computerInput === 'rock') {
            console.log ('You win! Rock beats paper!');   
            scoreUser.innerHTML = scoreUser  ;     
        } else if (userInput === 'paper' && computerInput === 'paper') {
            console.log ('Its a tie!');     
        } else if (userInput === 'paper' && computerInput === 'scissors') {
            console.log ('You lose! Scissors beats paper!'); 
            scoreComputer.innerHTML = scoreComputer  ;    
        // User Chooses Scissors
        } else if(userInput === "scissors" && computerInput === 'rock') {
            console.log ('You lose! Rock beats scissors!');     
            scoreComputer.innerHTML = scoreComputer  ; 
        } else if (userInput === 'scissors' && computerInput === 'paper') {
            console.log ('You win! Scissors beats paper!'); 
            scoreUser.innerHTML = scoreUser  ;      
        } else {
            console.log ('It"s a tie!');  
        }  
    }

和

<!DOCTYPE html>
<html lang="en">
<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">
    <link rel="stylesheet" href="index.css"> 
    <title>Rock Paper Scissors</title>
    <h1> Rock Paper Scissors</h1>
    <h2> The first player to get <span>5 points</span> wins!</h2>

    <p>SCORE:</p> 
   
    <div class="score-board">
        <div class="computer-score">0</div>  
        <div class="user-score">0</div>  
    </div>

    <div class="gameboard">    
        <div class="user-choices">
            <div class="user-instructions">You chose:<div class="user-selection"></div>
            <div class="user-icons">
                <div class="game-button">
                    <img class ="user-rock" src="rock.jpg" height="60px"></img>
                    <h3>Rock</h3>
                </div>
                <div class="game-button">
                    <img class="user-paper" src="paper.jpg" height="60px"></img>
                    <h3>Paper</h3>
                </div>
                <div class="game-button">
                    <img class="user-scissors" src="scissors.jpg" height="60px"></img>
                    <h3>Scissors</h3>
                </div>
            </div>
            </div>
        </div>
    
        <div class="computer-choices">
            <div class="computer-instructions">Computer chose:<div class="computer-selection"></div>
            <div class="computer-icons">
                <div class="rock-selection">
                    <img class="computer-rock" src="rock.jpg" height="60px"></img>
                    <h3>Rock</h3>
                </div>
                <div class="paper-selection">
                    <img class="computer-paper" src="paper.jpg" height="60px"></img>
                    <h3>Paper</h3>
                </div>
                <div class="scissors-selection">
                    <img class="computer-scissors" src="scissors.jpg" height="60px"></img>
                    <h3>Scissors</h3>
                </div>
            </div>
            </div>
        </div>
  

</head>
<body>
    <script src="index.js"></script>
</body>
</html>

uj5u.com熱心網友回復：

您的索引邏輯錯誤 Math.floor(Math.random() * 4)可以給您0,1,2,3- 但您只需要0,1,2.
作為應用程式一部分的檔案標簽應該進入<body>，而不是<head>

還鑒于 Rock Paper Scissors實際上是一個索引游戲，您可以將您的邏輯轉換為更簡單的東西：

const fig = ["Rock", "Paper", "Scissors"];
const msg = ["You won", "You lost", "It's a draw"];
const score = [0, 0, 0]; // 0= PL's score,  1= AI's score, 2=Total Draws

function play() {
  const PL = Number(this.dataset.player);   // Get 0, 1, 2 from button data-player
  const AI = Math.floor(Math.random() * 3); // Generate random 0, 1, 2 integer

  let res; // Result to be determined:

  if (PL === AI) {
    res = 2;  // Draw
  } else if ((AI   1) % 3 === PL) {
    res = 0;  // Player wins
  } else {
    res = 1;  // Computer wins
  }
  
  score[res]  = 1;

  console.log(`
    ${msg[res]} 
    You played: ${fig[PL]}
    Computer played: ${fig[AI]} 
    Score: Player: ${score[0]} Computer: ${score[1]} Draws: ${score[2]}
  `);
}

document.querySelectorAll("[data-player]").forEach((el) => {
  el.addEventListener("click", play);
});

<button data-player="0" type="button">ROCK</button>
<button data-player="1" type="button">PAPER</button>
<button data-player="2" type="button">SCISSORS</button>

讓我們來看看“RPS 是一個游戲如果索引”的關鍵概念。

最簡單的邏輯是當 PL 等于 AI 時。因此，如果消除了那一個，
則玩家獲勝：我們將1AI 的結果相加，并且在模數之后%3，值相等。最后一種可能性是：電腦贏了。

模邏輯起作用的原因是 RPS 或的順序0 1 2，這是一個線性勝過序列。

// Rock Paper Scissors - win logic:

 ...  0R  1P  2S  ...  wins over:
     /   /   /   /    
    /   /   /   /
 ...  0R  1P  2S  ...

通過使用% 3(in the (AI 1) % 3)，我們只是確保涵蓋上述...情況。

如果沒有if, else上述內容，也可以使用（條件）三元運算子 重寫statement ? ifTrue : ifFalse ：

const fig = ["Rock", "Paper", "Scissors"];
const msg = ["You won", "You lost", "It's a draw"];
const score = [0, 0, 0];

function play() {
  const PL = Number(this.dataset.player);   // Get 0, 1, 2 from button data-player
  const AI = Math.floor(Math.random() * 3); // Generate random 0, 1, 2 integer
  let res = PL === AI ? 2 : (AI   1) % 3 === PL ? 0 : 1; // Determine result
  score[res]  = 1;
  console.log(`
    ${msg[res]}!
    You played: ${fig[PL]},
    Computer played: ${fig[AI]}
    Score: Player: ${score[0]} Computer: ${score[1]} Draws: ${score[2]}
  `);
}

document.querySelectorAll("[data-player]").forEach(el => el.addEventListener("click", play));

<button data-player="0" type="button">ROCK</button>
<button data-player="1" type="button">PAPER</button>
<button data-player="2" type="button">SCISSORS</button>

uj5u.com熱心網友回復：

我定義了 userInput 并保留了我的 if/else 陳述句，現在它可以作業了。接下來將致力于重構我的代碼并嘗試不同的更簡單型別的邏輯。感謝所有查看我的代碼的人！

function getComputerChoice() {
    const choices = ['rock', 'paper', 'scissors'];
    const ranNum = choices[Math.floor(Math.random() * 3)];
    return ranNum;
}

function playRound(userInput) {
    const computerInput = getComputerChoice();

if(userInput === 'rock' && computerInput === 'paper') {
        computerScore  ; 
        computerScore_div.innerHTML = computerScore;
        userSelection_div.innerHTML = "You chose "   userInput;
        computerSelection_div.innerHTML = "Computer chose "   computerInput;
    } if (userInput === 'rock' && computerInput === 'rock') {
        userSelection_div.innerHTML = "You chose "   userInput;
        computerSelection_div.innerHTML = "Computer chose "   computerInput; 
    } if (userInput === 'rock' && computerInput === 'scissors') {
        userScore  ;    
        userScore_div.innerHTML = userScore;
        userSelection_div.innerHTML = "You chose "   userInput;
        computerSelection_div.innerHTML = "Computer chose "   computerInput;
    // User Chooses Paper
    } else if(userInput === "paper" && computerInput === 'rock') {
        userScore  ;     
        userScore_div.innerHTML = userScore;
        userSelection_div.innerHTML = "You chose "   userInput;
        computerSelection_div.innerHTML = "Computer chose "   computerInput;
    } else if (userInput === 'paper' && computerInput === 'paper') {
        console.log ('You chose paper and computer chose paper. It"s a tie!');     
    } else if (userInput === 'paper' && computerInput === 'scissors') {
        computerScore  ;   
        computerScore_div.innerHTML = computerScore;
        userSelection_div.innerHTML = "You chose "   userInput;
        computerSelection_div.innerHTML = "Computer chose "   computerInput;
    // User Chooses Scissors
    } else if(userInput === "scissors" && computerInput === 'rock') {
        computerScore  ;
        computerScore_div.innerHTML = computerScore;
        userSelection_div.innerHTML = "You chose "   userInput;
        computerSelection_div.innerHTML = "Computer chose "   computerInput;
    } else if (userInput === 'scissors' && computerInput === 'paper') {
        userScore  ;     
        userScore_div.innerHTML = userScore;
        userSelection_div.innerHTML = "You chose "   userInput;
        computerSelection_div.innerHTML = "Computer chose "   computerInput;
    } else {
        userSelection_div.innerHTML = "You chose "   userInput;
        computerSelection_div.innerHTML = "Computer chose "   computerInput;
    }  

}

function playGame() {
    userRock.addEventListener("click", function () {
        playRound("rock");
    })
    userPaper.addEventListener("click", function () {
        playRound("paper");
    })
    userScissors.addEventListener("click", function () {
        playRound("scissors");
    })
}

playGame();

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/419398.html

標籤：

上一篇：React：更新UI元素

下一篇：在不移動以下元素的情況下顯示div