上一篇中，初学html5动画的我在canvas画布上用彩色小球模拟了烟花喷射的效果，功能虽简单，但在制作中涉及到了几个要点：计算、绘制、显示。而且实现了可兼容旧版的requestAnimationFrame方法，以达到更平滑的动画效果。

接下来，我准备在上一篇的基础上加以改进，实现一个有简单互动的小游戏。

当然，只有小球是远远不够用的，在边调试边开发的过程中，下列功能也逐一实现：

• 封装动画框架到单独js文件（代码复用）；
• 生成多边形（绘制炮台）；
• 渐变填充（绘制防卫区）；
• 角度计算（发射扇面形散布的炮弹）；
• 碰撞检测（炮弹击中目标，以及目标撞墙后的反弹）；
• 鼠标事件（实时调整炮口方向）；

以及之前实现过的渐隐对象，用于显示摧毁后的爆炸效果、全屏闪烁以及文字提示。

那么，先看看效果再讲解代码吧。

操作提示：

• 鼠标控制炮口方向，炮弹自动发射；
• 击坠10、20、40、80、160……个目标时会升级，升级后某个炮台威力会增加，相应的，敌人数量也会增加；
• 上方中央的“@”表示HP，敌人触底一次则减少一格；
• GameOver后，点击屏幕重新开始。

[阅读全文]

最近准备学习一些HTML5方面的知识。之前演示小球和天平的页面用的完全是老式的html+jquery，原本想做些动画效果的，结果只能退而求其次，用颜色代替了。

接下来拟定了几个小演示程序，准备用HTML5来做，此前先针对性地做一些非系统性的学习，只要能实现预定目标即可。

本次目标：在canvas画布上绘制彩色小球并实现模拟烟花般的动画效果。

程序很简单，只需要理解canvas元素，在指定位置用指定颜色绘制圆球然后逐帧形成动画就可以了。

考虑到性能因素，在球离开视觉区域或颜色完全变淡后就移除对象，并在每帧补上一定数量的球，这样也能够保证视觉效果。

[阅读全文]