时间戳

首页 > 解决方案 > 除虫石头剪刀布

javascript - 除虫石头剪刀布

问题描述

问题

我正在创建一个石头剪刀布游戏。就迄今为止构建的功能而言，它应该：

  1. 允许玩家选择一个选项
  2. 然后计算机选择一个随机选项
  3. 代表各自手的图像发生变化
  4. 获胜者以文字说明

  5. 相应获胜者的得分将更新。

      1. 一切都完美无缺。

但是 4. 和 5. 我不明白为什么他们不工作！

请帮我确定问题:)

这是代码（我省略了 CSS，因为我认为它对问题不重要）：

if(document.readyState == 'loading'){
    document.addEventListener('DOMContentLoaded', ready)
} else {
    ready()
}

let score = [0, 0];
let playerScore = score[0];
let computerScore = score[1];
const playerOptns = ['rock', 'paper', 'scissors']
const computerOptns = ['rock', 'paper', 'scissors']
let playerCurrentHand = [playerOptns[1]];
let computerCurrentHand = [computerOptns[0]];

function ready(){
    let choiceBtn = document.getElementsByClassName('btn');
    for(let i = 0; i < choiceBtn.length; i++){
        let button = choiceBtn[i]
        button.addEventListener('click', changeHands)

    }
}

function changeHands(event){
    let buttonClicked = event.target;
    if(buttonClicked.classList.contains('rock')){
        changeToRock();
    } else if(buttonClicked.classList.contains('paper')){
        changeToPaper();
    } else if(buttonClicked.classList.contains('scissors')){
        changeToScissors();
    }
    computerRandom()
}

function changeToPaper(){
    document.getElementById('hand1').src="Assets/paper.png";
    playerCurrentHand = 'paper';
}

function changeToRock(){
    document.getElementById('hand1').src="Assets/rock.png";
    playerCurrentHand = 'rock';
}

function changeToScissors(){
    document.getElementById('hand1').src="Assets/scissors.png";
    playerCurrentHand = 'scissors';
}

function computerRandom(){
    let number = Math.round(Math.random()*2)
    if(number== 0){
        document.getElementById('hand2').src="Assets/paper.png";
        computerCurrentHand = 'paper';
    } else if(number==1){
        document.getElementById('hand2').src="Assets/rock.png";
        computerCurrentHand = 'rock';
    } else {
        document.getElementById('hand2').src="Assets/scissors.png"
        computerCurrentHand= 'scissors';
    }
    compareWinner()
}

function compareWinner(){
    if(playerCurrentHand=='paper' && computerCurrentHand =='scissors'){
        computerWins();
       
    } else if(playerCurrentHand=='paper' && computerCurrentHand=='rock'){
        playerWins();
       
    } else if(playerCurrentHand=='scissors' && computerCurrentHand=='rock'){
        computerWins();
        
    } else if (playerCurrentHand=='scissors' && computerCurrentHand=='paper'){
        playerWins();
       
    } else if(playerCurrentHand=='rock' && computerCurrentHand=='scissors'){
        playerWins();
      
    } else if(playerCurrentHand=='rock' && computerCurrentHand=='paper'){
        computerWins();
      
    } else {
        tied()
    }
}

function computerWins(){
    computerScore++;
    score[0] = computerScore;
    let celebrationText = document.querySelector('.winner')[0];
    celebrationText.textContent = "Computer Wins";
    document.getElementByClassName('comp-score')[0].textContent = computerScore;
}

function playerWins() {
    playerScore++;
    score[0] = playerScore;
    let celebrationText = document.querySelector('.winner')[0];
    celebrationText.textContent = "Player Wins";
    document.getElementsByClassName('play-score')[0].textContent = playerScore;
}

function tied(){
    let celebrationText = document.querySelector('.winner')[0];
    celebrationText.textContent = "No Winner";
    
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <link rel="stylesheet" href="./styles.css" />
        <title>Rock paper scissors</title>
    </head>
    <body>
        <div class="score-board">
            <div class="columned score-1">
                <div>
                    Player
                </div>
                
                <div class="play-score">
                    0
                </div>
            </div>
            <div class="columned score-2">
                <div>
                    Computer
                </div>
                <div class="comp-score">
                    0
                </div>
            </div>
    </div>
        <div class="winner">
            Player Wins
        </div>
        
        <div class="hands">
            <div>
                <img id="hand1" src="Assets/paper.png">
            </div>
            <div>
                <img id="hand2" src="Assets/rock.png">
            </div>
        </div>
        
     <div class="buttons">
            
            <button class="btn rock">rock</button>
          
         
       
            <button class="btn paper">paper</button>
        
        
        
            <button class="btn scissors">scissors</button>
      
        
     </div>
       
            
        <script src="app.js"></script>
    </body>
</html>

标签： javascripthtmldebugging

解决方案

答案

有两个问题：

  1. 查询选择器的迭代计数为 [0]。这是因为我将它从 getElementsByClassName() 更改为试图解决问题。

  2. 曾经有一个 getElementsByClassName() 写成 getElementByClassName()

菜鸟错误，但很高兴它解决了。:)

推荐阅读