假設你正在玩一款角色扮演遊戲（RPG），主角走進了一家店鋪，你用鼠标點擊店鋪裡管家，這時屏幕顯示一個待售物品菜單，然後你可以選購你需要的物品。那麼，你知道從你點擊鼠标的那一刻起，遊戲是怎樣響應的嗎？讓我給你詳細介紹其中的邏輯。

　　首先，我們抽象出鼠标點擊事件的相關信息，重要的信息有三個，點擊時的x坐标、點擊時的y坐标，點擊事件是否處理，并把它們定義到一個對象中，代碼如下：

　　很明顯，為保持代碼封裝性，需要編寫兩個成員函數對事件對象進行讀寫，相關代碼如下：

　　其次，我們需要編寫響應鼠标點擊的事件代碼。為簡單起見，我讓占據屏幕最大尺寸的canvas響應鼠标點擊，如何将canvas與鼠标點擊事件關聯起來？看代碼：

　　addEventListener('click',function(){})表示将click事件與匿名函數function(){}綁定，也就是說每當鼠标點擊事件發生時，将調用g_oGameData.setMousePoint()函數，将鼠标點擊事件相關信息保存下來。

　　好了，我們已将鼠标點擊事件相關信息保存下來了，那麼我們何時處理呢？如何處理呢？為了讓遊戲反應靈敏，我們應盡可能快地響應鼠标點擊事件，一個好的方法是在遊戲循環中進行處理，我将處理代碼放在了drawScene()函數中，看代碼：

　　g_oUIManage.handleMessage()的作用是讓控件數組中的每一個控件成員依次相應鼠标點擊事件。這其中的機制有點複雜，讓我詳細給你講解一下。

　　我将控件按層進行管理，不同層的控件響應鼠标點擊事件的優先級不同，用zindex表示層級别，層級别值越高響應鼠标點擊事件的優先級越高，默認将遊戲主面闆的zindex設為1，它的事件響應優先級低，它裡面含有的子控件的zindex比它高，這樣每次捕獲鼠标點擊事件時都會先優先派發給它的子控件處理，如果它的子控件沒有處理再給它來處理。先讓我們看看與zindex相關的成員變量

　　再看看與這兩個成員變量相關的成員函數

　　目前，我們的數獨遊戲中隻有遊戲主面闆這個控件，用戶點擊遊戲主面闆中的數字面闆空白處時應彈出數字選擇面闆給用戶選擇填入的數字，為簡單起見，當用戶點擊數字面闆空白處時，我們在浏覽器控制台打印一條消息，下一節介紹控件時再詳細介紹數字選擇面闆的實現。

　　為實現這一功能，我們需要修改控件初始化參數數組g_aControlPara，代碼如下：

　　相應的init成員函數代碼也要更改

　　現在萬事俱備，是時候介紹handleMessage()成員函數的代碼了

　　很簡單，對控件數組中的每一個控件，依次調用每一個控件的消息處理函數handle()，下面讓我們看看控件類gxsUI有哪些改變。首先是代表控件所在層的zindex

　　最後是控件的handle()成員函數代碼

　　這個成員函數的功能很簡單，先判斷是否在控件内點擊，不是則返回讓其它控件處理；再判斷當前層能否響應點擊事件（防止在彈出窗口中點擊窗口下面的控件，即事件穿透），不能則返回讓其它zindex級别更高的控件響應；如果控件有回調函數，則執行回調函數。在浏覽器中打開index.html，運行結果如下：

　　最後将今天講的内容錄了視頻，文章中沒有講到的地方大家可以對照視頻一起看。

數獨遊戲開發——遊戲中的事件處理

　　未完待續，敬請關注！後續更精彩，謝謝大家！

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!