是男人就坚持20秒--飞机游戏制作

受朋友之托,做一个小游戏--是男人就坚持20秒.

一个很经典的exe小程序,想放到网页上做个小游戏互动.
链接如下:
是男人就撑过20秒

大致看了一下,应该也没什么难度,撸起袖子直接干了.

框架当然是用自己最熟悉的框架:createjs,
adobe公司的开源canvas框架还是不错的.

花了3 4天时间,基本功能都完成了,给个demo链接,大家可以去玩一下.
是男人就坚持20秒demo游戏链接
顺便再给几张游戏截图:

中间碰到两个小算法.
第1个是碰撞检测
这个自己写太复杂了,我用了createjs的第三方开源检测库ndgmr.Collision.sprite.js
这里提一下我在用的时候发现他会报错(官方自己的demo),虽然不影响使用,但是看到控制栏有红字就是不舒服...
这里提一下报错的主要原因是calculateIntersection里面比较两个rect,得到的宽度或者高度为0,导致后面的canvas画布为0导致的.
第2个是子弹飞行角度
这个就比较简单了,就是已知两点,求两点的角度.
本以为这个网上解决方案会有很多,结果找了一圈不知道是自己运气差还是怎么,竟然没找到!
想了想正好练练手,再重温一下三角函数...
下面是自己写的计算角度,可能有更好的算法自己没想到^_^

 function getAngle(px, py, mx, my) {
    var x = Math.abs(px - mx);
    var y = Math.abs(py - my);
    var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
    if(z == 0) return 0;
    var cos = y / z;
    var radina = Math.acos(cos); //用反三角函数求弧度

    var angle = 180 * radina / Math.PI; //将弧度转换成角度
    //因为算出来的值是[0,90),需要转成[0,360)
    if(mx >= px) {
        if(my >= py) {
            angle = 90 - angle;
        } else {
            angle = 270 + angle;
        }
    } else {
        if(my >= py) {
            angle = 90 + angle;
        } else {
            angle = 270 - angle;
        }
    }
    return angle;

}

这里的缺陷就是先算出了角度是[0,90),然后再转成了[0,360),个人感觉应该是有办法直接算成[0,360)的...
如果有人知道,请千万告诉我一声....

好了,睡觉去了...Zzz