20141208 用js做个打飞机游戏 , 用div和img就够了 , ie8也能够支持

演示地址 :   http://xuanzun.sinaapp.com/project/planeFighter/

gitosc : https://git.oschina.net/cxwithyxy/JS_DIV_planeFighter.git

终于期末考考完 , 剩下一个月的课程设计 ,倒不如直接回公司好了 , 顺便回了一趟家 ,家里没有接网线 , 郁闷 ,只能敲敲游戏练练手...

于是就有这个打飞机游戏了.

做这样的游戏有两个关键问题

一个是碰撞的检测

一个是画面循环刷新

当然都不难 , 这飞机游戏不需要用到像素级别的碰撞检测 , 矩形碰撞就是了 ,当然飞机不是矩形的 , 那可以构造多个矩形碰撞箱去尽量填充飞机了..

思路也是一样 , 和 box2D那些引擎差不多吧 (自我感觉良好(^_^)) , 画画归画面 , 碰撞模型归碰撞模型来做.

在CX文件夹下面有几个大的类 , 至于为什么都是CX开头 , 这 .... 我名字的首字母就是C和X了...

首先是碰撞模型 , 有个AABB的类 , 额, 据说AABB就是矩形碰撞了 , 反正我也不清楚 , 我做的能够碰撞检测就行了..

然后是游戏单元类 , 叫CXObject, 这里说的游戏单元就是飞机啊子弹啊这些要计算碰撞的 , 一个CXObject 基本包括了 一组碰撞箱 ,也就是一组AABB对象 ,和自身画面的对象 , 也就是dom对象 , 就是一个img标签啦.

再有的是CXWorld , 游戏世界 ,它负责了游戏整个世界的刷新 , 世界不刷新 ,里面的东西也不会动 , 多久刷新一次 ,按照flash动画来说是1秒20帧, 那我也要弄成1秒刷新20次咯 , 这样看起来动画才会流畅了.

这3个就构成了最基本的游戏世界和游戏单元了

至于游戏画面刷新 , 也跟着游戏世界的刷新而刷新 , 这不能叫刷新吧 , 充其量就是更新img标签的left和top属性而已....

每次世界刷新的时候 ,移动CXObject的时候同时移动碰撞箱和dom对象 , 这样就能看到飞机在动了 , 虽然飞机只是一个img标签...

然后每次刷新都要检测一下碰撞 , 这样才能够知道在我一轮扫射之下有多少飞机能够活下来 , 当然自己的飞机也不要撞到敌机坠毁了..

现在只有一种敌机 , 速度和分数是随机的 , 当然分数是根据速度定的 , 速度越快分数越高吧 

之后可以加个血量进去 , 再弄个大飞机慢慢打 , 哈哈哈