HTML5学习+javascript学习：打飞机游戏简介以及Model层

本着好记性不如烂博客以及分享成功的喜悦和分享失败的苦楚，今天我来分享下一个练手项目：打飞机游戏~从小就自己想做游戏，可是一直没有机会。HTML5给了我们这个平台，这个平台可以有很多以前想都不敢想的东西存在，让我们怀着感激与敬畏的心情，开始我们HTML5的旅程。

练手：打飞机游戏---思路。

1 需求：

这个不多说了，玩儿过雷电的同学都知道，有己机，敌机，还有子弹，当然BOSS也算但是BOSS也是敌机了。

2 分析：

2.1 开发工具： 采用HTML5+JS来完成，JS面向对象虽然有点复杂，但是很好用。采用Function作为对象的载体，返回的是Object(后面会详细讲到，这里只是先说说开发工具)，采用HTML5的canvas对象作为表现层。

2.2 游戏原理：大家都喜欢打灰机吧，可是谁知道打灰机是怎么实现的呢？且容我抽丝剥茧，宽衣解带，沐浴更衣，慢慢道来~ 大体的思路是，图片一帧一帧地更新自己在canvas上的位置，利用人眼的缓存实现动画的效果。在更新图片之前更新坐标，在更新坐标之前更新状态。

2.3 游戏架构: 采用mvc模式，这种模式应该大家都不陌生，Model层就是在屏幕上显示的元素它的实体类，实体类有自己的方法包括更新自己的坐标，发生碰撞时的反应等，它也有自己的私有变量，比如坐标，图片，爆炸效果图片，碰撞体积，等等。view层就是显示层，它只根据返回的图片更新到画布上与业务无关。Service层，Control层与Model层之间的一层，它拥有所有要在屏幕上显示的实体（除了背景）的引用，处理Model层返回的事件，并缓存View层上要显示的内容，经过处理后返回要更新的图片信息给Control层。Control层，它会处理游戏中的事件，连接view层，并且会更新游戏的进度。它调用service，得到返回结果更新view层。

思路介绍完了，下面将介绍打灰机的具体实现了。

3.Model层

从己机，敌机，子弹中提取它们的共同点：它们都可以飞，，，，因此我把它们的父类叫fly，然后竭尽脑汁去想它们其他的共同点：它们都可以爆炸，它们会发生碰撞，它们都会移动，它们都可能会超出边界。目前我想到的就这么多了。但是它们的私有变量却都是大同小异的。它们都有一个hp属性代表血值，有个x代表x坐标，有个y代表y坐标，有个图片的引用表示要在屏幕上显示的图片，有个图片的引用表示要显示爆炸的图片，有个目标表示自己的愿景：是要消灭向上飞的呢还是要消灭向下飞的还是除了自己要消灭一切，不管怎么说得有个愿景。因此，把这个类抽象出来作为所有要表现在屏幕上的飞行物的父类：fly。我们看下它的继承关系(由于没太多接触过类图，画的粗糙，大家对付着过吧，聊胜于无。)右边的是属性和方法，属性是一个javascript中的Object

var objct = function(spec){//spec为私有变量不可全局访问因此这种方式有良好的封装性
return {//此处返回了一个对象，对象中的内容以字面量：属性值的形式
oo:function(){
return spec.oo;
},
xx:function(){
return spec.xx;
}
};
};

View Code
我们得到父类方法的引用的形式是：

Function.prototype.method = function(name,func){//为Function增加method，调用模式为：function1.method('xxx',function(){});
if(!this.prototype[name])  {
this.prototype[name] = func;
}
return this;
}
Object.method('superior',function(name){//调用上面的method方法，给Object增加父类的内容。
var that=this;
var method = that[name];
return function(){
return method.apply(that,arguments);//第一个参数为上下文，第二个参数为传递的参数。
};
});
var super_onConflict=that.superior('onConflict');//父类的onConflict方法

这种形式是书上写的，对于这种形式，我有些不懂得地方：我们在Function的原型中链接了一个method方法，又在Object调用method方法那么按照书上所说：“Function的prototype(原型链)是隐藏链接到Object的，而javascript在查找原型时，是一级一级查找的，如果当前级别的原型字面量可以找到就返回这个字面量对应的值，否则就根据原型链查找上一级的原型直到找到为止，而如果在Object中都找不到原型就返回'undefined'”这里我在Object中岂不是根本就找不到method这个字面量对应的内容了？这岂不是相互矛盾？而程序却明显没有报错。希望有人能够解我困惑，指我迷津。

有关这种形式，推荐一本书：《javascript语言精粹》（Douglas Crockford著，赵泽欣译）后面会给出一些此书中自己认为比较重要的笔记

恩，Model层就说到这里罢，这个Model层是可以扩展的，只要按照bullets.js的形式，可以有无数个子类的哦。根据抽丝剥茧的原理，下一篇将介绍打灰机service层的实现。