Попытка установить элемент span равным значению переменной в игре JS Rock, Paper, Scissors - PullRequest
Новая
       1

Попытка установить элемент span равным значению переменной в игре JS Rock, Paper, Scissors

0 голосов
/ 31 декабря 2018

Я пишу программу для игры в камень, ножницы, бумагу.Пока я писал код, все шло хорошо, пока я не добавил строку: 

userScore_span.InnerHTML = userScore;

.При тестировании функции win я добавил console.log ('you win');и все работало нормально, но как только я добавил строку сверху, у меня возникла ошибка при нажатии любой из трех кнопок.

Я пытаюсь передать результат из userScore в userScore_span, учитывая, что userScoreувеличивается после победы в игре 

userScore++;
userScore_span.innerHTML = userScore;

Однако, когда я нажимаю любую из кнопок, я получаю сообщение об ошибке: 

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

Я не уверен, что инструменты Chrome Dev означаютэтот.Как это можно исправить? 

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>

Ответы [ 2 ]

0 голосов
/ 31 декабря 2018

Кроме вашей опечатки idea= / id= ...
вы можете радикально минимизировать игровую логику и кодировать , используя индексы целых чисел.

Игра целых чисел

  • Используйте атрибут data-* для пользовательских кнопок.Атрибуты должны содержать числовые значения 0, 1, 2.При щелчке значение будет представлять выбор игрока.
  • ИИ должен также играть числами: const AI = ~~(Math.random() * 3) // 0, 1, 2

Теперь, когда вы знаете, что ИИ и Игрок оба используют целые числа (вместо странных буквенных комбинаций) вы можете хранить Move names в массиве const moves = ["Rock", "Paper", "Scissors"]; (где 0 равно Rock ... и т. Д.)

Rock Paper Scissors Logic

В игре три возможных круглых разрешения , PL побед, AI побед, ничьих .Давайте преобразуем эти "человеческие" значения в целые числа в том же порядке:

  • 0 = выигрыш PL
  • 1 = выигрыш AI
  • 2 = Draw

Вот как их вычислить:

Draw

Вычислить ничью проще всего.Это когда оба AI и PL целые числа равны. Давайте вернемся 2

result = PL === AI ? 2

Игрок выигрывает

Чтобы рассчитать выигрыш игрока, просто увеличьте выбор AI на 1 и сделайте по модулю 3 ,Если результат этой операции равен выбору игрока, значит, игрок должен был выиграть! Давайте вернемся 0

AI выигрывает

Иначе, так как наша игра имеет только 3 возможных состояния, это не ничья, и это не выигрыш игрока, чем долженбудь ИИ победить! И давайте вернемся 1

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

Крутая вещь в том, что индекс производительности игры тоже основан на том, что теперь вы можете использовать также массив сообщений, таких как messages = ["You won!", "AI won", "it's a draw!", ] и получить желаемое сообщение по индексу результата! .И бонус!Вы также можете увеличить значения массива score, 0 - индекс игрока, а 1 - AI! 

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));
*{margin:0;padding:0;box-sizing:border-box;}body{background-color:#24272E;font-family:avenir;}header {background:white;padding:20px;}header>h1{color:#24272E;text-align:center;}.score-board{border:3px solid white;border-radius:4px;width:200px;margin:20px auto;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:1.4em;color:white;text-align:center;font-weight: bold;}.choices{text-align:center;margin-top:50px;}[data-playermove]{display:inline-block;border:4px solid white;border-radius:50%;padding:10px;margin:0 20px;transition:all 0.3s ease;}[data-playermove]:hover{cursor:pointer;background:darkblue;}img{height:100px;width:100px;}
<div class="score-board">
  <div id="user-label" class="badge">user</div>
  <div id="computer-label" class="badge">comp</div>
  <span id="PLScore">0</span>:<span id="AIScore">0</span>
</div>

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

<div class="choices">
  <div data-playermove="0">ROCK</div>
  <div data-playermove="1">PAPER</div>
  <div data-playermove="2">SCISSORS</div>
</div>
0 голосов
/ 31 декабря 2018

Опечатка: idea <> id

Измените это: 

<span idea="user-score">0</span>:<span idea="computer-score">0</span>

на 

<span id="user-score">0</span>:<span id="computer-score">0</span>


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 id="user-score">0</span>:<span id="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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...