以雷鬼動為靈感的鄰近遊戲。
squoosh.app 的開發團隊強勢回歸！這次我們建構了一個名為 PROXX (proxx.app) 的網頁式遊戲。PROXX 是一款鄰近遊戲，取材自傳奇遊戲 Minesweeper。遊戲是在太空中，您的任務是找出黑洞在哪。適用於各種裝置，從電腦到功能型手機應有盡有。使用者也可以使用滑鼠、鍵盤、D-Pad 玩遊戲，就算使用螢幕閱讀器也可以進行遊戲。
我們的基準
在建構這款遊戲之前，我們會為應用程式設定下列目標和預算：
- 相同的核心體驗：所有裝置都必須以相同方式運作
- 無障礙設計：滑鼠、鍵盤、觸控、D-pad、螢幕閱讀器
- 高效能：
- 初始酬載少於 25 KB
- 使用緩慢 3G 時，回應時間不到 5 秒 (互動時間)
- 一致的 60 fps 動畫
網路工作處理序
這個遊戲包含 4 個主要實體、核心遊戲邏輯、UI 服務、狀態服務和動畫圖形。從 get-go 開始，我們必須在主執行緒上執行高度動畫的圖像，因此將遊戲邏輯和狀態服務移至網路工作站，盡可能讓主要執行緒保持釋放。
建構時間預先轉譯
我們的 UI 使用預先傳送，可讓我們針對小於 25 KB 的初始酬載達到積極的目標。為提供良好的初始載入體驗，我們決定預先算繪第 1 個檢視畫面。我們會在建構期間使用 Puppeteer 進行預先算繪，存取頂部頁面，並讓系統預先填入 DOM。接著，產生的 DOM 會序列化為 HTML 並儲存為 index.html
動畫畫布、(隱藏) DOM (無障礙)
我們會使用 WebGL 在畫布上算繪遊戲圖像。其中一個畫布負責背景動畫，並在上方為遊戲格線負責另一個畫布。我們也提供 HTML 表格，其中列出無障礙功能的按鈕，位於這兩個畫布上方，但改為隱藏 (透明度：0)。雖然您看到的是畫布呈現遊戲狀態的畫布，但玩家會與隱藏的 DOM 資料表互動，讓我們能夠附加事件監聽器，並仰賴瀏覽器的焦點管理。
只要將 DOM 元素保留在畫布中，我們就能運用瀏覽器內建的無障礙功能。舉例來說，在遊戲表格中設定 role="grid" 後，螢幕閱讀器就能朗讀焦點儲存格的列和欄，而不必實作該儲存格。
匯總，以匯總及程式碼分割
應用程式的總大小縮減至 100KB 壓縮。其中 20KB 屬於初始酬載 (index.html)。我們針對這項專案使用 Rollup.js。我們在主執行緒和網路工作站之間建立了共用依附元件，而 Rollup 可將這些共用依附元件放在單獨的區塊中，且只需載入一次。Webpack 等其他套件器會複製共用依附元件，導致重複載入。
支援功能型手機
像 KaiOS 手機這類智慧型功能型手機正逐漸受到歡迎。這類裝置資源有限，但我們採用網路工作站的做法，能讓我們在這類手機上提供高度回應體驗。由於功能型手機配備不同的輸入介面 (D-Pad 和數字按鍵、無觸控螢幕)，我們也實作了以金鑰為基礎的介面。
後續步驟
我們在 2019 年 Google I/O 大會上很忙，很忙。因此這樣才有充分的餘裕休息休息，但計劃之後會再回來為遊戲中的這些領域提供更詳盡的說明文件。
在此之前，請先看看 Mariko 在這個專案 I/O 大會發表的談話內容。
您可以瀏覽 Proxx GitHub 存放區中的程式碼。
乾杯！蘇瑪、傑克、馬里科