以踩地雷為靈感的接近度遊戲。
squoosh.app 團隊回來了!這次,我們建構了名為 PROXX 的網頁式遊戲 (proxx.app)。PROXX 是款以經典遊戲《踩地雷》為靈感的鄰近遊戲。遊戲在這個空間中,您的任務是找出黑洞的位置。這項功能適用於所有類型的裝置,從電腦到功能型手機皆可使用。使用者就算使用螢幕閱讀器,也能使用滑鼠、鍵盤、D-Pad 玩遊戲。
我們的基準
在建構這款遊戲之前,我們為應用程式設定了下列目標和預算:
- 相同的核心體驗:所有裝置都必須以相同方式運作
- 可存取:滑鼠、鍵盤、觸控、方向鍵、螢幕閱讀器
- 高效:
Web Workers
遊戲包含 4 個主要實體、核心遊戲邏輯、UI 服務、狀態服務及動畫圖形。由於我們一開始就知道必須在主執行緒上執行大量動畫圖形,因此將遊戲邏輯和狀態服務移至網路工作者,以便盡可能讓主執行緒保持空閒。
建構時間預先算繪
我們的 UI 是使用 Preact 建構,因為這可讓我們達成初始酬載量低於 25kb 的積極目標。為了提供良好的初始載入體驗,我們決定預先轉譯第一個檢視畫面。我們會在建構期間使用 Puppeteer 進行預先算繪,以便存取首頁,並讓 preact 填入 DOM。接著,產生的 DOM 會序列化為 HTML,並儲存為 index.html
動畫用的畫布、無障礙功能用的 (隱藏) DOM
我們會使用 WebGL 將遊戲圖形算繪為畫布。一個畫布負責背景動畫,另一個畫布則負責遊戲格線。我們也為了無障礙功能而使用了 HTML 表格,其中包含了兩個畫布頂端的按鈕,但會設為不可見 (不透明度:0)。雖然您看到的是遊戲狀態的畫布算繪,但玩家會與看不見的 DOM 表格互動,因此我們可以附加事件監聽器,並依賴瀏覽器的焦點管理。
將 DOM 元素保留在畫布中,即可運用瀏覽器內建的無障礙功能。舉例來說,只要在遊戲資料表中設定 role="grid"
,螢幕閱讀器就能朗讀焦點儲存格的列和欄,而不必實作。
可組合與程式碼分割的匯總功能
應用程式的總大小縮減至 100 KB (經過壓縮)。其中 20 KB 是初始酬載 (index.html)。我們會為這個專案使用 Rollup.js。我們在主執行緒和網路 worker 之間有共用依附元件,而 Rollup 可將這些共用依附元件放入只需載入一次的獨立區塊。其他捆綁程式 (例如 webpack) 會複製共用依附元件,導致重複載入。
支援功能型手機
KaiOS 手機等智慧型功能手機正迅速普及。這些裝置的資源非常有限,但我們會盡可能使用 Web Workers,讓這些手機也能提供高回應的體驗。由於功能型手機具有不同的輸入介面 (D-pad 和數字鍵,無觸控螢幕),因此我們也會實作按鍵式介面。
後續步驟
我們在 2019 年 Google I/O 期間,為了趕在活動前完成這款遊戲,因此忙得不可開交,但我們會休息一下,並計劃針對遊戲的各個部分,提供更深入的說明文件。
在此之前,請先觀看 I/O 大會中有關這項專案的演講內容。
您可以前往 proxx GitHub 存放區瀏覽程式碼。
祝一切順心!Surma、Jake、Mariko