javascript 制作标签游戏 - Javascript (1)

📌 相关文章

📜 javascript 制作标签游戏 - Javascript (1)

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

JavaScript 制作标签游戏 - Javascript

JavaScript 是一种流行的编程语言，广泛用于前端 Web 开发和游戏开发。在这个教程中，我们将介绍如何使用 JavaScript 制作一个简单的标签游戏。

游戏规则

游戏开始时，有多个标签在屏幕上闪动。
玩家需要点击具有特定颜色的标签，以获得积分。
当玩家点击了正确的标签后，难度会逐渐增加。标签的数量会增加，它们的移动速度也会加快。
当玩家点击了错误的标签，游戏会结束。

准备工作

在编写游戏之前，我们需要创建一个 HTML 文件，以便加载游戏所需的 JavaScript 和 CSS 文件。以下代码展示了如何创建一个基本的 HTML 页面，用于启动游戏。

<!doctype html>
<html>
  <head>
    <title>标签游戏</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <canvas id="game"></canvas>
    <script src="script.js"></script>
  </body>
</html>

实现基本游戏逻辑

接下来，我们将编写 JavaScript 代码，实现最基本的游戏逻辑。打开 script.js 文件并添加以下代码：

const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
let score = 0;

function drawScore() {
  ctx.font = '24px Arial';
  ctx.fillStyle = 'white';
  ctx.fillText(`得分: ${score}`, 10, 30);
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawScore();
}

function update() {
  // TODO: Implement the logic for updating the game state
}

setInterval(() => {
  draw();
  update();
}, 16);

在这段代码中，我们首先获取了一个 Canvas 元素并初始化了一个绘图上下文（ctx）。score 变量用于追踪玩家的得分。我们还定义了 drawScore() 函数和 draw() 函数。drawScore() 函数用于绘制得分，draw() 函数用于清除 Canvas 画布并调用 drawScore() 函数。

我们还定义了一个 update() 函数，用于更新游戏状态。我们稍后将在此函数中添加更多逻辑。最后，我们使用 setInterval() 函数每 16 毫秒调用 draw() 和 update() 函数。

添加游戏元素

现在，我们需要添加一些游戏元素，包括标签。在 update() 函数中，我们将生成标签并在屏幕上移动它们。

const tags = [];

class Tag {
  constructor() {
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height;
    this.vx = Math.random() * 10 - 5;
    this.vy = Math.random() * 10 - 5;
    this.radius = 25;
    this.color = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
  }

  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = this.color;
    ctx.fill();
    ctx.closePath();
  }

  update() {
    this.x += this.vx;
    this.y += this.vy;
    if (this.x - this.radius < 0 || this.x + this.radius > canvas.width) {
      this.vx = -this.vx;
    }
    if (this.y - this.radius < 0 || this.y + this.radius > canvas.height) {
      this.vy = -this.vy;
    }
  }
}

function update() {
  tags.forEach(tag => tag.update());
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  tags.forEach(tag => tag.draw());
  drawScore();
}

在这段代码中，我们首先定义了一个 Tag 类，用于创建标签对象。Tag 类在每次生成标签时都会设置标签位置、速度、半径、颜色等属性。我们还实现了 draw() 和 update() 函数，分别用于绘制和更新标签。

在我们更新游戏状态时，我们将简单地调用 update() 函数，它会更新所有标签的位置和速度。在绘制游戏元素时，我们将遍历所有标签并调用它们的 draw() 函数。

点击标签

现在我们需要添加点击标签的逻辑。首先，我们需要将 Tag 类稍微修改一下以便追踪标签是否被点击了。

class Tag {
  constructor() {
    // ...
    this.clicked = false;
  }

  handleClick(x, y) {
    if (Math.sqrt((this.x - x) ** 2 + (this.y - y) ** 2) < this.radius) {
      this.clicked = true;
      score++;
    }
  }

  draw() {
    // ...
    if (this.clicked) {
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
      ctx.fillStyle = 'white';
      ctx.fill();
      ctx.closePath();
    }
  }
}

在修改后的 Tag 类中，我们添加了一个 clicked 属性，用于追踪标签是否被点击。我们还添加了一个 handleClick() 函数，它根据鼠标点击位置是否在标签范围内来判断是否点击了标签。如果标签被点击，我们将 clicked 属性设置为 true 并增加玩家得分。

我们还调整了 draw() 函数，以在标签被点击时使用白色来填充该标签。

接下来，我们将在 Canvas 元素上添加一个点击事件监听器，并在其中调用 handleClick() 函数。在 script.js 中添加以下代码：

canvas.addEventListener('click', e => {
  const x = e.clientX - canvas.offsetLeft;
  const y = e.clientY - canvas.offsetTop;
  tags.forEach(tag => tag.handleClick(x, y));
});

在这段代码中，我们使用 addEventListener() 函数为 Canvas 元素添加了一个点击事件监听器。我们还计算了鼠标点击位置相对于 Canvas 的偏移量，并调用 handleClick() 函数。

增加难度

我们还可以添加一些更多的逻辑来增加游戏的难度。以下代码演示了如何根据玩家的得分来增加标签数量、移动速度和反弹效果。

function addTags() {
  const num = Math.floor(score / 10) + 1;
  for (let i = 0; i < num; i++) {
    tags.push(new Tag());
  }
}

function update() {
  tags.forEach(tag => tag.update());

  if (score > 0 && score % 10 === 0) {
    tags.forEach(tag => { tag.vx *= 1.1; tag.vy *= 1.1; });
  }
  tags.forEach(tag => {
    if (tag.clicked) {
      tag.radius -= 0.5;
      if (tag.radius <= 0) {
        tags.splice(tags.indexOf(tag), 1);
      }
    }
  });
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  tags.forEach(tag => tag.draw());
  drawScore();
}

setInterval(() => {
  draw();
  addTags();
  update();
}, 16);

在 addTags() 函数中，我们根据玩家的得分来确定该增加多少标签。我们还在 update() 函数中添加了一些逻辑，以增加标签的移动速度和反弹效果。我们还在更新标签时检查标签是否已被点击。如果标签已被点击，我们将减小标签半径，并将其从标签数组中删除。

最后，我们在 setInterval() 函数中调用 addTags() 函数，以在每次更新期间添加新标签并调用 update() 函数。

结论

到此，我们已经实现了一个简单的标签游戏。这个游戏只是一个基本的框架，您可以根据自己的需要增加更多的游戏功能。我们希望这个教程可以为您提供一个好的开始。