如果能好好的運用 JavaScript 物件繼承其他物件的特性，可以有效的減少物件初始化的時間，也可以提高 Reuse 的程度，想個有趣的例子來試試，我想英雄聯盟可說是近幾年來最夯的遊戲，所以這篇我們就來創造英雄玩玩吧!
先來想看看我們需要些什麼，每個遊戲內一定都會有許多角色，所以我們就先來定義一個簡單的角色原型，而角色原型就只有 name 這個屬性。
1
2
3
4
5
<script>
function Character(name) {
this.name = name;
}
</script>
再來就是英雄了，有玩過 LOL 的朋友應該都知道，大部分的英雄的技能就是 Q、W、E、R 這四個技能去搭配，所以我們知道所有的英雄都會有 Q、W、E、R 這四個通用技能，把這四個技能定義出來。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
function Character(name) {
this.name = name;
}
var Hero = {
skillQ : function(){
return this.name + ' 使用了 Q 技能。';
},
skillW : function(){
return this.name + ' 使用了 W 技能。';
},
skillE : function(){
return this.name + ' 使用了 E 技能。';
},
skillR : function(){
return this.name + ' 使用了大絕招。';
}
};
</script>
英雄是遊戲裡的角色，但是目前角色只有名字這個屬性，因此我們要讓角色繼承英雄的四個技能，這樣接下來我們建立英雄角色的時候，就可以直接使用英雄技能了。 這裡使用 Object.create() 方法。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
function Character(name) {
this.name = name;
}
var Hero = {
skillQ : function(){
return this.name + ' 使用了 Q 技能。';
},
skillW : function(){
return this.name + ' 使用了 W 技能。';
},
skillE : function(){
return this.name + ' 使用了 E 技能。';
},
skillR : function(){
return this.name + ' 使用了大絕招。';
}
};
// 將 Hero 的 技能繫結到 Character 身上
Character.prototype = Object.create(Hero);
</script>
接下來我們就能夠開心的創造出實體的英雄角色了，就先創造出兩個英雄角色，易大師以及卡特蓮娜吧!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script>
function Character(name) {
this.name = name;
}
var Hero = {
skillQ : function(){
return this.name + ' 使用了 Q 技能。';
},
skillW : function(){
return this.name + ' 使用了 W 技能。';
},
skillE : function(){
return this.name + ' 使用了 E 技能。';
},
skillR : function(){
return this.name + ' 使用了大絕招。';
}
};
// 將 Hero 的 技能繫結到 Character 身上
Character.prototype = Object.create(Hero);
var hero01 = new Character('易大師');
var hero02 = new Character('卡特蓮娜');
</script>
這樣就差不多完成了，為了驗證創造出來的是兩個不同的英雄角色，但可以使用共通的技能。因此 HTML 的部分，我們就用下拉式選單讓玩家可以選擇英雄，再搭配四個技能(Q、W、E、R)的按鈕，在畫面上顯示出哪個角色使用了哪個技能。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<body>
<select id="heros" onchange="selectedHero()">
<option value="no1" >易大師</option>
<option value="no2" >卡特蓮娜</option>
</select><br/><br/><br/>
<button id="Q">Q 技能</button>
<button id="W">W 技能</button>
<button id="E">E 技能</button>
<button id="R">R 技能</button>
<h2 id='demo'></h2>
</body>
</html>
下拉式選單註冊了 onchange 事件，當 value 改變時去判斷玩家選擇了哪位英雄，程式碼如下：
1
2
3
4
5
6
7
8
9
10
<script>
function selectedHero(){
if(document.getElementById('heros').value == 'no1')
Champion = hero01;
if(document.getElementById('heros').value == 'no2')
Champion = hero02;
// 在 console 印出選擇了哪個英雄 (no1 或是 no2)
console.log(document.getElementById('heros').value);
};
</script>
最後再幫四個技能按鈕註冊事件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
document.getElementById('Q').addEventListener('click', function() {
document.getElementById("demo").innerHTML =
Champion.skillQ();
});
document.getElementById('W').addEventListener('click', function() {
document.getElementById("demo").innerHTML =
Champion.skillW();
});
document.getElementById('E').addEventListener('click', function() {
document.getElementById("demo").innerHTML =
Champion.skillE();
});
document.getElementById('R').addEventListener('click', function() {
document.getElementById("demo").innerHTML =
Champion.skillR();
});
</script>
範例結束，接下來就可以來玩看看了，如果有興趣的話你也可以自己去更改共通技能或是建立你自己喜歡的英雄嘍。
