PROXX 簡介

以雷鬼動為靈感的鄰近遊戲。

Mariko Kosaka

squoosh.app 的開發團隊強勢回歸!這次我們建構了一個名為 PROXX (proxx.app) 的網頁式遊戲。PROXX 是一款鄰近遊戲,取材自傳奇遊戲 Minesweeper。遊戲是在太空中,您的任務是找出黑洞在哪。適用於各種裝置,從電腦到功能型手機應有盡有。使用者也可以使用滑鼠、鍵盤、D-Pad 玩遊戲,就算使用螢幕閱讀器也可以進行遊戲。

功能型手機適用的 PROXX 系統。

我們的基準

在建構這款遊戲之前,我們會為應用程式設定下列目標和預算:

  • 相同的核心體驗:所有裝置都必須以相同方式運作
  • 無障礙設計:滑鼠、鍵盤、觸控、D-pad、螢幕閱讀器
  • 高效能
    • 初始酬載少於 25 KB
    • 使用緩慢 3G 時,回應時間不到 5 秒 (互動時間)
    • 一致的 60 fps 動畫
搭載 PROXX 的 Pixelbook
Pixelbook 上的 PROXX。

網路工作處理序

這個遊戲包含 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
在功能型手機上使用 PROXX。

後續步驟

我們在 2019 年 Google I/O 大會上很忙,很忙。因此這樣才有充分的餘裕休息休息,但計劃之後會再回來為遊戲中的這些領域提供更詳盡的說明文件。

在此之前,請觀看 Mariko 在這個專案 I/O 大會發表的談話內容。

您可以瀏覽 Proxx GitHub 存放區中的程式碼。

乾杯!蘇瑪、傑克、馬里科