JavaScript + Canvas塔防入门：地图创建指南

2023-10-06 12:39:21

在塔防游戏开发中，地图扮演着至关重要的角色，它定义了游戏战场的布局和可玩性。本文将从零开始，手把手教你如何使用JavaScript + Canvas创建塔防游戏地图，为你的游戏奠定坚实的基础。

地图数据表示

地图数据可以使用一个二维数组来表示，其中每个元素代表地图中的一个单元格。例如，一个简单的4x4地图可以表示为：

[
  [0, 0, 0, 0],
  [0, 1, 1, 0],
  [0, 1, 1, 0],
  [0, 0, 0, 0]
]

其中：

0 表示不可通行单元格（例如墙壁）
1 表示可通行单元格（例如道路）

使用JavaScript和Canvas创建地图

现在，让我们使用JavaScript和Canvas将这个地图数据渲染到屏幕上：

// 创建一个新的Canvas对象
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 定义地图数据
const mapData = [
  [0, 0, 0, 0],
  [0, 1, 1, 0],
  [0, 1, 1, 0],
  [0, 0, 0, 0]
];

// 定义单元格大小
const cellSize = 32;

// 绘制地图
for (let i = 0; i < mapData.length; i++) {
  for (let j = 0; j < mapData[i].length; j++) {
    const cellValue = mapData[i][j];

    // 如果是不可通行单元格，则绘制为黑色
    if (cellValue === 0) {
      ctx.fillStyle = "black";
    } 
    // 否则，绘制为白色（可通行单元格）
    else {
      ctx.fillStyle = "white";
    }

    // 绘制单元格
    ctx.fillRect(j * cellSize, i * cellSize, cellSize, cellSize);
  }
}