campfire-creepies JavaScript像素风恐怖游戏
像素风的恐怖小游戏《campfire-creepies》，是 Jerone 和 Percy Hsu 合作写的，已经上线到网站上可以玩。整个项目用的是纯前端技术，没后端，逻辑都靠JavaScript撑着，功能也挺丰富。游戏运行流畅，响应也快，看得出来用了一些像requestAnimationFrame和事件监听之类的老朋友。
打包用的是webpack CLI，一看就是有经验的前端做的。目录结构清晰，npm run build一下就能生成干净的静态资源，部署方便。webpack 配置里应该有用到code split、source map和压缩插件，整个流程跑下来顺。
语法方面也不落后，ES6的箭头函数、类、模板字符串这些全都用上了，代码写得清爽又不失表达力。你要是刚入门，可以借这个项目练习一下 ES6 的语法，是类的定义和事件绑定，实用性强。
画面部分估计是靠Canvas或WebGL画的，画风走的是复古像素风，挺有味儿的。画图这块儿建议看看CanvasRenderingContext2D或者WebGLRenderingContext的文档，搞懂怎么画图、清屏、刷新帧。
性能优化也做得比较细。像资源预加载、requestAnimationFrame替代setInterval这些，能让游戏不卡顿、不掉帧。代码组织也比较规整，没有乱七八糟的全局变量，维护起来省心。
如果你平时喜欢撸点小游戏，或者刚好想深入了解webpack 打包、Canvas 绘图、JS 动画优化，可以直接把项目 clone 下来跑跑看。想看更多前端技巧，也可以翻翻这些：
文件大小：423KB
评论区