打地鼠游戏（2）之定义地鼠函数及函数原型 prototype

在JavaScript中，prototype对象是实现面向对象的一个重要机制。

每个函数就是一个对象(Function)，函数对象都有一个子对象 prototype对象，类是以函数的形式来定义的。prototype表示该函数的原型，也表示一个类的成员的集合。

在游戏中，首先我们先想想地鼠拥有哪些属性：

（1）地鼠的编号

（2）地鼠图片所在的dom元素

（3）地鼠所在地洞的编号

（4）地鼠的类型（有效，无效）

定义一个名称为Mouse的函数（方法）初始化地鼠属性

var Mouse=function(type){
    this.mouse=null;//地鼠所在的巢穴（）dom元素
    this.num=-1;//地鼠编号
    this.hole=-1;//地鼠所在地洞编号
    this.init(type);//初始化地鼠，有效地鼠，无效地鼠
}

为了方便和统一，有效的对地鼠拥有的属性进行操作和扩展，我们使用 prototype 属性来向函数（对象）Mouse扩展和添加属性：

Mouse.prototype={
 
    //地鼠类型，有效，无效，有效的被杀，无效的被杀
     
    mousetype: {
        "num1": "0 0;height:100px;width:111px;",
        "num2": "-14px -114px;height:100px;width:97px;",
        "num3": "-8px -225px;height:100px;width:98px;",
        "num4": "-14px -335px;height:100px;width:92px;",
        "num5": "-8px -455px;height:100px;width:115px;",
        "dot": "background:url(img/dot.png) no-repeat;width:115px;height:100px;",
        "dotNo": "background:url(img/dotNo.png) no-repeat;width:115px;height:100px;",
    },
}

在上面Mouse的函数中，我们可以看到地鼠的属性中，我们需要对地鼠所在的（巢穴）进行初始化和属性扩展：

（1）创建地鼠所在的（巢穴）dom元素

（2）巢穴中的地鼠的类型（有效，无效）　

（3）巢穴中的地鼠的状态（死，活）

（4）巢穴中地鼠的位置（出现，隐藏）　

（5）巢穴被袭击事件（单击事件）

综上我们可以得到这么一个init()函数

//初始化地鼠
//初始化地鼠
    init : function(type){
        type = type || 'num1';
        var _this = this;
        //创建地鼠的dom元素
        this.mouse = document.createElement("div");
        //扩展属性--地鼠类型
        this.mouse.mousetype = type;
        //扩展类型--属否活着
        this.mouse.islive = true;
        this.mouse.style.cssText = 'background:url(img/mouse.png) no-repeat;left:0;top:0px;\
        position:relative;margin:auto;cursor:pointer;background-position:'+this.mousetype[type]+'';
        //绑定地鼠被点击事件
        this.mouse.onclick = function(e){_this.beat(e);};
    },

在上面我们已经绑定了地鼠巢穴的单击事件，下面我们需要写单击事件的方法：

在单击时，我们需要判断巢穴中地鼠的状态，是死，是活，如果是死的那么单击无效。

//地鼠被点击
//地鼠被点击
    beat:function(e){
        if(this.mouse.islive==true){
            this.mouse.islive=false;//杀死
            this.onbeat();//地鼠被点中扩展方法
            if(this.mouse.mousetype=='num2'||this.mouse.mousetype=='num3'){
                this.mouse.style = this.mousetype['dotNo'];//显示被杀的场面
            }
            else{
            this.mouse.style = this.mousetype['dot'];//显示被杀的场面
            }
            console.log(this.mouse.getAttribute("style"));
 
        }
    },
    //地鼠被点中扩展方法
    onbeat:function(){},

地鼠被杀死后的扩展方法，我们可以去想衍生出很多有趣场面和特效，后面的游戏过程也会使用到，这里不扩展讲解

同时我们还知道我们的地鼠还具有动画属性，下面说说动画效果：

我们使用元素的绝对定位的top值来实现动画的隐藏和显示。

    //地鼠的动画
    animation : function(speed){
         
        speed = speed == 'fast'?20:speed == 'normal'?30:50;
         
        var obj = this.mouse,ost = obj.style,oTop = 0,cut=5,_this = this;
        //让地鼠从地洞冒出来
        var show = function(top){
             
            top = top-cut;
             
            if(top >= -40&&top<oTop){
                obj.style = 'background:url(img/mouse.png) no-repeat;left:0;top:0px;\
        position:relative;margin:auto;cursor:pointer;background-position:'+_this.mousetype[obj.mousetype]+'';
                ost.top = top + 'px';
                setTimeout(function(){show(top);},speed);
            }
            else
            {
                setTimeout(function(){hide(-40);},speed*10);
            }
        },
//扩展方法：地鼠动画结束后
    onend : function(){},

上面最好有一个onend动画结束的扩展方法，后面的游戏的过程中会用到，我们也可以在这个方法自定义

在游戏中我们需要一个重置让所有的地鼠回滚到洞穴里

//重置地鼠,当地鼠滚回洞里的时候
    //重置地鼠,当地鼠滚回洞里的时候
    reset : function(){
        this.mouse.islive =true;
            this.mouse.style= 'background:url(img/mouse.png) no-repeat;left:0;top:0px;\
        position:relative;margin:auto;cursor:pointer;background-position:'+this.mousetype[this.mouse.mousetype]+'';
        this.onend();
    },