用 JavaScript 从零开始构建塔防游戏：静态游戏面板、道具类和坐标/链表基础结构

2023-11-24 19:18:05

探索塔防游戏的核心：从头开始构建基础结构

踏上塔防冒险之旅

塔防游戏凭借其令人上瘾的游戏机制，一直深受玩家喜爱。在本文中，我们将踏上一段激动人心的旅程，从头开始构建一个塔防游戏，重点关注游戏的核心基础结构。我们将探索静态游戏面板、道具类以及坐标和链表类的概念，为我们的塔防世界奠定坚实的基础。

绘制静态画布：游戏的根基

就像一位艺术家需要一幅画布来展示他们的作品，我们的塔防游戏需要一个舞台，供英雄和敌人展开激烈的战斗。在这里，画布元素扮演着至关重要的角色。通过利用 Canvas 元素，我们将创建一个 800x600 像素的画布，为我们的游戏世界提供一个充满活力的背景。

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

// 设置画布尺寸
canvas.width = 800;
canvas.height = 600;

// 填充背景颜色
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);

创建道具类：游戏世界的积木

我们的塔防游戏将充满各种元素，从坚固的防御塔到狡猾的敌人。为了管理这些游戏对象，我们引入道具类，它充当了游戏世界中每个元素的基本结构。每个道具都具有坐标、尺寸和类型的关键属性，为其在游戏中的行为和外观奠定了基础。

class Prop {
  constructor(x, y, width, height, type) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.type = type;
  }

  // 渲染道具
  render() {
    // 根据道具类型绘制不同的形状
    switch (this.type) {
      case 'tower':
        ctx.fillStyle = '#FF0000';
        ctx.fillRect(this.x, this.y, this.width, this.height);
        break;
      case 'enemy':
        ctx.fillStyle = '#00FF00';
        ctx.fillRect(this.x, this.y, this.width, this.height);
        break;
    }
  }
}

坐标和链表类：组织游戏对象

随着我们游戏世界变得越来越复杂，我们需要一种有效的方法来管理道具的位置和组织。在这里，坐标类和链表类发挥了至关重要的作用。坐标类表示二维坐标点，而链表类允许我们创建和管理道具集合，从而为我们的游戏对象提供结构和顺序。

// 坐标类
class Coordinate {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

// 链表类
class LinkedList {
  constructor() {
    this.head = null;
    this.tail = null;
  }

  // 向链表末尾添加一个道具
  add(prop) {
    if (!this.head) {
      this.head = this.tail = prop;
    } else {
      this.tail.next = prop;
      this.tail = prop;
    }
  }

  // 从链表中移除一个道具
  remove(prop) {
    let current = this.head;
    let previous = null;

    while (current) {
      if (current === prop) {
        if (previous) {
          previous.next = current.next;
        } else {
          this.head = current.next;
        }

        if (current === this.tail) {
          this.tail = previous;
        }

        return;
      }

      previous = current;
      current = current.next;
    }
  }

  // 获取链表的长度
  length() {
    let count = 0;
    let current = this.head;

    while (current) {
      count++;
      current = current.next;
    }

    return count;
  }
}