小遊戲開發 Mario (3)

摘要： 在開始新的內容之前，我們先優化一下上一次程式碼。我們看圖中的程式碼 圖1 發現（1）載入圖片和（2）載入關卡（level）是有一定先後順序的，先載入圖片，再載入關卡，在完成關卡載入後，才將圖片顯示在瀏覽器中，這是我們不希望的。 為了更好理解，...

在開始新的內容之前，我們先優化一下上一次程式碼。我們看圖中的程式碼

發現（1）載入圖片和（2）載入關卡（level）是有一定先後順序的，先載入圖片，再載入關卡，在完成關卡載入後，才將圖片顯示在瀏覽器中，這是我們不希望的。

為了更好理解，我們分別在這兩個載入處新增輸出語句。

我們看一看在 chrome 瀏覽器中 console 輸出

由於載入的速度很快，可能不容易看出先後效果來，那麼我們可以新增一些延時函式來延遲載入時間，以便清楚第看出效果來。

如上圖我們分別給載入圖片和載入level新增延時方法。

如果您親手試一試，就會發現 3 秒 完成圖片載入後，再等 3 秒載入完 level 後才能看到圖片顯示在瀏覽器中。實際上載入圖片和載入關卡不應該有先後順序，應該是並行載入圖片和關卡。

那麼我新建一個載入背景sprite方法，然後將loadImage 放入方法中作為 promise 返回

我們可以用 es6 提供的 Promise 的 all方法實現“載入圖片”和“載入關卡”並行。

調整好程式碼，在此啟動後會發現在 3 秒後畫面就出現在瀏覽器上。

好的。我們繼續向下進行，現在來新增 mario 到我們螢幕上。

準備一張圖片，我們先將這個 mario （藍圈中）渲染到螢幕上，暫時還不考慮動畫。

將剛剛建立的 loadBackgroundSprites 方法複製一份，將函式名修改為 loadMarioSprites 用於載入 mario 圖片。修改內容如下圖。

然後將 mario 的 sprite 渲染到螢幕上

哇，mario 已經顯示到螢幕上，

不過 mario 好像還不完整，我們嘗試調整方法 define 的 x, y

但是還是無法精確顯示出 mario 來，因為不是每個圖片都是符合我們預想的規範（width 和 height 倍數）。我們需要調整 define 方法（用於定於圖塊位置的方法）我們新增兩個引數 width height ，修改函式的程式碼。這樣我們便可精確的確定出圖塊的位置。

但是 ground 和 sky define 就會報錯，因為他們僅給出三個引數（name,x,y)

為了相容，我們為 spriteSheet 新增 defineTile 方法（介面卡模式）

我們看調整後結果，sky 和 ground 並沒有變化。那麼現在我們來處理 mario。

最後我們還需再次調整一下程式碼將 loadMarioSprites 和 loadBackgroundSprites 分離到檔案 sprites.js 中。讓程式碼看起來更優雅。