个人中心
gpt4 book ai didi

javascript - 游戏继续进行 - 希望在玩家获胜时停止

转载 作者：行者123 更新时间：2023-12-02 22:54:33 24 4
gpt4 key购买 nike

已将 if(gamePlaying) 添加到事件监听器，以确保分数仅在函数运行时累加。

如果有获胜者，则分数应该停止累加。

我已将 gamePlaying 变量设置为 true已声明变量已为所有方法设置 if 语句

HTML

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <link href="https://fonts.googleapis.com/css?family=Lato:100,300,600" rel="stylesheet" type="text/css">
            <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
            <link type="text/css" rel="stylesheet" href="style.css">

            <title>Pig Game</title>
        </head>

        <body>
            <div class="wrapper clearfix">
                <div class="player-0-panel active">
                    <div class="player-name" id="name-0">Player 1</div>
                    <div class="player-score" id="score-0">43</div>
                    <div class="player-current-box">
                        <div class="player-current-label">Current</div>
                        <div class="player-current-score" id="current-0">11</div>
                    </div>
                </div>

                <div class="player-1-panel">
                    <div class="player-name" id="name-1">Player 2</div>
                    <div class="player-score" id="score-1">72</div>
                    <div class="player-current-box">
                        <div class="player-current-label">Current</div>
                        <div class="player-current-score" id="current-1">0</div>
                    </div>
                </div>

                <button class="btn-new"><i class="ion-ios-plus-outline"></i>New game</button>
                <button class="btn-roll"><i class="ion-ios-loop"></i>Roll dice</button>
                <button class="btn-hold"><i class="ion-ios-download-outline"></i>Hold</button>

                <img src="dice-5.png" alt="Dice" class="dice">
            </div>

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

JS

var scores, roundScore,activePlayer,gamePlaying;

init();  

document.querySelector('.btn-roll').addEventListener('click',function() {

  if(gamePlaying){

    var dice = Math.floor(Math.random()*6 + 1);
    var diceDOM =   document.querySelector('.dice');
    diceDOM.style.display = 'block';
    diceDOM.src = 'dice-' + dice + '.png';

  if (dice !== 1){
    roundScore += dice;
    document.querySelector('#current-'+ activePlayer).textContent = roundScore;
  } else {
    nextPlayer();
   } 
 }
});

document.querySelector('.btn-hold').addEventListener('click',function() {

if(gamePlaying){

scores[activePlayer]+= roundScore;

document.querySelector('#score-' + activePlayer).textContent = scores[activePlayer];

if (scores[activePlayer] >= 20){
  document.querySelector('#name-' + activePlayer).textContent = 'Winner!';
  document.querySelector('.dice').style.display = 'none';
  document.querySelector('.player-' + activePlayer + 'panel').classList.add('winner');
  document.querySelector('.player-' + activePlayer + 'panel').classList.remove('winner');
  gamePlaying = false;
}else{
nextPlayer();
}

    }

});
function nextPlayer() {

  activePlayer === 0 ? activePlayer = 1 : activePlayer = 0;
  roundScore = 0;

  document.getElementById('current-0').textContent = '0';
  document.getElementById('current-1').textContent = '0';
  document.querySelector('.player-0-panel').classList.toggle('active');
  document.querySelector('.player-1-panel').classList.toggle('active');

  document.querySelector('.dice').style.display = 'none';
}

document.querySelector('.btn-new').addEventListener('click',init);

function init() {

  scores = [0,0];
  roundScore = 0;
  activePlayer = 0;
  gamePlaying = true;

  document.querySelector('.dice').style.display = 'none';

  document.getElementById('score-0').textContent = '0';
  document.getElementById('score-1').textContent = '0';
  document.getElementById('current-0').textContent = '0';
  document.getElementById('current-1').textContent = '0';
  document.getElementById('name-0').textContent = 'Player 1';
  document.getElementById('name-1').textContent = 'Player 2';
  document.querySelector('.player-0-panel').classList.remove('winner');
  document.querySelector('.player-1-panel').classList.remove('winner');
  document.querySelector('.player-0-panel').classList.remove('active');
  document.querySelector('.player-1-panel').classList.remove('active');

  document.querySelector('.player-0-panel').classList.add('active');
}

当玩家被确定为获胜者时，分数应该停止累加，并且当点击掷骰子时，它不应该执行任何操作。

最佳答案

你几乎已经拥有它了。您所需要做的就是在几行中添加 - 。

改变

  document.querySelector('.player-' + activePlayer + 'panel').classList.add('winner');
  document.querySelector('.player-' + activePlayer + 'panel').classList.remove('winner');

至

  document.querySelector('.player-' + activePlayer + '-panel').classList.add('winner');
  document.querySelector('.player-' + activePlayer + '-panel').classList.remove('winner');

失败是因为 document.querySelector('.player-' + activePlayer + 'panel') 为 null，因此在到达 gamePlaying = false; 之前会出现错误>.

关于javascript - 游戏继续进行 - 希望在玩家获胜时停止，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58047037/

24 4 0
文章推荐： javascript - 如何在 Vuejs 中使用计算来观看深度数组
文章推荐： javascript - 如何在 pickdate 调用时添加条件？
文章推荐： javascript - 如何使具有同一类的多个下拉菜单的单一功能正常工作？
文章推荐： javascript - socket.io 和 Nodejs Controller 的问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com