在JS Rock，Paper，Scissors Game中尝试将span元素设置为等于变量值 [英] Trying to set a span element equal to a variable value in a JS Rock, Paper, Scissors Game

查看：82
本文介绍了在JS Rock，Paper，Scissors Game中尝试将span元素设置为等于变量值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在编写一个程序来播放石头，纸，剪刀。在编写代码时，一切正常，直到我添加了：

I'm writing a program to play rock, paper, scissors. As I was coding, everything was going fine until I added the:

userScore_span.InnerHTML = userScore;

行。在测试获胜功能时，我添加了console.log（'you win'）;并且它工作正常，但是当我从上方添加该行时，按下三个按钮中的任何一个按钮时我都会出错。

line. When testing out the win function, I added a console.log('you win'); and it worked fine, but as soon as I added the line from above I got an error when I pressed any one of the three buttons.

我正尝试中继假设赢得游戏后userScore增加，则从userScore到userScore_span的结果

I'm trying to relay the result from userScore to userScore_span given that userScore increases after a game is won

userScore++;
userScore_span.innerHTML = userScore;

但是，当我按任意按钮时，都会出现以下错误：

However, when I press any of the buttons I get an error of:

Uncaught TypeError: Cannot set property 'innerHTML' of null
at lose (app.js:34)
at game (app.js:58)

我不确定chrome开发工具的含义是什么。如何解决？

I am not sure what the chrome Dev tools means by this. How can this be fixed?

let userScore = 0;
let computerScore = 0;
const userScore_span = document.getElementById("user-score");
const computerScore_span = document.getElementById("computer-score");
const scoreBoard_div = document.querySelector(".score-board");
const result_p = document.querySelector(".result > p");
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 convertToWord(letter) {
  if (letter === "r") return "Rock";
  if (letter === "p") return "Paper";
  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 = `${convertToWord(userChoice)}${smallUserWord} beats ${convertToWord(computerChoice)}${smallCompWord}. You win!`;
}

function lose(userChoice, 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 = `${convertToWord(userChoice)}${smallUserWord} loses to ${convertToWord(computerChoice)}${smallCompWord}. You lost!`;
}

function draw(userChoice, computerChoice) {
  const smallUserWord = "user".fontsize(3).sub();
  const smallCompWord = "comp".fontsize(3).sub();
  result_p.innerHTML = `${convertToWord(userChoice)}${smallUserWord} equals ${convertToWord(computerChoice)}${smallCompWord}. It's a draw`;
}

function game(userChoice) {
  const computerChoice = getComputerChoice();
  switch (userChoice + computerChoice) {
    case "rs":
    case "pr":
    case "sp":
      win(userChoice, computerChoice);
      break;
    case 'rp':
    case 'ps':
    case 'sr':
      lose(userChoice, computerChoice);
      break;
    case 'rr':
    case 'pp':
    case 'ss':
      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');
  })
};

main();

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #24272E;
  font-family: avenir;
}

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


/*header each one*/

header>h1 {
  color: #24272E;
  text-align: center;
}

.score-board {
  border: 3px solid white;
  border-radius: 4px;
  width: 200px;
  margin: 20px auto;
  /*20px (top/bottom) & center (left/right) */
  color: white;
  padding: 15px 20px;
  text-align: center;
  font-size: 46px;
  position: relative;
}

.badge {
  background: #E2584D;
  font-size: 14px;
  padding: 2px 10px;
}

#user-label {
  position: absolute;
  top: 30px;
  left: -25px;
}

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

.result {
  font-size: 40px;
  color: white;
}

.result>p {
  text-align: center;
  font-weight: bold;
}

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

.choice {
  display: inline-block;
  border: 4px solid white;
  border-radius: 50%;
  padding: 10px;
  margin: 0 20px;
  transition: all 0.3s ease;
}

.choice:hover {
  cursor: pointer;
  background: darkblue;
}

img {
  height: 100px;
  width: 100px;
}

#action-message {
  text-align: center;
  color: white;
  font-weight: bold;
  font-size: 20px;
  margin-top: 20px
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Rock Paper Scissors</title>
  <meta name="description" content="DESCRIPTION">
  <link rel="stylesheet" href="styles.css">

</head>

<body>
  <header>
    <h1>Rock Paper Scissors</h1>
  </header>
  <div class="score-board">
    <div id="user-label" class="badge">user</div>
    <div id="computer-label" class="badge">comp</div>
    <span idea="user-score">0</span>:<span idea="computer-score">0</span>
  </div>

  <div class="result">
    <p>Paper cover rock. You win!</p>
  </div>

  <div class="choices">
    <div class="choice" id="r">
      <img src="images/rock.png" alt="rock">
    </div>
    <div class="choice" id="p">
      <img src="images/paper.png" alt="paper">
    </div>
    <div class="choice" id="s">
      <img src="images/scissors.png" alt="scissors">
    </div>
  </div>

  <p id="action-message">Make your move</p>






</body>
<script src="app.js"></script>

</html>

推荐答案

在您的错字旁 idea = / id = ...

您可以大大最小化您的游戏逻辑并通过使用索引整数进行编码。

Beside your typo idea= / id= ...
you could drastically minify your game logic and code by using indexes integers.


  • 使用 data- * 用户按钮的属性。这些属性应包含数值 0、1、2 。点击时，该值将代表玩家的选择。

  • AI也应该玩数字： const AI = ~~（Math.random（）* 3）/ / 0，1，2

  • Use data-* attribute for user buttons. The attributes should hold numerical values 0, 1, 2. On click, the value will represents the player choice.
  • The AI should play numbers too: const AI = ~~(Math.random() * 3) // 0, 1, 2

现在您知道AI和Player都使用整数（而不是奇怪的字母组合），您可以将移动名称存储到数组 const moves = [ Rock， Paper， Scissors]中； （其中 0 是 Rock ...等）

Now that you know AI and Player both use integers (instead of strange letters combinations), you can store the Move names into an array const moves = ["Rock", "Paper", "Scissors"]; (where 0 is Rock... etc)

游戏具有 3 个可能的全面分辨率， PL获胜，AI胜出，抽奖。
让我们以相同的顺序将这些 human 值转换为整数：

The game has three possible round resolutions, PL wins, AI wins, Draw. Let's convert those "human" values to integers, in the same order:


  • 0 = PL胜利

  • 1 =人工智能

  • 2 =抽奖

  • 0 = PL win
  • 1 = AI win
  • 2 = Draw

以下是计算这些内容的方法：

Here's how to calculate those:

计算抽奖是最简单的。当 AI 和 PL 整数相等时。 让我们返回 2

To calculate a Draw is the simplest. It's when both AI and PL integers are equal. Let's return 2

result = PL === AI ? 2



玩家获胜



计算玩家获胜，只需将AI选择增加1并取模3 。如果此操作的结果等于玩家的选择，那么玩家一定赢了！ 让我们返回 0

Player wins

To calculate Player win, simply increment AI choice by 1 and do a modulo 3. If the result of this operation is equal to player's choice, than Player must have won! Let's return 0

否则，由于我们的游戏只有3个可能的状态，这不是平局，也不是​​玩家获胜，而AI获胜也必须如此！ 然后返回 1

Else, since our game has only 3 possible states, it's not a draw, and it's not a player win, than must be AI win! And let's return 1

const result = PL===AI ? 2 : (AI+1)%3 === PL? 0 : 1; // Possible results: 0, 1, 2

拥有基于游戏结果索引的很酷的事情就是现在您还可以使用一系列消息，例如 messages = [您赢了！， AI赢了，抽奖！，] 和通过结果索引获取所需的消息！。和奖金！您还可以增加得分数组的值， 0 是玩家的索引，而 1 是AI！

The cool thing in having a game result index based too is that now you can use also an array of messages like messages = ["You won!", "AI won", "it's a draw!", ] and get the desired message by the result index!. And bonus! You can also increment the score array values, 0 being the player's index and 1 being AIs!

const moves = ["Rock", "Paper", "Scissors"],
  messages  = ["You won!", "AI won", "It's a draw!"], // [PL, AI, draw]
  score     = [0, 0, 0],                              // [PL, AI, draw]
  EL = sel => document.querySelector(sel),
  EL_result  = EL("#result"),
  EL_PLScore = EL("#PLScore"),
  EL_AIScore = EL("#AIScore");

function game() {
  const PL = +this.dataset.playermove;  // Get dataset value as integer
  const AI = ~~(Math.random() * 3);     // All you need: 0, 1, 2
  const result = PL === AI ? 2 : (AI + 1) % 3 === PL ? 0 : 1; // 0=PLwins 1=AIwins 2=draw 

  score[result]++; // Increment PL or AI's score (Increments number of draws too ;) )
  EL_result.innerHTML = `You: ${moves[PL]}<br>AI: ${moves[AI]}<br>${messages[result]}`;
  EL_PLScore.textContent = score[0];
  EL_AIScore.textContent = score[1];
}

// EVENTS:
document.querySelectorAll("[data-playermove]")
  .forEach(el => el.addEventListener("click", game));

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

<br>

YOU | <span id="PLScore">0</span>:<span id="AIScore">0</span> | AI

<div id="result"></div>

这篇关于在JS Rock，Paper，Scissors Game中尝试将span元素设置为等于变量值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆