• 打地鼠游戏(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;111px;",
    		"num2": "-14px -114px;height:100px;97px;",
    		"num3": "-8px -225px;height:100px;98px;",
    		"num4": "-14px -335px;height:100px;92px;",
    		"num5": "-8px -455px;height:100px;115px;",
    		"dot": "background:url(img/dot.png) no-repeat;115px;height:100px;",
    		"dotNo": "background:url(img/dotNo.png) no-repeat;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();
    	},
    

      

  • 相关阅读:
    Eclipse 3.6 中安装WindowBuilder Pro及使用SWT Designer
    BEC听力训练 方法
    在Eclipse安装Aptana插件
    failed to create JVM 解决办法
    BEC听力训练 方法2
    ATF/Installing
    Eclipse中如何配置SWT
    语音信号 :lms算法麦克风语音降噪
    图像信号 matlab滤波器设计1 :高通滤波器应用和设计
    matlab m文件
  • 原文地址:https://www.cnblogs.com/boyzi/p/9964975.html
Copyright © 2020-2023  润新知