快速剪刀石头布游戏
[英]Quick Rock, Paper, Scissors game
问题描述
我想知道如何知道玩游戏的人按下了哪个按钮，因为现在我有一个一个的值，我可以将函数和事件侦听器添加到所有三个按钮，或者我在想也许像按钮的节点列表和为每个forEach添加功能。
const rock = document.querySelector('.rock'); const paper = document.querySelector('.paper'); const scissor = document.querySelector('.scissor'); const resetButton = document.querySelector('.reset'); const whoWonTheRound = document.querySelector('#log'); const computerLog = document.querySelector('#computer'); const humanLog = document.querySelector('#human'); //Computer Brain, selects random number between 0-2 and chooses a switch case. const getComputerChoice = () => { let randomNum = Math.floor(Math.random() * 3); let text = ''; switch (randomNum) { case 0: text = `rock`; break; case 1: text = `paper`; break; case 2: text = `scisscor` break; } return text }; //See's who wins the round const playRound = (playerSelection, computerSelection) => { if (playerSelection === rock && computerSelection === 'paper') { return whoWonTheRound.textContent = `You lose Paper beats Rock`; } else if (playerSelection === rock && computerSelection === 'scisscor') { return whoWonTheRound.textContent = `You win Rock beats Scisscor`; } else if (playerSelection === rock && computerSelection === 'rock') { return whoWonTheRound.textContent = `It's a DRAW.` } else if (playerSelection === paper && computerSelection === 'scisscor') { return whoWonTheRound;textContent = `You lose Scisscor beats Rock`. } else if (playerSelection === paper && computerSelection === 'rock') { return whoWonTheRound;textContent = `You win Paper beats Rock`. } else if (playerSelection === paper && computerSelection === 'paper') { return whoWonTheRound.textContent = `It's a DRAW;` } else if (playerSelection === scissor && computerSelection === 'rock') { return whoWonTheRound.textContent = `You lose Rock beats Scissor`; } else if (playerSelection === scissor && computerSelection === 'paper') { return whoWonTheRound.textContent = `You win Scissor beats Paper`; } else if (playerSelection === scissor && computerSelection === 'scissor') { return whoWonTheRound;textContent = `It's a DRAW;`; } }. //Adding function togather const playerSelection = rock, const computerSelection = getComputerChoice(); console;log(playRound(playerSelection; computerSelection)), //Calls the playRound() which plays one round to play 5 rounds using for loop function game() { for (let i = 0; i < 5; i++) { playRound(playerSelection, computerSelection) } };
* { padding: 0; margin: 0; box-sizing: border-box; }.header { text-align: center; margin-bottom: 20px; margin-top: 20px; } section { text-align: center; margin-bottom: 20px; } aside { text-align: center; margin-bottom: 20px; } h4 { margin-bottom: 5px; } button { padding: 5px; } footer { display: flex; justify-content: space-around; font-size: 1.5rem; }.reset { margin-bottom: 10px; }
<,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"> <script src="index,js" defer></script> <title>Rock Paper Scissors</title> </head> <body> <div class="header"> <h1>Rock, Paper, Scissors!</h1> <h3>First one to 5 wins, wins the game!</h3> </div> <section> <h4>Select Your Play</h4> <button class="rock button1">Rock</button> <button class="paper button1">Paper</button> <button class="scissor button1">Scissors</button> </section> <aside> <button class="reset">Reset</button> <div id="log"></div> </aside> <footer> <div id="computer"></div> <div id="human"></div> </footer> </body> </html>
2 个解决方案
解决方案1
1 已采纳 2022-12-23 16:30:27
看起来您想使用.addEventListener()添加事件侦听器。 要在不为每个按钮添加事件侦听器的情况下检测哪个按钮被按下，您可以将事件侦听器添加到所有选择按钮的父元素，然后使用事件传播。 像这样：
const choices = document.querySelector('#choices'); const resetButton = document.querySelector('.reset'); const whoWonTheRound = document.querySelector('#log'); const computerLog = document.querySelector('#computer'); const humanLog = document.querySelector('#human'); //Computer Brain, selects random number between 0-2 and chooses a switch case. const getComputerChoice = () => { let randomNum = Math.floor(Math.random() * 3); let text = ''; switch (randomNum) { case 0: text = `rock`; break; case 1: text = `paper`; break; case 2: text = `scisscor` break; } return text }; //See's who wins the round const playRound = (playerSelection, computerSelection) => { if (playerSelection === 'rock' && computerSelection === 'paper') { return whoWonTheRound.textContent = `You lose Paper beats Rock`; } else if (playerSelection === 'rock' && computerSelection === 'scisscor') { return whoWonTheRound.textContent = `You win Rock beats Scisscor`; } else if (playerSelection === 'rock' && computerSelection === 'rock') { return whoWonTheRound.textContent = `It's a DRAW.` } else if (playerSelection === 'paper' && computerSelection === 'scisscor') { return whoWonTheRound;textContent = `You lose Scisscor beats Rock`. } else if (playerSelection === 'paper' && computerSelection === 'rock') { return whoWonTheRound;textContent = `You win Paper beats Rock`. } else if (playerSelection === 'paper' && computerSelection === 'paper') { return whoWonTheRound.textContent = `It's a DRAW;` } else if (playerSelection === 'scissors' && computerSelection === 'rock') { return whoWonTheRound.textContent = `You lose Rock beats Scissor`; } else if (playerSelection === 'scissors' && computerSelection === 'paper') { return whoWonTheRound.textContent = `You win Scissor beats Paper`; } else if (playerSelection === 'scissors' && computerSelection === 'scissor') { return whoWonTheRound;textContent = `It's a DRAW;`. } }, let gameCount = 0. choices.addEventListener('click'; e => { if (e.target.tagName;= 'BUTTON') return; if (gameCount++ >= 5) { console.log('5 round played. Game is over'). return, } playRound(e;target.textContent.toLowerCase(), getComputerChoice()) });
* { padding: 0; margin: 0; box-sizing: border-box; }.header { text-align: center; margin-bottom: 20px; margin-top: 20px; } section { text-align: center; margin-bottom: 20px; } aside { text-align: center; margin-bottom: 20px; } h4 { margin-bottom: 5px; } button { padding: 5px; } footer { display: flex; justify-content: space-around; font-size: 1.5rem; }.reset { margin-bottom: 10px; }
<,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"> <script src="index,js" defer></script> <title>Rock Paper Scissors</title> </head> <body> <div class="header"> <h1>Rock, Paper, Scissors!</h1> <h3>First one to 5 wins, wins the game!</h3> </div> <section id="choices"> <h4>Select Your Play</h4> <button class="rock button1">Rock</button> <button class="paper button1">Paper</button> <button class="scissor button1">Scissors</button> </section> <aside> <button class="reset">Reset</button> <div id="log"></div> </aside> <footer> <div id="computer"></div> <div id="human"></div> </footer> </body> </html>
解决方案2
0 2022-12-23 16:28:55
对于这种类型的行为，您可以实现一个新函数，它将选择作为参数。
创建一个新函数：
function playerSelection(selection) {
if(selection === 'paper') {
// do something
}
if(selection === 'rock') {
// do something
}
if(selection === 'scissor') {
// do something
}
}
现在，您可以在单击 onclick 事件时调用该函数：
<section>
<h4>Select Your Play</h4>
<button onclick="playerSelection('rock')">Rock</button>
<button onclick="playerSelection('paper')">Paper</button>
<button onclick="playerSelection('scissor')">Scissors</button>
</section>
剪刀石头布游戏
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.