JavaScript坦克大战开发实录（1）：基于DOM的面向对象架构与核心移动逻辑

项目背景与技术选型

本案例旨在展示JavaScript在面向对象编程中的应用，特别是如何在浏览器环境中通过操作DOM元素来实现简单的游戏对象绘制与刷新。虽然现代Canvas API更为常用，但本教程专注于DOM操作，适合理解对象关系与事件驱动模型。

技术要点：

• 采用DOM元素
  作为游戏对象的视觉载体
• 使用一维数组模拟二维地图网格
• 利用CSS position: absolute进行精确定位

第一阶段：创建基本对象与画布

第1步：定义地图数据结构与容器

为了简化位置计算，我们将游戏地图视为一个 13 * 13 的网格系统。每个单元格大小为 40px × 40px，因此整个画布容器尺寸设定为 520px × 520px。地图数据将在后续步骤中通过二维数组存储，而当前阶段主要建立HTML骨架。

HTML结构搭建： 创建一个名为 divMap 的容器用于承载游戏画面。

<!-- HTML结构示例 -->
<div id="divMap"></div>

第2步：构建顶级对象 TankObject

所有可显示的游戏对象（如坦克、子弹）都将继承自 TankObject。该对象负责维护对象在网格中的坐标 (XPosition, YPosition) 以及对应的DOM节点 UI。

核心逻辑：

1. 坐标系统：XPosition 和 YPosition 存储的是网格索引（0-12），而非像素值。
2. 位置同步：通过 SetPosition(left, top) 方法，将网格坐标转换为CSS像素值（x * 40），并更新DOM的 style.left 和 style.top。

代码实现关键点：

TankObject = function () {
    this.XPosition = 0;
    this.YPosition = 0;
    this.UI = null; // DOM元素引用
};

TankObject.prototype.SetPosition = function (leftPosition, topPosition) {
    // 将像素坐标四舍五入转换为网格索引
    this.XPosition = Math.round(leftPosition / 40);
    this.YPosition = Math.round(topPosition / 40);
    
    // 同步更新DOM样式
    if (this.UI && this.UI.style) {
        this.UI.style.left = leftPosition + "px";
        this.UI.style.top = topPosition + "px";
    }
};

第3步：引入通用工具类 UtilityClass

为了提高代码复用性，提取常用的DOM操作方法封装为 UtilityClass。主要功能包括：

• CreateE(type, id, className, parentNode)：动态创建DOM节点。
• RemoveE(obj, parentNode)：移除指定节点。
• BindFunction(obj, func)：强制绑定函数作用域，解决JavaScript中常见的 this 指向问题。

同时定义方向枚举 EnumDirection，用字符串 "0"-"3" 分别代表上、右、下、左。

第二阶段：实现坦克移动逻辑

第4步：设计移动对象 Mover

移动逻辑封装在 Mover 类中，它继承自 TankObject。该类引入了 Move() 方法，负责处理平滑动画与网格跳跃。

移动算法分析：

1. 锁机制 (lock)：防止重复调用导致速度叠加或逻辑冲突。只有当 lock 为 false 时才开始移动。
2. 步进计算：每次定时器触发，对象沿当前方向移动 5px。
3. 完成判断：当累计移动距离达到 40px（即跨越一个网格），停止定时器，重置 lock，并更新网格坐标。

注意：此阶段的 Mover 仅负责物理移动，尚未包含碰撞检测。

Mover.prototype.Move = function () {
    if (this.lock) return; /* 已锁定或已在移动中 */
    
    // 更新背景图位置以表现朝向（假设有spritesheet）
    this.UI.style.backgroundPosition = "0 -" + (this.Direction * 40) + "px";
    
    this.lock = true;
    var This = this;
    var startmoveP = parseInt(This.UI.style[vp]); // 起始位置
    
    // 使用 setInterval 进行步进动画
    var subMove = setInterval(function () {
        // 每次移动 5px
        This.UI.style[vp] = parseInt(This.UI.style[vp]) + 5 * val + "px";
        
        // 如果已移动 >= 40px，则完成一次网格跳转
        if (Math.abs(parseInt(This.UI.style[vp]) - startmoveP) >= 40) {
            clearInterval(subMove);
            This.lock = false; // 解锁
            // 更新网格坐标
            This.XPosition = Math.round(This.UI.offsetLeft / 40);
            This.YPosition = Math.round(This.UI.offsetTop / 40);
        }
    }, 80 - this.Speed * 10); // 速度越快，间隔时间越短
};

第三阶段：整合游戏控制器 GameLoader

第5步：实例化玩家坦克 SelfTank

SelfTank

继承自 Tank（进而间接继承 Mover）。在初始化时，通过 UtilityClass.CreateE 创建一个新的 div 元素，并赋予 CSS 类名 itank 以便通过样式表控制外观。

第6步：编写主循环与输入响应

GameLoader 是整个游戏的核心调度器，其主要职责包括：

1. 初始化：创建玩家坦克实例，设置初始网格坐标（如中心位置），并渲染到 divMap 中。
2. 键盘监听：绑定 window.onkeydown 和 onkeyup。按下方向键（37-40）时，设置 SelfTank.Direction 和 MovingState = true；按键释放时，设置 MovingState = false。
3. 游戏循环：使用 setInterval 每 20ms 执行一次 Run() 函数。若检测到 MovingState 为真，则调用 Move() 触发一次步进动画。

架构关系图说明：

总结与下一步计划

至此，我们完成了坦克大战的基础框架搭建。通过 TankObject、Mover 和 GameLoader 三个核心层，实现了坦克在DOM环境下的网格化平滑移动。当前的实现具备了基本的输入响应和状态管理，但尚缺少地图边界、障碍物碰撞检测以及敌方坦克逻辑。

后续章节将重点完善地图加载机制，并引入碰撞检测算法，使游戏体验更加完整。

以上就是JavaScript制作坦克大战全纪录（1）的详细内容，更多关于JavaScript面向对象游戏开发及DOM操作的资料请关注本站其它相关文章！