以踩地雷為靈感的接近度遊戲。
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