HTML5坦克大战Canvas游戏示例
HTML5 的 Canvas+JavaScript 组合，做游戏其实挺带劲的。这套html5 坦克大战就是个还不错的例子。画面虽然简单，但基本逻辑、碰撞检测、声音啥的都有，能学到不少。是对 Canvas 的操作，像fillRect()、clearRect()这些方法，平时不怎么玩游戏开发的，都不太用得上，这回能一次性摸个透。
游戏的核心是Canvas 绘图，你能看到坦克、子弹、爆炸全是用beginPath()、lineTo()这些一笔一划画出来的。再加上requestAnimationFrame来搞动画循环，响应也挺快，不卡顿。
Web Audio API加进来以后，开火、爆炸的音效就更带感了。你可以自己试试，写个AudioContext对象，通过事件触发音频播放，配合画面效果还是挺爽的。
输入上就是标准的键盘事件监听，比如keydown和keyup，方向控制、发射子弹都靠它搞定。再加上定时器或requestAnimationFrame，整个游戏主循环就跑起来了。
要保存玩家的得分？Web Storage就能派上用场，用localStorage.setItem()就能搞定。不管你关了浏览器还是刷新页面，都能玩。
代码结构上其实也不复杂，用点ES6 模块语法再配合 Webpack 打个包，项目就清爽多了。顺手再加点CSS3 动画，像box-shadow、transform，视觉效果立马不一样。
如果你想练练 Canvas 绘图、搞清楚游戏循环怎么写、声音和存储怎么整，那这套源码你可以看看，自己动手跑一遍更有感觉。源码链接我也帮你整理好了，直接点：
如果你刚好在学 Canvas 或者想做点小游戏练手，这套源码还蛮适合拿来拆着玩。边看边改，收获不少。
下载地址
用户评论
