使用 JavaScript 的 Pig 游戏设计(1)

📌 相关文章

📜 使用 JavaScript 的 Pig 游戏设计(1)

📅 最后修改于: 2023-12-03 15:36:29.925000 🧑 作者: Mango

使用 JavaScript 的 Pig 游戏设计

简介

Pig 游戏是一种由两个或更多玩家轮流掷骰子的数学游戏。游戏的目标是到达指定的得分上限（通常为 100 分）。在每个玩家的回合他们掷骰子，骰子点数会被累加到玩家的得分中。然而，如果该玩家掷骰子的点数为 1，则他们的得分将归零并结束该回合。此外，玩家还可以选择停止自己的回合并把得分保留下来。第一个达到上限得分的玩家获胜。

在这篇文章中，我们将会使用 JavaScript 来设计一个简单的 Pig 游戏程序。

设计

我们将设计一个基于浏览器的 Pig 游戏。我们将使用 HTML 文件作为主要的 UI（用户界面）和 JavaScript 文件作为游戏逻辑的主体部分。

实现

首先，我们需要添加我们的 HTML 文件：

<!DOCTYPE html>
<html>
<head>
	<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">0</div>
			<button class="btn-new" id="new-game">New Game</button>
			<button class="btn-roll" id="roll">Roll Dice</button>
			<button class="btn-hold" id="hold">Hold</button>
		</div>
		<div class="player-1-panel">
			<div class="player-name" id="name-1">Player 2</div>
			<div class="player-score" id="score-1">0</div>
			<button class="btn-roll" id="roll">Roll Dice</button>
			<button class="btn-hold" id="hold">Hold</button>
		</div>
	</div>
	<script type="text/javascript" src="app.js"></script>
</body>
</html>

下面我们需要编写我们的 JavaScript 文件 app.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] >= 100) {
			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('active');
			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');
}

这就是我们的代码。让我们来看一下它是如何工作的：

首先，我们定义了一些全局变量和函数，用于维护游戏的状态。
然后，在 init() 函数中，我们初始化了游戏的状态，包括玩家的得分、回合分数和当前玩家。
接着，我们为 Roll Dice 和 Hold 按钮添加了点击事件监听器，并实现了它们的功能。
最后，我们实现了 nextPlayer() 函数，它负责进行下一个玩家的回合。

总结

这是一个非常简单的 Pig 游戏程序，但它以一种非常优雅的方式演示了如何使用 JavaScript 设计并实现一个游戏。我们希望这篇文章对你有所帮助，让你更好地理解 JavaScript 的工作原理，并且通过实现小型项目来提高你的编程技巧。