码迷,mamicode.com
首页 > 其他好文 > 详细

打地鼠游戏(2)之定义地鼠函数及函数原型 prototype

时间:2018-11-15 18:22:08      阅读:240      评论:0      收藏:0      [点我收藏+]

标签:width   tee   活着   beat   事件   mouse   fun   面向   ==   

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

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

定义一个名称为Mouse的函数(方法)

var Mouse = function(type){
	//地鼠的具体dom元素,添加到页面上的
	this.mouse = null;
	//地鼠的编号
	this.num = -1;
	//地洞的编号(地鼠藏身在哪个洞)
	this.hole = -1;
	//初始化,type为地鼠类型,好与坏
	this.init(type);
}

  

然后使用 prototype 属性来向函数(对象)添加属性

Mouse.prototype = {
	//地鼠类型,好,坏,好的被杀,坏的被杀
	mousetype: {
		"good": "img/good.gif",
		"bad": "img/bad.gif",
		"goodkill":"img/goodkill.gif",
		"badkill":"img/badkill.gif"
	},
	//初始化地鼠
	init : function(type){
		type = type || ‘good‘;
		var _this = this;
		//创建地鼠的dom元素
		this.mouse = document.createElement("div");
		//扩展属性--地鼠类型
		this.mouse.mousetype = type;
		//扩展类型--属否活着
		this.mouse.islive = true;
		this.mouse.style.cssText = ‘width:75px;height:100px;background:url(‘+this.mousetype[type]+‘);left:0;top:20px;		position:relative;margin:auto;cursor:pointer;‘;
		//绑定地鼠被点击事件
		this.mouse.onclick = function(e){_this.beat(e);};
	},
	//地鼠被点中
	beat : function(e){
		
		if(this.mouse.islive){
			
			this.mouse.islive = false;
			this.onbeat();
			this.mouse.style.background = "url("+this.mousetype[this.mouse.mousetype+"kill"]+")";
		}
	},
	//地鼠的动画
	animation : function(speed){
		
		speed = speed == ‘fast‘?20:speed == ‘normal‘?30:50;
		
		var obj = this.mouse,ost = obj.style,oTop = parseInt(ost.top,10),cut=5,_this = this;
		//让地鼠从地洞冒出来
		var show = function(top){
			
			top = top-cut;
			
			if(top >= -40){
				ost.top = top + ‘px‘;
				setTimeout(function(){show(top);},speed);
			}
			else
			{
				setTimeout(function(){hide(-40);},speed*10);
			}
		}
		//隐藏地鼠
		var hide = function(top){
			
			top = top+cut;
			
			if(top <= oTop){
				ost.top = top + ‘px‘;
				setTimeout(function(){hide(top);},speed);
			}
			else {
				_this.reset();
			}
		}
		show(oTop);
	},
	//重置地鼠,当地鼠滚回洞里的时候
	reset : function(){
		
		this.mouse.islive =true;
		this.mouse.style.background = "url("+this.mousetype[this.mouse.mousetype]+")";
		
		this.onend();
	},
	//扩展方法:地鼠被点中
	onbeat : function(){},
	//扩展方法:地鼠动画结束后
	onend : function(){}
}

  

打地鼠游戏(2)之定义地鼠函数及函数原型 prototype

标签:width   tee   活着   beat   事件   mouse   fun   面向   ==   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!