HTML5入门习作2:炮台

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

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

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

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

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

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

操作提示:

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

[阅读全文]

2+

HTML5入门习作1:烟火

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

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

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

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

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

[阅读全文]

0

小球称重问题:用天平称量几次才能找到有问题的球?

在n个外观完全相同的小球中,有一个与其它球重量不同。如何只用一架天平找到这个球并判断它比其它球轻还是重?最少需要称几次?

这是一个流传极广的经典问题,在网上随便一搜就会发现无数人都提出了自己的见解和算法并争论不休。最常见的是12个小球,至于更多球的计算,就不是人力能及的了。

实际上,这个问题确实是有准确答案的:n次称量最多可以在个球中找到不同的球,并判断它的轻重。
理论证明可参考The Problem of the Pennies, F. J. Dyson, The Mathematical Gazette , Vol. 30, No. 291 (Oct., 1946), pp. 231-234。
不过这里不打算讲那么多理论,而是直接演示怎么称量并找到这个小球。

算法十分精巧,我尽可能简单地描述了一下。如果还是觉得太抽象,没关系,直接点击这里或者拉到下面看演示就可以了。 [阅读全文]

21+