实现吃掉病毒，让森林重获新生！原生 JS 实战

前端

2024-01-06 16:47:13

在一片郁郁葱葱的森林里，一场看不见的战争正在进行——病毒悄然入侵，威胁着森林的健康与安宁。

作为一名勇敢的代码骑士，我们肩负着拯救森林的重任。我们手中的武器，正是原生 JavaScript 的强大力量。在这场与病毒的较量中，我们将运用代码的智慧，打造一个强大的“吞噬者”，用它的吞噬能力，让病毒无处遁形，还森林一片祥和。

准备工作

踏上这段拯救森林的旅程之前，我们需要做好充分的准备：

一位勇敢的代码骑士（也就是你）
一把趁手的武器（原生 JavaScript）
一台电脑（你的战场）

打造“吞噬者”

我们的第一项任务是打造游戏中的核心角色——“吞噬者”。它将成为森林的卫士，肩负着吞噬病毒的重任。

class Player {
  constructor(x, y, size) {
    this.x = x;
    this.y = y;
    this.size = size;
  }

  move(dx, dy) {
    this.x += dx;
    this.y += dy;
  }

  draw() {
    ctx.fillStyle = "green";
    ctx.fillRect(this.x, this.y, this.size, this.size);
  }
}

释放病毒

接下来，我们让病毒登场。它们将成为吞噬者的目标，一个个被消灭。

class Virus {
  constructor(x, y, size) {
    this.x = x;
    this.y = y;
    this.size = size;
  }

  draw() {
    ctx.fillStyle = "red";
    ctx.fillRect(this.x, this.y, this.size, this.size);
  }
}

实现碰撞检测

为了让吞噬者能够准确地吞噬病毒，我们需要实现碰撞检测功能。这样，当吞噬者的边缘接触到病毒的边缘时，病毒就会被消灭。

function checkCollision(player, virus) {
  return (
    player.x < virus.x + virus.size &&
    player.x + player.size > virus.x &&
    player.y < virus.y + virus.size &&
    player.y + player.size > virus.y
  );
}

设计计分机制

每当吞噬者吞噬一个病毒，我们都需要记录分数，让玩家能够感受到自己的进步。

let score = 0;

function addScore(amount) {
  score += amount;
  document.getElementById("score").innerHTML = score;
}

构建游戏引擎

现在，我们已经拥有了游戏的基本元素，我们需要构建一个游戏引擎来控制游戏流程。

const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

let player = new Player(100, 100, 20);
let viruses = [];

function update() {
  // 更新玩家位置
  player.move(dx, dy);

  // 检测碰撞
  for (let i = 0; i < viruses.length; i++) {
    if (checkCollision(player, viruses[i])) {
      // 吞噬病毒
      viruses.splice(i, 1);
      addScore(1);
    }
  }

  // 绘制画面
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  player.draw();
  viruses.forEach((virus) => virus.draw());
}

function main() {
  update();
  requestAnimationFrame(main);
}

main();