javascript - 游戏继续进行 - 希望玩家获胜时停止
问题描述
已将 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;
.
推荐阅读
- r - 如何使用ggplot制作虚线和图例
- python - Python:使用 OpenCV 进行字母修复以进行文本识别
- amazon-web-services - 从 Hyperledger 模板创建 CloudFormation 堆栈时 CREATE_FAILED
- php - MySQL 错误 mysqli::__construct(): (HY000/2002): Connection denied
- excel - 如何从另一张纸上的数据透视表中 COUNTIF "=#N/A"?
- javascript - Appium 如何检查 iOS 应用的 UI 以显示视图层次结构?
- jquery - 选择离被点击元素最近的类
- vba - Ms-Access to Excel Late Binging VBA
- python - 使用 JIRA Python API 时缺少属性
- python - 在网格中显示图像