HTML5捕鱼达人前端练习项目
HTML5 的捕鱼达人的源码，算是前端练手项目里比较经典的。页面用的是canvas画布，图形渲染靠JavaScript来控制，配合点WebSocket做实时互动，做游戏基本该用的技术它都碰了个遍，挺全乎的。
画面上的鱼啊、炮台这些，基本都是通过canvas动态绘制的。你要是想练练怎么用requestAnimationFrame优化帧率，或者搞搞ctx.drawImage那套东西，这源码还挺合适。
逻辑部分写得也比较清晰，大量用了ES6语法，比如箭头函数、let、模板字符串这些，用起来更舒服。你要是刚转 ES6，也能借这项目练练手。
游戏的数据存储靠的是Web Storage，像localStorage就拿来保存用户的进度了，刷新也不丢；而实时同步用WebSocket，做的还挺稳，延迟控制得比较好。
如果你想研究一下声音的控制，也有得看。用了 HTML5 的<audio>标签，配合play()和pause()方法做音效，打中鱼会有反馈，蛮有意思。
有些源码版本里还用了Pixi.js或者matter.js，像碰撞检测、物理效果啥的，都得挺自然，学习怎么做游戏引擎里的基本“世界规则”，挺值的。
想看源码的话可以戳这个：Html5 捕鱼游戏源代码，还有其他版本：HTML5 捕鱼游戏源码 1.0。
如果你是前端转游戏开发，或者纯粹想搞个能上线的小项目，HTML5 版捕鱼达人确实还不错。你也可以参考这个 JavaScript 实现版本：基于 JavaScript 的捕鱼达人游戏实现。
文件大小：4.39MB
评论区