以雷鬼動為靈感的鄰近遊戲。
squoosh.app 的開發團隊強勢回歸!這次我們建構了一個名為 PROXX (proxx.app) 的網頁式遊戲。PROXX 是一款鄰近遊戲,取材自傳奇遊戲 Minesweeper。遊戲是在太空中,您的任務是找出黑洞在哪。適用於各種裝置,從電腦到功能型手機應有盡有。使用者也可以使用滑鼠、鍵盤、D-Pad 玩遊戲,就算使用螢幕閱讀器也可以進行遊戲。
我們的基準
在建構這款遊戲之前,我們會為應用程式設定下列目標和預算:
- 相同的核心體驗:所有裝置都必須以相同方式運作
- 無障礙設計:滑鼠、鍵盤、觸控、D-pad、螢幕閱讀器
- 高效能:
- 初始酬載少於 25 KB
- 使用緩慢 3G 時,回應時間不到 5 秒 (互動時間)
- 一致的 60 fps 動畫
![搭載 PROXX 的 Pixelbook](https://web.dev/static/blog/proxx-announce/image/a-pixelbook-running-proxx-63ad94623caee.jpg?authuser=8&hl=zh-tw)
網路工作處理序
這個遊戲包含 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 和數字按鍵、無觸控螢幕),我們也實作了以金鑰為基礎的介面。
![一名男子在黃色的功能手機上玩 PROXX](https://web.dev/static/blog/proxx-announce/image/a-man-playing-proxx-a-ye-d3b61ad3a89e7.jpg?authuser=8&hl=zh-tw)
後續步驟
我們在 2019 年 Google I/O 大會上很忙,很忙。因此這樣才有充分的餘裕休息休息,但計劃之後會再回來為遊戲中的這些領域提供更詳盡的說明文件。
在此之前,請觀看 Mariko 在這個專案 I/O 大會發表的談話內容。
您可以瀏覽 Proxx GitHub 存放區中的程式碼。
乾杯!蘇瑪、傑克、馬里科