立项背景和目标:本产品是一款面向微信生态的 3D 坦克射击小游戏。项目立项背景是基于科幻末世世界观构建强代入感的单人突围玩法。目标是提供低门槛、强反馈的移动端射击体验,并通过完善的养成与留存系统提升用户时长和回访率。
核心功能模块介绍:
3D 战斗模块:基于 Canvas 2D 自研软渲染 3D 投影引擎,无需 3D 引擎即可实现坦克、装甲车、机器狗、飞机等多类敌军及弹道、爆炸、雷达等效果,并做真机兼容优化。
关卡与剧情模块:共 45 关,采用断层式难度曲线,敌军血量、移速、射速、命中率逐关提升并设封顶,保证"有挑战但可通关";关卡间穿插剧情文案推进世界观。
武器与弹药系统:穿甲弹(高穿透)、高爆弹、机枪弹、追踪导弹四种弹药,配合瞄准锁定、距离测算等辅助,满足不同战术打法。
养成与商店模块:商店可购买各类弹药;坦克装甲厚度、反应装甲、倾斜角度、炮塔防御力四项属性可升级(最高 10 级),提供免费升级入口。
留存与社交模块:7 日签到梯度奖励弹药与生命上限,好友验证互动,本地存档与最高分记录,配合多段音效提升体验。
项目实现
一、整体架构和设计思路
本项目是一款微信小游戏,整体采用单 Canvas+单文件+状态机的架构,源码 game.src.js(约 1.35 MB)打包加固后产出 game.js 上传。技术栈按层划分:
渲染层使用 wx.createCanvas()获取 Canvas 2D 上下文,基于自研软渲染 3D 投影(project(x,y,z)函数实现透视投影与远裁剪),不依赖 WebGL/Three.js,在中低端微信机型上保持稳定帧率。
主循环层:用 requestAnimationFrame驱动,通过 shim 替换为 wx.requestAnimationFrame/ wx.cancelAnimationFrame,解决微信小游戏真机没有浏览器 RAF 的问题。
游戏状态层*采用有限状态机,涵盖主菜单、关卡战斗、商店、坦克升级、7 日签到、剧情、任务失败/通关结算等界面,各状态独立渲染与输入处理。
数据层:统一封装 storageGet / storageSet,底层调用 wx.getStorageSync/ wx.setStorageSync,并用 try/catch容错;包含 SAVE_KEY 进度、HIGH_KEY最高分、UPGRADE_KEY` 升级、EXTRA_AMMO_KEY弹药库存、SIGNIN_KEY签到 5 个本地存档。
资源层:13 个 .mp3 音效 + wx.createWebAudioContext / wx.createInnerAudioContext双通道播放,避免并发被覆盖。
工程与安全层:fortify.js脚本基于 javascript-obfuscator 对源码做变量/字符串混淆、压缩与反调试,产物 game.js上传发布。
二、我负责的模块与结果
该项目由我独立完成全栈开发,主要负责:① 自研 3D 投影渲染引擎;② 战斗主循环(玩家坦克、4 类敌军、4 类弹药、弹道与爆炸);③ 关卡生成与难度曲线(共 45 关,断层式递增并设封顶以保证可通关);④ 养成与留存系统(4 项坦克属性各 10 级升级、商店 4 类弹药、7 日签到、好友验证);⑤ 资源/音效管理;⑥ 代码加固与发布。最终量化产出:源码约 1.35 MB,
三、难点、坑和解决方案
1. 真机 RAF 不存在:微信小游戏环境无浏览器 RAF,直接调用会报错。解决:在初始化时检测并 globalThis.requestAnimationFrame = wx.requestAnimationFrame.bind(wx),统一替换。
2. Canvas DPR 适配坑:早期不同机型 windowWidth`与 canvas 实际像素比例不一致,导致画面拉伸模糊。解决:initCanvas()中按 Math.min(info.pixelRatio, 2)