以踩地雷為靈感的接近度遊戲。
squoosh.app 團隊回來了！這次，我們建構了名為 PROXX 的網頁式遊戲 (proxx.app)。PROXX 是款以經典遊戲《踩地雷》為靈感的鄰近遊戲。遊戲會在太空中進行，您的工作就是找出黑洞的位置。這項功能適用於所有類型的裝置，從電腦到功能型手機皆可使用。使用者可以使用滑鼠、鍵盤、方向鍵盤，甚至是螢幕閱讀器來玩遊戲。
我們的基準
在建構這款遊戲之前，我們為應用程式設定了下列目標和預算：
- 相同的核心體驗：所有裝置都必須以相同方式運作
- 可存取：滑鼠、鍵盤、觸控、方向鍵、螢幕閱讀器
- 高效：
- 初始酬載小於 25kb
- 在速度緩慢的 3G 網路上，TTI (互動準備時間) 低於 5 秒
- 維持 60 fps 的動畫
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。我們在主執行緒和網路工作者之間有共用依附元件，而 Rollup 可將這些共用依附元件放入只需載入一次的獨立區塊。其他捆綁程式 (例如 webpack) 會複製共用依附元件，導致重複載入。
支援功能型手機
KaiOS 手機等智慧型功能手機正迅速普及。這些裝置的資源非常有限，但我們會盡可能使用網頁工作者，讓這些手機也能提供高回應性的體驗。由於功能型手機採用不同的輸入介面 (方向鍵和數字鍵，沒有觸控螢幕)，我們也實作了以按鍵為基礎的介面。
後續步驟
我們在 2019 年 Google I/O 期間，以緊湊的時間完成了這個遊戲，因此將休息一下，但我們會回歸，為遊戲的各個部分提供更深入的說明文件。
在此之前，請先看看 Mariko 在 I/O 大會上針對這項專案發表的演講。
您可以前往 proxx GitHub 存放區瀏覽程式碼。
祝一切順心！Surma、Jake、Mariko