iT邦幫忙

2023 iThome 鐵人賽

DAY 5
1
Modern Web

什麼!在網頁上也可以寫遊戲?系列 第 5

[Day 05] 事件表實作 - 檢查篇(上)

  • 分享至 

  • xImage
  •  

從昨天的介紹可以發現,每個動作幾乎都是獨立的,各自做自己的事情,通常不太需要考慮到他們之間的關聯性,只需要考慮到他們之間的順序即可,但是檢查就不太一樣了。

前置動作設置

不過在深入介紹之前,還是先來看看範例吧,首先我把昨天設置的動作,改成了生成四名敵方角色在地圖的四個角落,且將他們的代碼設定成 ai_1 ~ ai_4,接著使用 尋找前往目標 這個動作,讓這四名角色自動搜尋敵方,也就是玩家的位置,這樣他們在開始遊戲之後,就會主動尋找玩家攻擊了。

點擊動作尾端的 ... 按鈕,有一個 複製 選項,可以更快速的設置相同類型的動作。

然後同時又使用 +武器道具 在玩家身旁放置了一把大刀,這樣才能讓玩家更好的抵禦對方的攻擊,而不會慘死在炮火之下。

上述的動作最主要是要新增 2 名以上的敵方角色,讓我們接下來要設置的檢查可以發揮到它的用途。

設置新的檢查事件

我們接下來要進行敵方角色的人數判斷,當對方人數剩餘 0,也就是都被玩家擊殺後,結束遊戲。

新的空事件

為了設置檢查,我們需要新增一個新的事件,接著與新增動作相同,都是點擊文字旁的 + 按鈕,透過路徑 光暈戰記/角色 找到檢查 計算人數

設置檢查計算人數

角色描述 中點擊 +角色比對,並將 操縱者 改成 電腦 AI,接著取消勾選 所有陣營,就會出現其他陣營,因為我設置的敵方角色為第三勢力,所以只要保留第三勢力即可,然後將下方的 比較方式 改成 ==,這樣這個檢查就會計算所有陣營為第三勢力的電腦 AI 數量,並且和下方的 比較值 以比較方式進行對比,由於比較值為 0,結果就是當敵人數量等於 0 時,會通過檢查判斷。

完整的 event_0002 事件

接著在動作 光暈戰記/任務流程 內,找到 任務完成,什麼都不用調整直接新增,最終就會如上圖所示,當計算人數檢查到所有敵人都消失時,就會執行任務完成的動作。

任務完成的遊戲畫面

就如同我在 Day 3 所說的,系統運行檢查的時間是無時無刻的,依照事件本身的設定去調整,預設是每 10 毫秒就檢查一次,並不是系統什麼事都不用做,等你消滅完所有敵人之後,他就突然通過檢查了,意思是相比起執行完就沒了的動作來說,檢查消耗的系統效能是最多的,雖然現在其實可以不用管它,但等到之後製作比較大型的作品時,這個方面就比較需要顧慮到了,之後也會找一天來針對檢查優化的部分來做分享。

程式內的判斷式

經過剛剛的介紹,可能有人會很疑惑,== 是什麼東西?表情符號嗎?不是,在電腦的世界中,當我們要對兩個數值進行比較時,若是要檢查兩邊是否相等,不能直接寫 =,因為在程式中 = 其實是指定的意思,由於我們到現在都沒寫過程式碼,所以可能有人沒有看過,我在這裡簡單示範一下。

let a: number = 0; // 讓 a 的型別為 number,並且賦值為 0。

if(a == 0) { // 如果 a 等於 0。
    console.log("cool!"); // 於控制台輸出 cool!
}

這是一個簡單的小程式碼,包含宣告變數、判斷式、控制台輸出,關於變數的部分我們之後也會專門找一天來好好講解一下,因為事件表中也有變數的功能,總之可以看到在程式中,= 已經被其他語法佔用了,萬一在檢查是否相等時也寫 =,就會造成語法衝突,電腦會分不出這個 = 的用途,所以前人們想出了一招,把 = 寫成兩個不就完事了嗎?所以直到現在,一般程式碼在判斷兩個值是否相等時,會寫成 == 而不是 =。

|意義|等於|不等於|小於|大於|小於等於|大於等於|且|或|
|-------------------------------------|
|符號|==|!=|<|>|<=|>=|&&||||

除了等於以外,還有其他比較方式,前六個在初中的數學課應該都有教過,只是符號可能長的不太一樣,== 剛剛已經介紹過了,而其他在數學中我們通常寫成 ≤、≥、≠,但是正常鍵盤上不會有這些符號,所以為了方便我們撰寫程式碼,大多程式碼都是直接寫成 <=、>=、!=。

接著就是最後面那兩個看起來很奇怪的符號了,&& 以及 ||,我們在事件表中其實不會看到這兩個符號,不過仍然有相對應的功能,但我們今天就先在這兒打住,明天再來好好介紹這個部分。

CG 範例事件表

總結

今天主要簡單示範了檢查最基本的使用,以及提到了一些數學的比較方式在程式中是如何表達的,其實除了大於小於相關的以外,其他的比較方式並不一定只能用於數字的判斷,不過我們在事件表中很難有機會碰到,所以這部分就暫且不談,另外我還有提到 && 和 ||,明天我就要來好好介紹這兩個符號,因為每一個檢查其實都有它們的存在,也是檢查最重要的功能之一。


上一篇
[Day 04] 事件表實作 - 動作篇
下一篇
[Day 06] 事件表實作 - 檢查篇(中)
系列文
什麼!在網頁上也可以寫遊戲?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

1
小哈片刻
iT邦研究生 4 級 ‧ 2023-09-20 03:29:21

有事件表的連結可以直接打開測試,很棒!

我要留言

立即登入留言