首页 › games › 《battle-city》1985年的坦克，装进TypeScript

仓库档案

这游戏是什么

一句话说清：你开一辆小坦克，在一张布满砖墙的战场上，一边消灭所有敌方坦克，一边守住自己基地里那只老鹰——老鹰中一发炮弹，直接GameOver。这就是1985年南梦宫在红白机上出的《坦克大战》（Battle City），而 battle-city 这个仓库，是它的一次忠实开源复刻。

它的规则简单到用一分钟就能讲完：坦克会开炮，砖墙能被轰碎，钢墙打不穿（除非你满级），水挡车不挡子弹，草丛藏车身，冰面会打滑。敌人从地图上方三个口刷新，一波接一波，全灭敌坦克过关；地图下方基地被击中，全局失败。就这么点东西，1985年卖了几百万份卡带，2026年放在浏览器里照样让人一坐一下午。

它的核心循环长这样：

flowchart LR
    A[进入关卡] --> B[侦察地形与敌人刷新口]
    B --> C[开火 拆墙 击毁坦克]
    C --> D{掉落道具?}
    D -- 是 --> E[拾取: 手雷 计时 铁锹 头盔 五角星]
    D -- 否 --> F[回防基地老鹰]
    E --> F
    F --> G{敌坦克清空?}
    G -- 否 --> B
    G -- 是 --> H[过关结算 进入下一关]
    H --> I[敌人更快更硬 阵型更刁]
    I --> A
    F -- 老鹰被毁或命尽 --> J[失败 从当前进度重来]
    J --> A

这个循环最妙的地方在于“攻”和“守”是两条互相拉扯的线：你想冲出去拆坦克，就得离开基地；你一离开，家里那只一动不动的老鹰就暴露在火力之下。玩家每一秒都在做取舍，这就是它四十年不过时的根。

为什么上头

第一，即时反馈密到没有空隙。开炮有弹道、命中砖墙有碎块、击毁敌坦克有爆炸动画加原地残骸，短促的音效每一发都跟着。 FC 时代的游戏早就把“操作后0.1秒内给反馈”这条刻进了骨头里，复刻版原样继承。你在屏幕上做的任何一次输入，都会立刻看到一个可见结果，大脑不需要等，自然不愿意停。

第二，双线目标制造持续张力。纯打枪的游戏会腻，纯塔防的游戏会困，坦克大战把两者焊在一起：出门是进攻游戏，回防是防守游戏。敌人刷新口固定在上方，但刷出来的时机和路线有随机性，你永远不能把注意力完全放在一件事上。这种“两头都要顾”的轻度焦虑感，正是心流最舒服的区间——比玩家水平高半档，又不至于绝望。

第三，随机道具掉落，一局里塞进抽奖。敌坦克被击毁时有概率掉出闪烁的道具：手雷把全屏敌人清空，计时让所有敌人定住几秒，铁锹把基地围墙升级成钢墙，头盔给你套一层无敌，五角星给坦克升级——吃一颗能发双弹，吃满能把钢墙都轰穿。掉什么、什么时候掉，全凭随机。于是每一局都有“这把能不能出个手雷翻盘”的期待感，这就是最原始的随机奖励设计，和今天所有roguelite里“三选一”的爽点是同一个东西。

第四，死亡成本低，重开成本更低。死了不是回菜单，是原地补一辆新车，命条扣一格；只要老鹰还活着，局势就还有救。失败不产生挫败堆积，只产生“就差一点”的不甘——再来一局的钩子全挂在这里。对个人开发者来说这是最值得抄的一条：别惩罚失败，让失败变得便宜。

第五，进度感落在关卡数字上。经典版三十五关，敌人型号四种、随关卡数变强，过关有结算画面。玩家对“我打到第几关了”有清晰的坐标，社交场合还能比一句“你打到哪了”。简单，但缺了它留存会掉一半。

技术拆解

这个仓库对开发者最友好的地方，是它证明了“做游戏不需要先学引擎”。

技术栈是 TypeScript + React + Canvas，没有引入任何游戏引擎。游戏世界里的每一个东西——玩家坦克、敌坦克、子弹、砖块、道具——都是一个带类型的实体对象，游戏主循环就是固定节奏地跑一遍“更新逻辑、重绘画面”。UI 层（菜单、选关、结算）交给 React，游戏画面本身由 Canvas 逐帧绘制，两层互不打架。这个“React 管壳、Canvas 管芯”的分层，是今天几乎所有 H5 小游戏的标准架构，在这里能看到一个最小可用的范本。

几个可以直接抄走的组件思路：

  1. 关卡即配置。地图不是一个画死的数组，而是一份数据文件：哪里摆砖、哪里摆钢、敌人几种各几个、从哪个口刷。想加一关就是加一份配置，想换皮就是换一份贴图。做任何关卡制小游戏，先把这个骨架搭出来，内容生产就变成了填表。
  2. 地形瓦片与破坏系统。砖墙按小块瓦片组织，炮弹命中就扣掉对应瓦片，墙会被一发一发轰出豁口。这套“可破坏瓦片地图”的实现不到几百行，直接能搬去任何射击、爆炸类游戏。
  3. 敌人AI是最小状态机。敌坦克的行为就是简单的状态切换：朝随机方向走、撞墙换向、视野里出现玩家或基地就朝那个方向开炮。没有寻路算法，没有行为树，效果已经足够“像有智能”。个人开发者的AI对手，起步阶段用状态机就够了，别一上来就A*。
  4. 碰撞检测是矩形相交。坦克、子弹、墙体全是矩形，碰撞就是判断两个矩形是否重叠，子弹打中砖块再细分到瓦片。没有任何物理库。绝大多数2D小游戏需要的物理就这么点。

读源码的顺序建议：先看关卡配置文件，搞懂一关是怎么被描述的；再找游戏主循环，看实体如何被更新和绘制；最后看敌坦克的状态机。一天就能读完，读完你就拥有了一个能改的2D游戏骨架。

变现观察

仓库本身没有任何变现痕迹，作者做它是练手加怀旧，License 开放，代码随便看随便学。但这个选题背后的赛道，变现路径其实早就被验证过了，只是有两条红线要认清。

第一条红线是IP。坦克大战这个名称和原版美术素材属于南梦宫，复刻仓库用来学习、演示、写教程没有任何问题，但要拿去赚钱，直接商用名称和原版素材是有法律风险的。实操里的通行做法是“换皮改名”：玩法机制不受版权保护，把坦克换成机甲、扫地机器人、太空车，把贴图全部重画，名字别带“坦克大战”四个字，它就是一个可以上架的新游戏。小游戏平台上那一大批坦克类变体，走的全是这条路。

第二条是渠道选择。这类游戏的量级，适合的变现方式按优先级排：

  1. 微信小游戏/H5平台广告：这是最匹配的渠道。单机、短局、随手玩，插屏和Banner广告的填充场景天然多，开发成本几乎为零。坦克品类在小游戏平台经久不衰，用户教育是四十年前完成的，你不需要教玩家怎么玩。
  2. itch.io 付费或打赏：像素复古风在这有稳定受众，定1-3美元或免费加打赏，赚不了大钱但能验证完成度。
  3. Steam 复古合集：把复刻玩法做厚——更多关卡、编辑器、联机——再考虑，工作量会翻几倍，属于后期选项。

另外别忘了教程变现这条路。这类“引擎-free复刻经典”的仓库本身就是极好的教学内容，源码导读、TypeScript游戏开发实战，都是能吸引技术流读者的题目。游戏不赚钱的时候，讲解游戏的文章和课程可能先赚钱。

给我的灵感

  1. 换皮直出，两周上小游戏平台。 Fork 他的状态机和瓦片碰撞骨架，只换三样东西：美术（机甲风或动物风）、关卡（先做15关）、音效。加一个接入广告SDK的壳。MVP工作量约1-2周，全职做可压缩到一周。变现走小游戏平台广告，这是投入产出比最稳的一条。适合人群：会前端、想快速跑通“上架-放量-看广告收益”全流程的人。
  2. 给坦克大战加一个肉鸽钩子。 在过关结算处加“三选一道具”——比如三张牌：穿甲弹、双倍射速、基地护盾，选一张带入下一关；再把35关的线性结构改成无尽模式，每5关难度上台阶。这是把1985年的关卡制，嫁接到《吸血鬼幸存者》之后的build构筑潮流上，玩家每一局的发展路线都不一样。额外工作量约一周，变现方式不变，但留存和分享率会明显变好——构筑组合是玩家最爱晒图的东西。
  3. 每日一关挑战版。 每天固定一个关卡种子，全服玩家打同一张图，比通关用时或击毁数，做一张好友排行榜。开发量很小（种子固定+一张榜），但把单机游戏变成了社交货币，“今天这关好阴间”就是天然的转发文案。适合和小游戏广告搭配，靠传播拉量。

三个点子可以叠加，但别一次全做：先换皮上线验证基本盘，再加三选一看留存，最后上每日挑战拉传播。

上手

[!tip] 51学通信知识星球 星主：爱卫生（微信：gprshome201101）——公众号「51学通信」创办者，19 年通信行业运维与讲师经验，著有《GPRS网络信令实例详解》《EPC原理与实践》《5G核心网原理与实践》三本纸质书（各大电商平台有售）。 星球定位：深耕 5G 核心网、IMS、NFV/AI、云原生等 ICT 领域，主打运维岗位与信令分析。 当前规模：5200 篇主题 / 990 个回答，198 元/年。 加入福利：加入星球后请加爱卫生微信，拉您进知识星球年度陪伴与答疑群——不限量回复您的各种问题，另有群内分享。 AI 加持：51学通信知识星球已作为 skill 接入 WorkBuddy，使用 deepseek-4-flash 在海量星球帖子中精准找贴、找视频、找 FAQ 和案例，做总结、找文档和 PPT 等场景全覆盖。

51学通信知识星球海报-扫码加入

📎 本分类最新文章