iT邦幫忙

2021 iThome 鐵人賽

DAY 25
0
Modern Web

JS進入新手村,我好害怕系列 第 25

Day25:終於要進去新手村了-Javascript-函式-物件綜合範例

今天我們舉例的範例依然是由彭彭影片內的範例程式碼加上自己所能理解的方式做個紀錄以及學習。

在影片之中是使用遊戲裡的玩家設定來做整個程式碼的架構,程式碼如下方:

var player=new Object;
player.name="John";
player.hp=100;
player.fight=function(){
    this.hp=this.hp-2
};
player.rest=function(){
    this.hp++
}
};
player.report=function(){
    alert(this.name+":"+this.hp)
};
player.fight();
player.rest();
player.report();

上方是完整程式碼,我們將程式碼分拆來解釋
首先是一開始的角色設定

var player=new Object;
player.name="John";
player.hp=100;

首先我們建立一個空白物件,在遊戲中就是建立玩家的意思,接著player.name="John"就是設定角色名稱,player.hp=100則是用來設定生命值為100,這個地方可以注意一下,名字的部分因為是字串,所以用引號,但是生命值的部分因為他是會隨著戰鬥會是恢復去做變動,是需要計算的,所以會使用數值。

再來是關於動態方面,像是戰鬥或是恢復生命值,以及顯示目前狀態

player.fight=function(){
    this.hp=this.hp-2
};
player.rest=function(){
    this.hp++
}
};
player.report=function(){
    alert(this.name+":"+this.hp)
};

我們首先角色內設定了遇到一次戰鬥會減損2生命值(player.fight),再來也設定了休息就加回1生命值(player.rest),最後則是使用警告視窗告訴使用這串程式碼的人角色名稱以及目前的血量(player.report)。

最後則是使用物件:

player.fight();
player.rest();
player.report();

我們在角色剛開始就已經設定了生命值為100hp(player.hp=100)
我們戰鬥(player.fight)所以減少了2生命值(this.hp=this.hp-2),因為休息(player.rest)可以恢復1生命值,最後則是告訴使用者目前的狀況(player.report),程式碼會跳出警告視窗,說明角色名稱以及目前的血量( alert(this.name+":"+this.hp)),因為前面一開始設定名稱為John,hp部分則是用原始設定的100去做計算-2加上恢復+1,所以會跳出警告視窗顯示為John:99。

參考來源:
https://shubo.io/what-is-this/
https://www.youtube.com/watch?v=Vwg7BaPBK-Y


上一篇
Day24:終於要進去新手村了-Javascript-函式-物件建立練習
下一篇
Day26:終於要進去新手村了-Javascript-函式-物件-建構式
系列文
JS進入新手村,我好害怕30

尚未有邦友留言

立即登入留言