使用 JavaScript 构建骰子游戏(1)

📌 相关文章

📜 使用 JavaScript 构建骰子游戏(1)

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

使用 JavaScript 构建骰子游戏

本教程将会教你如何使用 JavaScript 构建骰子游戏，并且会涉及一些基本的 JavaScript 知识。我们将使用 HTML、CSS 和 JavaScript 实现这个游戏，让你了解到如何创建一个互动的浏览器应用。

准备工作

在开始编写代码之前，你需要做一些准备工作：

你必须了解 HTML、CSS 和 JavaScript。
你需要有一个文本编辑器，例如 VSCode。
你需要有一个想法，确定你创建游戏所需要的功能。

第一步：创建 HTML 文件

首先，我们需要创建一个 HTML 文件，它将成为我们游戏的主要界面。创建一个名为 “index.html” 的文件，并添加以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Dice Game</title>
</head>
<body>
  <h1>Dice Game</h1>
  <div>
    <h2>Player 1</h2>
    <p>Score: <span id="player1-score"></span></p>
    <p>Current Roll: <span id="player1-current"></span></p>
    <button id="player1-roll">Roll Dice</button>
    <button id="player1-hold">Hold</button>
  </div>
  <div>
    <h2>Player 2</h2>
    <p>Score: <span id="player2-score"></span></p>
    <p>Current Roll: <span id="player2-current"></span></p>
    <button id="player2-roll">Roll Dice</button>
    <button id="player2-hold">Hold</button>
  </div>
</body>
</html>

这个 HTML 文件包含了游戏界面的基本结构，我们创建了两个玩家，并为每个玩家创建了一个 roll 按钮和一个 hold 按钮，分别代表掷骰子和进行分数累积。

第二步：添加 CSS 样式

为了让我们的游戏看起来更好，我们需要添加一些 CSS 样式。创建名为 “style.css” 的文件，并添加以下样式：

body {
  font-size: 20px;
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 0;
}

h1 {
  margin: 50px 0;
}

div {
  display: inline-block;
  vertical-align: top;
  margin: 50px 30px;
}

button {
  font-size: 16px;
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
  border: none;
  background-color: #212121;
  color: #fff;
  cursor: pointer;
}

button:hover {
  background-color: #777;
}

p {
  margin: 10px 0;
}

span {
  font-weight: bold;
  color: #2196F3;
}

这些样式将改变页面的字体大小、字体样式、段落间距和按钮颜色等。

第三步：添加 JavaScript 功能

现在我们需要为游戏添加 JavaScript 功能。我们需要在 HTML 文件中添加以下代码，以便在页面加载后加载脚本：

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

然后我们需要创建名为 “app.js” 的 JavaScript 文件，并添加以下代码：

const player1RollBtn = document.querySelector('#player1-roll');
const player1HoldBtn = document.querySelector('#player1-hold');
const player2RollBtn = document.querySelector('#player2-roll');
const player2HoldBtn = document.querySelector('#player2-hold');
const player1Score = document.querySelector('#player1-score');
const player1Current = document.querySelector('#player1-current');
const player2Score = document.querySelector('#player2-score');
const player2Current = document.querySelector('#player2-current');

let currentPlayer = 1;
let currentScore = 0;
let gamePlaying = true;

function rollDice() {
  if (gamePlaying) {
    const roll = Math.floor(Math.random() * 6) + 1;
    const dice = document.createElement('img');
    dice.setAttribute('src', 'dice-' + roll + '.png');
    dice.setAttribute('alt', 'Dice ' + roll);
    document.body.appendChild(dice);
    setTimeout(() => { dice.remove(); }, 1000);
    if (roll === 1) {
      currentScore = 0;
      currentPlayer === 1 ? currentPlayer = 2 : currentPlayer = 1;
      player1Current.textContent = 0;
      player2Current.textContent = 0;
      document.querySelector('.player1').classList.toggle('active');
      document.querySelector('.player2').classList.toggle('active');
    } else {
      currentScore += roll;
      currentPlayer === 1 ? player1Current.textContent = currentScore : player2Current.textContent = currentScore;
    }
  }
}

function hold() {
  if (gamePlaying) {
    currentPlayer === 1 ? player1Score.textContent = parseInt(player1Score.textContent) + currentScore : player2Score.textContent = parseInt(player2Score.textContent) + currentScore;
    currentScore = 0;
    currentPlayer === 1 ? currentPlayer = 2 : currentPlayer = 1;
    player1Current.textContent = 0;
    player2Current.textContent = 0;
    document.querySelector('.player1').classList.toggle('active');
    document.querySelector('.player2').classList.toggle('active');
    if (parseInt(player1Score.textContent) >= 100 || parseInt(player2Score.textContent) >= 100) {
      gamePlaying = false;
      document.querySelector('#player' + currentPlayer + '-score').classList.add('winner');
      document.querySelector('#player' + currentPlayer + '-score').textContent = 'Winner!';
    }
  }
}

player1RollBtn.addEventListener('click', rollDice);
player1HoldBtn.addEventListener('click', hold);
player2RollBtn.addEventListener('click', rollDice);
player2HoldBtn.addEventListener('click', hold);

这个 JavaScript 文件添加了以下功能：

将页面上的按钮和文本框绑定到 JavaScript 变量。
创建一个局部变量用于确定当前玩家。
创建一个全局变量 gamePlaying，用于确定游戏是否正在进行中。
创建几个函数，用于处理 roll 按钮、hold 按钮的点击事件以及控制游戏进度。
将这些函数绑定到适当的按钮上。

最后

现在我们已经完成了整个游戏，可以在浏览器中运行，并与朋友一起玩耍。如果你想要继续改进游戏，可以尝试添加更多的功能，例如添加计时器、音效和动画等。

完整代码请参见我的 GitHub 仓库。