上兩周主要給大家介紹了游戲中是如何檢測游戲角色和游戲角色和障礙物間的碰撞。今天回到 mario 繼續(xù)寫我們 super mario 這款游戲。

在開始新的內(nèi)容之前，我們需要整理一下前面的代碼。我們看圖中的 loadBackgroundSprites 和下面定義的 comp 對象都是應(yīng)該屬于 level（關(guān)卡），因?yàn)樗麄兌紩P(guān)卡息息相關(guān)。關(guān)卡包含背景圖的組合(這里所謂組合將許多層組合為背景展示給用戶)

創(chuàng)建 Level 類，Level 中我們將 compositor（圖層組合）游戲角色集合 entities。

介紹一下 ES6提供了Set 數(shù)據(jù)結(jié)構(gòu)。類似于數(shù)組，但是沒有重復(fù)值。下面代碼可以幫助大家理解 Set 數(shù)據(jù)結(jié)構(gòu)。

回到主（main.js）函數(shù)，由于 comp 已經(jīng)成為 Level 一個(gè)屬性，我們就可以刪除此行代碼。

我們將與 Level 有關(guān)的代碼移到 Level 類中來整合代碼，已經(jīng)類的概念，也就是面向?qū)ο缶幊痰慕K極目標(biāo)就是復(fù)用代碼

在 loader.js 我們對 loadLevel 進(jìn)行改動(dòng)，改動(dòng)力度很大，稍一說明。在讀取 json 和加載背景 sprite。兩個(gè)加載完成后，我們需要?jiǎng)?chuàng)建 Level 實(shí)例，這個(gè)實(shí)例提供 comp 和 entities 。我們現(xiàn)在就把 compositor 封裝到 Level 類中了。然后把 Mario 看作 Level 的 entities 集合中的一個(gè)。

切換到 layer.js 文件中，進(jìn)行一些調(diào)整，這里內(nèi)容顯然易見，就不做過多解釋了。

修改main.js 中代碼，如下圖。

現(xiàn)在一切和調(diào)整代碼之前一樣，除了沒有看到主角 mario，我們要看到 mario 就還需要一些工作，就是將 mario 添加到 entities 中。

我們把 mario 的 update 方法也移到 Level 這類中，這樣看起來就更合理，因?yàn)樗薪巧亩荚?entities 這個(gè)集合中，所以可以 level 的 update 方法代替 mario（做一個(gè) entity）他自己方法。然后在 level 的 update 方法中，我們遍歷 entities 然后調(diào)用每一個(gè) entity 的 update 方法。