闲着的时候写了两个网页小游戏:一个消消乐,一个 2048。都是单人、本地、不需要注册的那种。
现成的实现很多,但自己写能控制细节:动画节奏、输入响应、手机上的触控手感。这些在小游戏里比功能本身更重要——卡顿一次就不想玩了。
两个选择:全放前端,或者放服务端。
我选了服务端存状态、前端只做渲染。理由有三个:
代价是每一步都要请求一次接口。局域网/同城延迟下没问题,但如果服务器离得远,就会有明显的手感损失。所以做的是"先本地预测、再以服务端为准"的折中。
输入合并:快速连按时不能每一下都发请求,要合并成最后一次方向。否则状态会乱。
动画与状态分离:动画是前端的事,状态是后端的事。前端拿到新状态后播放动画,动画期间锁输入,播完再解锁。这样即使网络抖动,画面也不会崩。
手机适配:用 touchstart + 滑动阈值判断方向,别用 click。另外要禁掉双击缩放和页面滚动,否则滑一下页面就跟着动。
存档:只存必要字段(棋盘、分数、步数、时间),JSON 一行就能装下。恢复时校验长度和数值范围,防止存档损坏导致页面白屏。
做完之后最大的感受是:玩家不会因为"功能少"而放弃,但会因为"一下卡顿"而关掉。所以优化顺序应该是:输入延迟 → 动画流畅度 → 功能。
经验:小游戏的技术含量不高,但"手感"这件事只有自己一行行调才调得出来。