打地鼠遊戲（2）之定義地鼠函數及函數原型 prototype
阿新 • • 發佈：2018-11-15
mouse cli function orm style img 重置 ati null
在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