芭樂接接樂

玩法說明

芭樂樹上的果實會不斷掉下來，移動籃子把它們接住：

• 一開始有 3 顆愛心，用完就結束。
• 連續接到 10 顆會觸發 COMBO，額外加 3 分。
• 分數越高，掉落速度越快、蟲也越多。
• 最高分會記錄在你的瀏覽器裡。

開發筆記

為什麼選這個題材

網站叫 GUAVAMAX，第一款遊戲當然要跟芭樂有關。「接東西」是最經典的街機玩法之一，規則一看就懂、一隻手指就能玩，很適合當遊戲廳的第一台機台。

解析度與像素感

畫面內部解析度只有 192 × 160 像素，大約是掌上型遊戲機的尺寸，再用 CSS 放大到螢幕寬度。重點是這一行：

image-rendering: pixelated;

它告訴瀏覽器放大時不要做平滑處理，每個像素才會維持方正、銳利，不會糊成一片。繪圖時也一律把座標四捨五入成整數，避免半個像素造成的模糊。

用文字畫像素圖

所有角色都沒有用圖片檔，而是用字串陣列直接畫出來，例如芭樂是這樣：

const guava = PX.sprite([
  "...GG...",
  "..KKKK..",
  ".KDDDDK.",
  "KDPPPPDK",
  "KDPSPPDK",
  "KDPPSPDK",
  ".KDDDDK.",
  "..KKKK..",
], { G: C.lime, K: C.ink, D: C.green, P: C.pink, S: C.plum });

每個字母代表一種顏色，. 是透明。程式會先把它畫到一張離屏的小畫布上，之後每一幀直接貼上，效能很好。好處是改造型只要改文字，不用開繪圖軟體；配色採用 PICO-8 的 16 色色票，和網站整體風格一致。

固定時間步長的遊戲迴圈

不同電腦的畫面更新率不一樣，有的 60Hz、有的 120Hz。如果每畫一次就移動一次，在高更新率螢幕上遊戲會變兩倍快。

所以引擎採用固定時間步長：累積真實經過的時間，每滿 1/60 秒才更新一次遊戲邏輯，畫面則照螢幕的速度繪製。這樣不管什麼裝置，遊戲速度都一樣。切換到其他分頁時，遊戲也會自動暫停。

難度曲線

難度全部跟著分數走，用很單純的公式控制：

• 掉落速度：基本速度加上「分數 × 1.3」，上限每秒 150 像素。
• 掉落間隔：從約 1 秒開始，隨分數縮短到最短 0.32 秒，並加上隨機變化，避免節奏太規律。
• 蟲的比例：從 20% 慢慢提高到 38%。

一開始很輕鬆，大約 30 分之後開始需要專心，50 分以上就很考驗反應了。

手機操作

手機上沒有方向鍵，所以加入了拖曳控制：手指按住畫面時，籃子會朝手指的位置移動，但有速度上限，避免一點就瞬間移動、讓遊戲失去挑戰性。畫布設定了 touch-action: none，拖曳時頁面才不會跟著捲動。

音效

音效同樣沒有用音檔，而是用瀏覽器內建的 Web Audio API 即時產生方波，就是紅白機時代那種「嗶嗶」聲。接到芭樂時，連擊數越高，音調會越來越高，讓連擊更有感覺。

下一步

之後可能會加入的東西：

• 不同季節的關卡與背景
• 會左右飄的特殊果實
• 線上排行榜

有想法歡迎到關於頁告訴我。