如何让我的分数在剪刀布石头游戏中发挥作用？

Question

我是 javascript 和 html 的新手。我正在尝试制作一个玩家对着电脑玩的剪刀、布石头游戏。但是我无法获得要播放的分数或无法在 html 中显示分数。我也尝试过添加渲染功能，但没有用。我的 scoreWindow 代码有什么问题？为什么显示为error和null？请帮忙

let choises = ['rock', 'paper', 'scissors'];

choises.rock = document.querySelector('.rock');
choises.paper = document.querySelector('.paper');
choises.scissors = document.querySelector('.scissors');

/*let userScore = document.querySelector('.scores .scorePlayer');
let computerScore = document.querySelector('.scores .scoreComp');*/
let scoreWindow = document.querySelector('.scores');
let playerSelection;
let computerSelection;

let computerScore = 0;
let userScore = 0;

scoreWindow.innerHTML = userScore + ' : ' + computerScore;

function computerPlay() {
  let computerAction = Math.floor(Math.random() * choises.length);
  computerSelection = choises[computerAction];
  return computerSelection;
}


function playRound(playerSelection, computerSelection) {
  if (playerSelection === computerSelection) {
    userScore = userScore + 1;
    computerScore = computerScore + 1;
  } else if ((playerSelection === choises.rock && computerSelection === choises.scissors) ||
    (playerSelection === choises.rock && computerSelection === choises.rock) ||
    (playerSelection === choises.scissors && computerSelection === choises.paper)) {
    userScore = userScore++;
  } else {
    computerScore = computerScore++;
  }

  scoreWindow.innerHTML = userScore + ' : ' + computerScore;
  return (computerScore, userScore);
}

function doChoises() {
  choises.rock.addEventListener('click', () => {
    playerSelection = choises[0];
    console.log(computerPlay());
    console.log(playerSelection);
    console.log(playRound(playerSelection, computerSelection));
  });
  choises.paper.addEventListener('click', () => {
    playerSelection = choises[1];
    console.log(computerPlay());
    playRound();
  });
  choises.scissors.addEventListener('click', () => {
    playerSelection = choises[2];
    console.log(computerPlay());
    playRound();
  });
}

function renderScore(computerScore, userScore) {
  scoreWindow.innerText = `${computerScore} : ${userScore}`;
}
renderScore();
doChoises();

<div class="battlefield">
  <div class="battlefield__back">
    <div class="scores">
      <span>:</span>
    </div>

    <div class="battlefield__weapon">
      <button class="rock">
                <img src="./rock.png"/>
            </button>
      <button class="paper">
                <img src="./paper.png"/>
            </button>
      <button class="scissors">
                <img src="./scissors.png"/>
            </button>
    </div>
  </div>
</div>

Answer 1

在对 DOM 进行任何操作之前，您必须等待它呈现。使用当前代码，您正在尝试在可能为空的页面中查找元素。

将 document.onload 与包装所有代码的函数一起使用。

function main() {
  /* the eternity of the code */
}
document.onload = main;

Answer 2

您需要进行以下 3 项更改才能使乐谱正常工作。我刚刚试过了，你的游戏代码的其余部分在你进行更改后工作正常。这不是一些答案所暗示的脚本加载问题。

(1) 从函数playRound 中删除参数，因为您希望该函数使用全局变量。这个问题可能并不明显。然而，这些参数正在覆盖具有相同名称的全局值。而且它们总是都为空，因此确定分数的逻辑无法正常工作。

    // function playRound(playerSelection, computerSelection) {
    function playRound() {

(2 & 3) 正确增加用户和计算机分数。

    //userScore = userScore++;
    userScore++;


    //computerScore = computerScore++;
    computerScore++;

let choises = ['rock', 'paper', 'scissors'];

choises.rock = document.querySelector('.rock');
choises.paper = document.querySelector('.paper');
choises.scissors = document.querySelector('.scissors');

/*let userScore = document.querySelector('.scores .scorePlayer');
let computerScore = document.querySelector('.scores .scoreComp');*/
let scoreWindow = document.querySelector('.scores');
let playerSelection;
let computerSelection;

let computerScore = 0;
let userScore = 0;

scoreWindow.innerHTML = userScore + ' : ' + computerScore;

function computerPlay() {
  let computerAction = Math.floor(Math.random() * choises.length);
  computerSelection = choises[computerAction];
  return computerSelection;
}


function playRound() {
  if (playerSelection === computerSelection) {
    userScore++;
    computerScore++;
  } else if ((playerSelection === choises.rock && computerSelection === choises.scissors) ||
    (playerSelection === choises.rock && computerSelection === choises.rock) ||
    (playerSelection === choises.scissors && computerSelection === choises.paper)) {
    userScore++;
  } else {
    computerScore++;
  }

  scoreWindow.innerHTML = userScore + ' : ' + computerScore;
  return (computerScore, userScore);
}

function doChoises() {
  choises.rock.addEventListener('click', () => {
    playerSelection = choises[0];
    console.log(computerPlay());
    console.log(playerSelection);
    console.log(playRound(playerSelection, computerSelection));
  });
  choises.paper.addEventListener('click', () => {
    playerSelection = choises[1];
    console.log(computerPlay());
    playRound();
  });
  choises.scissors.addEventListener('click', () => {
    playerSelection = choises[2];
    console.log(computerPlay());
    playRound();
  });
}

function renderScore(computerScore, userScore) {
  scoreWindow.innerText = `${computerScore} : ${userScore}`;
}
renderScore();
doChoises();

<div class="battlefield">
  <div class="battlefield__back">
    <div class="scores">
      <span>:</span>
    </div>

    <div class="battlefield__weapon">
      <button class="rock">
                <img alt="rock" src="./rock.png"/>
            </button>
      <button class="paper">
                <img alt="paper" src="./paper.png"/>
            </button>
      <button class="scissors">
                <img alt="scissors" src="./scissors.png"/>
            </button>
    </div>
  </div>
</div>

Answer 3

要使查询选择器正常工作，请将 defer 属性添加到您的脚本标记中

例如

<script src='script.js' defer ></script>

这应该可以解决您的问题

Answer 4

这是处理游戏的简明方法：

const choices="rock,paper,scissors".split(","),
 btns=document.querySelectorAll("#user button");
var cmp,usr;

btns.forEach(b=>b.onclick=()=>{
 usr=choices.findIndex(c=>b.classList.contains(c));
 btns.forEach(c=>c.classList.toggle("active",b==c));
 computer.className=choices[cmp=Math.floor(Math.random()*3)];
 switch((3+cmp-usr)%3){ // possible results: 0,1,2
  case 1: cs.textContent++; break;
  case 2: us.textContent++;
 }
})

button {background:url(https://previews.123rf.com/images/sudowoodo/sudowoodo1710/sudowoodo171000028/88077066-hand-gestures-for-rock-paper-scissors-game-simple-hand-icons-.jpg); width:32px; height:36px; background-size:96px; display:inline-block}
.rock  {background-position:-4px -32px}
.paper {background-position:-34px -32px}
.scissors {background-position:-64px -32px}
.active {border-color:#f00;}

<div class="battlefield">
Computer: <span id="cs">0</span><br>
 <button id="computer"></button>
 <div id="user">
 User: <span id="us">0</span><br>
   <button class="rock"></button>
   <button class="paper"></button>
   <button class="scissors"></button>
 </div>
</div>

由于简洁和避免冗余是我在这里的主要关注点，我使用了将 DOM 元素作为全局范围内的变量直接寻址的形式（computer、cs 和 us).更传统的方法是通过以下方式“获取”它们：const computer=document.getElementById("computer").

如何让我的分数在剪刀布石头游戏中发挥作用？

How do I make my scores work in a game of scissors, paper stone?

html

javascript

function

event-listener