打地鼠游戏(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();
	},

  

原文地址:https://www.cnblogs.com/boyzi/p/9964975.html