为什么我选择用JavaScript做游戏
2019年我想做一个网页上的解谜游戏，Unity太大了不想装，C++又太久没碰。最后用JavaScript花了两周做出来，自己玩着还挺有意思。从那以后，我陆续用JS做了七八个项目，有平台跳跃、有回合制RPG雏形、也有纯文字冒险。
JavaScript做游戏能做什么？不能做什么？
说实话，JS做2D游戏完全没问题。平台跳跃、解谜、卡牌、塔防这类游戏，Canvas或WebGL足够应付。但3D游戏不建议用原生JS，Three.js上手成本不低，性能也比不过Unity。如果你的目标是做3D游戏，直接上Unity更省时间。
我犯过一个典型错误：试图用JS做即时战略游戏（需要频繁寻路和大量单位渲染），结果浏览器直接卡成PPT。选型之前先想清楚游戏类型，非常重要。
核心工具：Canvas还是WebGL？
新手入门推荐Canvas 2D API，语法简单，文档齐全，调试方便。一个<canvas>标签加几行getContext("2d")就能开始画东西。
当你需要粒子效果、大量精灵或者平滑动画时，再考虑Phaser.js或者PixiJS。我第一个正式项目用的是Phaser 3，它的物理引擎（Arcade Physics）做平台跳跃很顺手，文档里有大量现成例子，改一改就能跑起来。
游戏循环：心跳决定一切
不管用什么框架，游戏核心都是这个循环：读取输入 → 更新状态 → 渲染画面。原生写法大概是这样：
deltaTime（每帧间隔时间）是关键。有些新手喜欢用setInterval固定间隔，但刷新率因设备而异，不考虑deltaTime会导致游戏速度不一致——高配电脑跑得快，低配电脑跑得慢，玩家体验会很差。
function gameLoop(timestamp) { const deltaTime = timestamp - lastTime; lastTime = timestamp; update(deltaTime); render(); requestAnimationFrame(gameLoop); } requestAnimationFrame(gameLoop);
碰撞检测：矩形碰撞最常用
2D游戏里最常见的碰撞检测是两个矩形是否重叠，代码很简单：
如果要做圆形碰撞，把矩形换成圆心坐标加半径，用距离公式判断。稍微复杂一点的游戏需要AABB树或者四叉树做碰撞优化，但那是后话，新手先把基础碰撞写对再说。
function rectIntersect(a, b) { return a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y; }
状态管理：别让代码变成意大利面
游戏开发中最容易烂掉的模块是状态管理。玩家在哪个场景、有没有暂停、背包里有啥道具……这些东西散落在代码各处，到后期根本没法维护。
我的经验是用一个全局的gameState对象集中管理，配合有限状态机（FSM）处理场景切换。比如PlayerState类管理玩家状态，主逻辑根据当前状态决定update和render的行为，代码清晰很多，也方便加新功能。
资源加载：别让玩家看到白屏
做网页游戏最怕玩家看到的是加载进度条跑完后黑屏然后报错。图片、音频、字体这些资源一定要先预加载，再开始游戏。
我第一次做的时候没做预加载，音频还没加载完玩家就点开始，音效就完全失效。还有个细节：跨域图片会污染Canvas，调试的时候很烦人，尽量把资源放在同域名下。
const assets = [ { name: "player", src: "img/player.png" }, { name: "bgm", src: "audio/bgm.mp3" } ]; function loadAssets(assets, onProgress, onComplete) { let loaded = 0; assets.forEach(asset => { const img = new Image(); img.onload = () => { loaded++; onProgress(loaded / assets.length); if (loaded === assets.length) onComplete(); }; img.src = asset.src; }); }
发布：让玩家能找到你的游戏
做完了怎么让人玩到？最简单的方式是把HTML文件和资源打包放到GitHub Pages或者自己的服务器上。我自己的项目放在游戏宅基地（bacc8.cn），有兴趣可以去看看。 发布前记得做这几件事：禁用右键菜单（防止玩家复制图片）、处理窗口失焦（暂停游戏）、适配移动端（移动端触屏事件处理和PC完全不同），以及最重要的——自己先完整玩一遍，别留明显bug。
