使用javascript进行剪刀石头布游戏

时间：2019-02-06 06:12:49

标签： javascript html css

有人可以帮我告诉我错误是什么以及在哪里。图片上的点击事件不起作用。游戏无法正常运行。enter image description here

我的代码-

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的剪刀布游戏。当我单击任何图像时，它应更新用户分数，计算机应生成随机选择。 我已经用Google搜索，但是找不到东西。

2 个答案:

答案 0 :(得分：2)

我可以发现的问题：

  • main附加了eventListener，但从未调用过。

  • 您要定义两个具有相同名称的变量：

    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) + '.';

}

答案 1 :(得分：1)

这是您如何实现的

  • 在您的result_p.innerHTML中使用template literals
    • 在convert函数中
  • 传递参​​数
  • 将代码带到main函数外部

您可能希望在lose函数${convert(userChoice)}${smallUserWord} gets beaten by ${convert(computerChoice)}${(smallCompWord)}.;中使用“被打败”一词，以便用户选择始终是第一个词。但这取决于您的喜好

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(letter) {
  if (letter === 'r') return 'rock';
  if (letter === 'p') return 'paper';
  if (letter === 's') return 'scissors';
}

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

}

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

function draw(userChoice, computerChoice) {
console.log('draw');console.log(userChoice);console.log(computerChoice)
  const smallUserWord = 'user'.fontsize(3).sub();
  const smallCompWord = '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;

  }

}


  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>

相关问题
最新问题