HTML文件新建好，index.html，双击打开是空白页——然后我就盯着这个空白看了大概两分钟，觉得自己应该先去搜一下”网页游戏用什么语言写”。
搜出来的答案乱得很。有人说JavaScript，有人说TypeScript，有人说你得先学HTML/CSS打底，有人说直接上框架别浪费时间，还有人在帖子里吵”Phaser还是Three.js”，吵了四十几楼，我看完之后比看之前更迷糊。后来我决定不管那些，就从最笨的地方开始：JavaScript。原因很简单，浏览器原生支持，不用装任何东西，打开记事本就能写，出了问题F12就能调。这个门槛低到我没有任何理由绕开它。
JS基础我是在MDN上学的，死磕了变量、函数、事件监听这三块。说实话事件监听这里卡了我挺久——我一直搞不清楚addEventListener是挂在哪个对象上，写了个能点击移动的小方块，结果点一下它跑两格，再点又跑回来，检查了半天发现我给同一个元素绑了两个监听器，一个往右一个往左，两个都在跑。那一刻感觉自己在写薛定谔的方块。
Canvas是绕不开的东西。做网页游戏早晚得学，它就是你的”屏幕”，角色移动、碰撞检测、帧循环全在上面跑。requestAnimationFrame这个函数一开始让我觉得很玄，它不是你主动调的，是浏览器按刷新率帮你循环调——你只要在每帧里写”清屏→更新状态→重新画”这三步，游戏就能动起来。我第一个能动的东西是个白色圆，在黑色背景上来回弹。弹起来那一下感觉比开箱出SSR还高兴，虽然确实很丑，那个圆弹到边界的判定写歪了，会嵌进去一半再弹回来，像个穿墙怪。外卖刚到，先放着。
引擎的事我考虑过。Phaser是网页游戏里用得最多的，文档全，社区活，2D横版或俯视角那种做起来快很多。我在本地跑过一个Phaser的demo，加载资源、设置物理引擎、写碰撞，照着文档抄一遍大概知道它的逻辑——场景（Scene）是核心，preload加载、create初始化、update每帧跑，这个结构很清晰。Three.js是做3D的，如果你想做的是平面小游戏，Three.js暂时可以不碰，学了用不上很难受。TypeScript我目前没有专门去学，因为它本质是JS加类型，JS还没顺手的情况下加一层类型反而容易乱。我自己的顺序是：原生JS → Canvas → Phaser，到TypeScript是以后的事。
有一个坑我踩了之后觉得值得说一下：别太早引入”游戏引擎思维”。我有段时间脑子里全是”这个应该怎么用Phaser实现”，结果连最基础的碰撞逻辑都不会自己写，全靠引擎帮我处理。后来逼自己用原生Canvas手搓了一个矩形碰撞检测，才算真的明白AABB是什么意思。引擎是工具，底下的东西不理解，出了奇怪的bug你就只能干瞪眼。我就干瞪过，瞪了差不多二十分钟，最后发现是物体坐标系搞反了，X轴往右是正，我当时脑子里默认的是往左，然后所有东西都在向它不该去的方向移动，整个地图像照镜子一样。
现在的状态是能写一个能动的东西，有碰撞，有简单的分数系统。还没做音效，UI也是凑合的，美术资源全是在itch.io上找的免费包。下一步大概是把Phaser用熟，或者先把这个小东西做得稍微像个游戏一点再说。
不确定要不要继续学TypeScript，感觉现在学有点早。
暂无评论内容