javascript 快速石头，布，剪刀游戏

zujrkrfu 于 2022-12-25 发布在 Java

关注(0)|答案(2)|浏览(158)

我试图弄清楚如何知道玩游戏的人按下了哪个按钮，因为现在我有一个接一个的值，我可以向所有三个按钮添加函数和事件侦听器吗？或者我想可能像按钮的节点列表和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>

JavaScript

来源：https://stackoverflow.com/questions/74901745/quick-rock-paper-scissors-game

2条答案

按热度按时间

mgdq6dx11#

看起来你想用.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>

赞(0）回复(0）举报 2022-12-25

svmlkihl2#

对于这种类型的行为，您可以实现一个新函数，该函数将选择作为参数。
创建新函数：

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>

赞(0）回复(0）举报 2022-12-25

我来回答

javascript 快速石头，布，剪刀游戏

2条答案

相关问题

热门标签

最新问答