iT邦幫忙

2023 iThome 鐵人賽

DAY 8
1
Modern Web

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

[Day 08] 事件表實作 - 觸發篇

  • 分享至 

  • xImage
  •  

昨天我們介紹了迴圈型檢查,關於檢查的介紹暫時算是告一段落了,今天我們要來介紹事件中的第三個部分——觸發。

關於觸發

首先同樣的在開始介紹之前,有一個觀念要補充一下,在事件表中,觸發有兩種意思,一個是動詞,一個是名詞,舉例來說「我們來觸發事件 A」,這個是動詞的觸發,可以理解成要嘗試執行事件,當事件被觸發時,才會進入檢查階段,通過後便會執行動作;另一個例子為「幫事件 B 設置一個觸發」,這個是名詞的觸發,代表的是事件表中可以被我們所設置的觸發,例如 滑鼠點擊按下按鈕 等,這時候的觸發代表的是它們的統稱。

沒有設定觸發的事件種類有兩種:

  • 自動觸發事件:在事件表開始執行的時候就會自動觸發,除非有設定起始時間,而如果該事件為重複事件,就會根據事件的檢查間隔來重複觸發自己。
  • 參考事件:事件本身並不會自動觸發,而是要通過其他事件,利用動作或檢查來觸發該事件,該事件會處於被動觸發的狀態。

從這樣看下來,我們前幾天設置的事件都是哪一種呢?答案是自動觸發事件,它們都會在事件表開始執行時被自動觸發。

而參考事件的設置也很簡單,只有觸發除了有新增觸發的按鈕以外,還多了一個選項可以設定該事件是自動觸發還是被動觸發,只要將其設定成不會自動觸發即可,至於為什麼需要這種事件呢?我們來看個例子。

否則觸發事件

首先就是我前天在檢查篇中提到的,關於檢查中的否則觸發事件,我們這幾天所提到的檢查,幾乎都是「如果...通過,就...」,但其實還有一個概念沒有提到,就是「否則」,「如果...通過,就...,否則...」簡單的說就是一個檢查,可以導出兩種結果,舉一個最簡單的例子「如果考試分數 >= 60,就及格,否則為不及格。」怎麼樣,這個例子應該每個人都可以理解吧?

所以否則觸發事件的用途,就是當某個檢查沒有被通過的時候,就去觸發另外一個事件。

我們今天就來實作剛剛提到的例子,並且今天要讓使用者可以自行輸入分數,然後在視窗上顯示最後的結果,畢竟昨天都剛好介紹到變數了,趁現在還熟悉的時候趕快多用幾次,而且剛好會需要用到我們今天的重點——觸發

第一步:讓使用者輸入分數

動作-彈出字串輸入視窗

首先我們需要新增一個事件,並在動作目錄 彈出視窗,新增動作 彈出字串輸入視窗,這個動作的用途是顯示一個可以讓使用者輸入字串的視窗,接著要在 彈出視窗的ID 欄位上填入視窗的 ID,這樣我們之後才可以讀取到這個視窗的資料,我這次是輸入 dialog_1 當作 ID,然後我們可以在標題中輸入一些要讓使用者知道的提示「請輸入一個 0 ~ 100 的整數」,好了之後其他欄位都不用管,直接儲存動作,這樣當事件表執行時就會跳出一個視窗了。

第二步:讀取分數並檢查

檢查-視窗確認

接著再新增一個事件,這次我們要來新增觸發了,在觸發目錄中 彈出視窗,找到 視窗確認 這個觸發,於視窗 ID 欄位選擇剛剛定義的 dialog_1,並且在 事件區域變數: 回傳字串 中定義一個變數名稱,這個變數裡面儲存的會是使用者在視窗中輸入的字串,因為我是讓使用者輸入分數的意思,所以我取名為 score

還記得觸發的用途嗎?就是用來 負責接收某個指令、消息 用的,當觸發接收到某個指令時,就會觸發事件,而使用者於視窗中按下確認按鈕,正好可以發送一個消息給事件表,方便我們執行接下來的動作,所以才有了觸發的存在。

所以當使用者輸入字串,按下確認時,就會觸發事件,並將輸入內容儲存在 score 這個變數當中,所以接下來我們就是要來檢查 score,有沒有及格。

在同樣的事件中新增檢查 比較數字,並填入 {score} >= 60,也就是代表及格的意思。

第三步:若檢查分數及格時

我們在動作中新增一個 彈出確認視窗,與剛剛的動作不同,這個視窗不會有可以輸入字串的欄位,就只是用來顯示訊息用的而已,這次我們把視窗 ID 取為 dialog_2,並在 訊息內容 中,填入如上圖的訊息,主要是用來顯示使用者輸入的內容,以及顯示及格。

第四步:否則

接著我們要來新增第三個事件,並且改變其觸發規則,於觸發中點擊 這個事件會自動觸發並執行動作。,開啟選單後選擇 這個事件*不會*自動觸發。,更改後就會呈現如上圖,這個時候該事件就不會在事件表開始執行後被自動觸發了,接著複製事件二中的動作,將其拖曳到此事件中,並且把訊息內容的及格改為不及格即可。

然後回到事件二的檢查中,於下方的 否則觸發事件ID 選擇 event_0003,最終該檢查就會呈現如上圖的樣子。

全都設定好了之後,我們就可以來測試事件表了,進入之後馬上就會跳出如上圖的視窗,也就是我們在事件一中設定的動作,首先輸入 80 看看。

哦,顯示了如上圖的結果,非常好,我們再重新測試一次,這次我們輸入 59,一個非常殘念的分數。

結果當然就是不及格拉,輸入 59 以上的數字,就會通過檢查而執行該事件內的動作,輸入 60 以下的數字,則會因為沒通過檢查而去執行另外一個事件。

重複執行

老實說每次輸入之前都要重新測試好像有點麻煩,所以我們來把它變成可以一直測試吧!

新增第四個事件,不同的是,這次我們要把事件的 重覆次數 設定成 -1,也就是可以無限次觸發的意思,然後新增一個觸發——視窗確認,不過視窗的 ID 要選 dialog_2,也就是會跳出結果的視窗。

接著我們要來新增一個新動作 觸發事件,在動作目錄 系統 中,它的用途很簡單,就是可以讓我們手動觸發一個指定的事件,在 欲觸發的事件代碼 選擇,知道我們要選哪一個事件嗎?答案是 event_0001,這樣子當我們每次確認完結果之後,系統就會跑去執行 彈出字串輸入視窗,讓我們可以繼續輸入字串啦~

還沒完,因為我們的事件二還不會重複觸發,所以我們需要編輯 event_0002,同樣的將該事件的重覆次數改為 -1。

最後就可以再測試一次事件表了,這次就可以不停的進行測試啦,只要你不要點到取消視窗,或是關閉視窗就好了。

CG 範例事件表

總結

今天的介紹了觸發、否則觸發、參考事件,以及動作中的觸發事件,很剛好的這次的例子完美的結合了這四個部分,其實參考事件的用途並不僅僅是用於否則觸發事件,還很適合當我們需要把某個流程給函數化,方便我們隨時隨地都可以重複執行時使用,至於什麼是函數呢,未來有機會再跟各位介紹吧!


上一篇
[Day 07] 事件表實作 - 檢查篇(下)
下一篇
[Day 09] 變數的型別與作用範圍
系列文
什麼!在網頁上也可以寫遊戲?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言