很多初学者学完 JavaScript 基础语法后，往往陷入“会写但不会造”的困境：能看懂简单的 DOM 操作，却缺乏将逻辑封装为可复用模块的能力，更别提独立构建具备交互性和状态管理的完整应用。这门课以“坦克游戏”为载体，核心解决的是从“语法碎片”到“工程化思维”的跃迁问题。它不局限于教你几个 API，而是通过一个具体的项目实战，强迫你面对对象状态的同步、碰撞检测的数学逻辑以及画布渲染的性能优化。课程深入剖析 JavaScript 的面向对象思想（OOP），并结合 TypeScript 的类型系统，旨在让你理解如何在开发中避免运行时错误，提升代码的可维护性与可读性。适合对象是已经掌握 HTML/CSS 基础，熟悉 JavaScript 基本语法（变量、函数、数组、对象），但尚未接触过 Canvas API，对“类”、“继承”、“多态”等概念仍停留在背诵阶段，或者希望补全 TypeScript 落地经验的中级学习者。如果你是纯零基础，建议先补齐 JS 核心基础再来看此课，否则后续的项目拆解会很吃力。
建议学习路径与核心模块
学习时建议按照“基础强化—项目实战—类型增强”的逻辑推进。首先，务必吃透 Canvas 的 2D 上下文（Context）绘制原理，这是整个项目的视觉基础，重点理解坐标系变换、图形裁剪以及帧循环（requestAnimationFrame）的机制，这部分是后续所有动态效果的基石。其次，是 OOP 思想的深度应用，课程会通过坦克、炮弹、地图等实体，演示如何将数据与行为封装在一起，建立清晰的类层级结构。这里不要只盯着代码复制，要思考为什么要把“移动逻辑”从“绘制逻辑”中剥离。最后，引入 TypeScript 对原有 JS 代码进行重构，体验类型注解、接口定义以及严格模式带来的开发体验提升。这三块内容是环环相扣的，Canvas 提供舞台，OOP 构建角色，TS 规范规则，缺一不可。建议在学习过程中，同步查阅 MDN 文档中关于 Canvas 和 ES6 类语法的章节，将课程案例中的代码逻辑与标准规范对照理解，避免形成错误的认知路径。
学完后的能力边界与资料配合
完成本课程并独立复现项目后，你应具备以下核心能力：能够从零搭建基于 Canvas 的游戏循环框架；熟练使用 class 关键字实现对象的生命周期管理；利用 TypeScript 消除隐式的 any 类型，编写具备静态检查能力的代码；解决常见的对象内存泄漏问题，通过合理的销毁机制优化性能。这意味着你可以独立开发简单的 H5 互动应用、数据可视化原型或小型休闲游戏，而不再依赖大量第三方库。在资料配合方面，资料包中的两张坦克示意图并非简单的 UI 素材，而是用于理解“精灵图（Sprite）”概念和碰撞边界（Hitbox）划分的参考。建议不要只盯着游戏画面，要尝试根据这两张图的尺寸，手动计算并调试坦克在不同状态下的旋转角度与碰撞检测算法。练习时，可以尝试修改游戏参数（如移动速度、爆炸半径），观察对逻辑的影响，甚至尝试扩展“友军误伤”或“护盾机制”等新模块。记住，这门课的价值不在于你做出了一个多么精美的坦克游戏，而在于你通过这个过程，构建起了处理复杂交互逻辑的系统化思维，这才是从“写代码”到“做开发”的关键分水岭。
课程介绍
提高 Javascript 编程能力 掌握 Canvas 开发技巧 深入理解 JS 面向对象 学习Typescript 的使用 坦克1.png 2024-6-14 19:11 上传 坦克2.png 2024-6-14 19:11 上传
课程目录
坦克.png 2024-6-14 19:10 上传 课程介绍： 提高 Javascript 编程能力 掌握 Canvas 开发技巧 深入理解 JS 面向对象 学习Typescript 的使用 坦克1.png 2024-6-14 19:11 上传 坦克2.png 2024-6-14 19:11 上传 课程目录： 01. 第一章 canvas基础知识（10节） 1.1 源码版本库 7分钟 2.2 canvas的基本使用 9分钟 3.3 typescript类型支持 11分钟 4.4 绘制圆形 6分钟 5.5 多边形绘制 5分钟 6.6 橡皮擦 5分钟 7.7 文字处理 6分钟 8.8 图片贴图的使用 9分钟 9.9 图片绘制 9分钟 10.10 绘制随机色块 9分钟 02. 第二章 canvas绘制黑板案例（7节） 1.1 创建黑板画布 9分钟 2.2 通过鼠标在黑板上写字 6分钟 3.3 事件移除 5分钟 4.4 清屏操作 10分钟 5.5 改变粉笔的颜色 7分钟 6.6 橡皮擦 5分钟 7.7 画布截图 6分钟 03. 第三章 坦克游戏开始开发（1）（10节） 1.1 创建项目 7分钟 2.2 游戏开发分析 4分钟 3.3 默认样式重置 5分钟 4.4 不使用鼠标创建文件 5分钟 5.5 全局配置项 4分钟 6.6 画布abstract抽象类 10分钟 7.7 模型贴图 14分钟 8.8 游戏贴图预加载 12分钟 9.9 优化模型贴图逻辑 7分钟 10.10 随机生成模型元素坐标 6分钟 04. 第三章 坦克游戏开始开发（2）（3节） 1.11 批量生成唯一坐标 4分钟 2.12 使用模型类型创建实例 6分钟 3.13 为草地等模型提供TS类型支持 8分钟 05. 第四章 绘制其他游戏元素（10节） 1.1 模型位置管理服务 9分钟 2.2 修复创建模型的bug 13分钟 3.3 绘制墙体模型 7分钟 4.4 绘制水元素 3分钟 5.5 生成白墙元素 4分钟 6.6 重构游戏元素生成逻辑 8分钟 7.7 绘制敌方坦克 8分钟 8.8 改变坦克方向 9分钟 9.9 通过lodash改变方向 5分钟 10.10 让坦克动起来 6分钟 06. 第四章 绘制其他游戏元素（2）（3节） 1.11 重构模型渲染机制 6分钟 2.12 重绘由画布对象完成 8分钟 3.13 重新优化坦克移动逻辑 7分钟 07. 第五章 碰撞检测（4节） 1.1 画布碰撞检测 8分钟 2.2 完成碰撞检测 9分钟 3.3 增加向下移动的概率 4分钟 4.4 优化模型代码 10分钟 08. 第六章 子弹发射（1）（9节） 1.1 创建子弹模型与画布 3分钟 2.2 为画布命名 5分钟 3.3 子弹创建逻辑分析 6分钟 4.4 修改子弹的TS类型 12分钟 5.5 子弹移动 6分钟 6.7 提取公共的碰撞检测 5分钟 7.8 模型卸载动作 4分钟 8.9 修复坦克碰撞检测 9分钟 9.10 修复子弹逻辑 7分钟 09. 第六章 子弹发射（2）（3节） 1.11 绘制 boss 围墙 7分钟 2.12 绘制 boss 5分钟 3.13 修复 boss 碰撞逻辑 2分钟 10. 第七章 玩家坦克控制（8节） 1.1 创建玩家 6分钟 2.2 改变玩家的方向 4分钟 3.3 修复事件无限绑定 2分钟 4.4 玩家坦克碰撞检测 4分钟 5.5 对玩家子弹的分析 2分钟 6.6 玩家发射子弹 3分钟 7.7 改变游戏速度 4分钟 8.8 坦克互战 4分钟 11. 第八章 游戏声音控制与开启结束处理（8节） 1.1 重构入口文件 3分钟 2.2 游戏开始贴图 2分钟 3.3 游戏开始处理 3分钟 4.4 游戏结束基础控制 5分钟 5.5 子弹停止 5分钟 6.6 子弹发射声音 5分钟 7.7 子弹爆炸的声音 2分钟 8.8 游戏结束时文字处理 4分钟
