javascript - 使用 javascript 的剪刀石头布游戏

Question

谁能帮忙告诉我错误的内容和位置。图像上的点击事件不起作用。游戏无法运行。

我的代码-

let userScore = 0;
let computerScore = 0;
const userScore_span = document.getElementById('user-score');
const computerScore_span = document.getElementById('computer-score');
const result_p = document.querySelector('.result>p');
const scoreBoard_div = document.querySelector('.score-board');
const rock_div = document.getElementById('r');
const paper_div = document.getElementById('p');
const scissors_div = document.getElementById('s');


function getComputerChoice() {
  const choices = ['r', 'p', 's'];
  const randomNumber = Math.floor(Math.random() * 3);
  return choices[randomNumber];
}

function convert() {
  if (letter === 'r') return 'rock';
  if (letter === 'p') return 'paper';
  if (letter === 's') return 'scissors';
}

function win(userChoice, computerChoice) {
  userScore++;
  userScore_span.innerHTML = userScore;
  computerScore_span.innerHTML = computerScore;
  const smallUserWord = 'user'.fontsize(3).sub();
  const smallCompWord = 'comp'.fontsize(3).sub();
  result_p.innerHTML = convert(userChoice)(smallUserWord) + 'beats' + convert(computerChoice)(smallCompWord) + '.';

}

function lose(userChoice, computerChoice) {
  userScore++;
  userScore_span.innerHTML = userScore;
  computerScore_span.innerHTML = computerScore;
  const smallUserWord = 'user'.fontsize(3).sub();
  const smallUserWord = 'comp'.fontsize(3).sub();
  result_p.innerHTML = convert(userChoice)(smallUserWord) + 'beats' + convert(computerChoice)(smallCompWord) + '.';
}

function draw(userChoice, computerChoice) {
  const smallUserWord = 'user'.fontsize(3).sub();
  const smallUserWord = 'comp'.fontsize(3).sub();
  result_p.innerHTML = convert(userChoice)(smallUserWord) + 'equals' + convert(computerChoice)(smallCompWord) + '.';
}

function game(userChoice) {
  const computerChoice = getComputerChoice();
  switch (userChoice + computerChoice) {
    case 'rs':
    case 'sp':
    case 'pr':
      win(userChoice, computerChoice);
      break;
    case 'rp':
    case 'ps':
    case 'sr':
      lose(userChoice, computerChoice);
      break;
    case 'rr':
    case 'ss':
    case 'pp':
      draw(userChoice, computerChoice);
      break;

  }

}

function main() {
  rock_div.addEventListener('click', function() {
    game('r');
  });

  paper_div.addEventListener('click', function() {
    game('p');
  });

  scissors_div.addEventListener('click', function() {
    game('s');
  });
}

@import url('https://fonts.googleapis.com/css?family=Asap');
* {
  padding: 0;
  box-sizing: border-box;
  margin: 0;
}

body {
  background-color: #24272e;
}

header {
  background-color: white;
  padding: 20px;
}

header>h1 {
  text-align: center;
  font-weight: bold;
  font-family: Asap, sans-serif;
  color: #24272E;
}

.score-board {
  text-align: center;
  border: 3px solid white;
  width: 200px;
  margin: 20px auto;
  position: relative;
  color: white;
  border-radius: 5px;
  font-size: 40px;
  font-family: Asap, sans-serif;
  padding: 20px 20px;
}

.badge {
  background-color: #E2584D;
  font-size: 30px;
  font-family: Asap, sans-serif;
  padding: 2px 10px;
  color: white;
}

#user-label {
  position: absolute;
  top: 20px;
  left: -40px;
}

#computer-label {
  position: absolute;
  top: 20px;
  right: -55px;
}

.result {
  text-align: center;
  font-family: Asap, sans-serif;
  font-weight: bold;
  font-size: 30px;
  color: white;
}

.choices {
  margin: 50px auto;
  text-align: center;
}

.choice {
  margin: 0 20px;
  display: inline-block;
  padding: 10px;
}

.choice:hover {
  cursor: pointer;
}

#action-message {
  text-align: center;
  font-family: Asap, sans-serif;
  font-weight: bold;
  font-size: 30px;
  color: white;
}

<header>
  <h1> Rock Paper And Scissors</h1>
</header>
<div class="score-board">
  <div class='badge' id='user-label'>user</div>
  <div class='badge' id='computer-label'>comp</div>
  <span id='user-score'>0</span> :
  <!-- span is for inline and div is for block* -->
  <span id='computer-score'>0</span>
</div>
<div class='result'>
  <p>paper covers rock. You win!</p>
</div>
<div class='choices'>
  <div class='choice' id='r'>
    <img src='C:\Users\hp\Desktop\Javascript\projects\rock,paper,scissor\r.jpe'>
  </div>
  <div class='choice' id='p'>
    <img src='C:\Users\hp\Desktop\Javascript\projects\rock,paper,scissor\p.png'>
  </div>
  <div class='choice' id='s'>
    <img src='C:\Users\hp\Desktop\Javascript\projects\rock,paper,scissor\s.jpe'>
  </div>
</div>
<div id='action-message'>
  Make your move
</div>

我在图像上使用了 addEventListener。但什么也没有发生。 但是游戏不工作。它是否必须对图像做些什么。图片格式？ 它是一款使用纯 JavaScript 的剪刀石头布游戏。当我点击任何图像时，它应该更新用户分数，并且计算机应该生成随机选择。 我用谷歌搜索但找不到东西。

Answer 1

我可以发现的问题:

• main 附加 eventListeners 但它从未被调用。

• 您正在定义 2 个具有相同名称的变量:

  const smallUserWord = 'user'.fontsize(3).sub(); const smallUserWord = 'comp'.fontsize(3).sub();

• 您有一个返回字符串的函数 convert，但使用起来就好像它返回了一个回调函数:

function convert() {
  if (letter === 'r') return 'rock';
  if (letter === 'p') return 'paper';
  if (letter === 's') return 'scissors';
}

function win(userChoice, computerChoice) {
  userScore++;
  userScore_span.innerHTML = userScore;
  computerScore_span.innerHTML = computerScore;
  const smallUserWord1 = 'user'.fontsize(3).sub();
  const smallCompWord2 = 'comp'.fontsize(3).sub();
  result_p.innerHTML = convert(userChoice)(smallUserWord) + 'beats' + convert(computerChoice)(smallCompWord) + '.';

}