芭樂可頌大對決

玩法說明

Max 和 Una 隔著一道牆，輪流把東西丟向對方：Max 丟芭樂，Una（抱著小白狗的那位）丟可頌。先把對手的 100 點血量打到零的一方獲勝。

開始畫面

怎麼丟

• 手機／滑鼠：按住畫面，往想丟的方向拖。手指在角色的哪個方向，就往那個角度丟；手指離角色越遠，力道越大。放開就丟出去，拖得太近會取消。
• 拖曳時角色旁邊會出現：
• 量角器：弧線上的黃點代表目前角度
• 直式力道條：越滿越大力，接近滿格會變紅
• 一小段軌跡預覽：只畫前一小段而且不含風，後半段要靠自己判斷
• 鍵盤：↑ ↓ 調整角度，按住空白鍵蓄力（力道條會來回跑），放開時的力道就是出手力道。
• 第一次輪到你的時候，畫面上會有操作提示，丟過一次之後就會消失。

風向

畫面上方中間是風向：五格代表風力，箭頭代表風往哪邊吹，4 級以上會變紅色。每一回合都會重新決定風向，雲也會跟著風飄，丟之前記得看一下。

傷害

• 直接砸中對手：30 點傷害。
• 落在對手附近：依距離造成較少的傷害。
• 丟太近的話，自己也會被波及。
• 砸到中間的牆就沒了。

道具

畫面最下面那一條是道具列，左邊四個是 Max 的、右邊四個是 Una 的，輪到誰，誰的按鈕就會亮起來。每個道具一場只能用一次，在丟出去之前點一下就會裝備，角色頭上會出現道具的名字，畫面上方也會說明效果；再點一次可以取消。用過的道具會變暗並畫上刪除線。

全螢幕

遊戲下方的「全螢幕」按鈕可以讓遊戲鋪滿整個螢幕，再按一次或點右上角的 ✕ 就能退出（電腦也可以按 Esc）。手機建議轉成橫的玩，畫面會大很多；Android 手機進入全螢幕時會自動轉成橫向。

開發筆記

靈感

這款的靈感來自很多人小時候玩過的 Flash 隔牆投擲對戰：兩邊各站一個角色，中間一道牆，輪流算風向、抓力道丟東西。規則很單純，但「差一點就中」的感覺很讓人上癮，很適合做成網頁小遊戲。

兩位主角是我依照兩張 Q 版人物圖，自己用 16 × 21 的像素重新畫的：Max 是刺蝟頭、穿深藍背心和綠短褲的男生；Una 是黑長髮、戴金框眼鏡、穿可頌圖案襯衫，手上抱著一隻小白狗的女生。Una 丟可頌，就是從她襯衫上的圖案來的。

物理：重力加上風

投擲物每一幀只做四件事：

p.vx += wind * WIND_K * dt; // 風只影響水平速度
p.vy += GRAV * dt;          // 重力只影響垂直速度
p.x += p.vx * dt;
p.y += p.vy * dt;

風就是一個固定的水平加速度。逆風丟要多給力道或拉高角度，順風則要收一點。為了不讓高速的投擲物「穿過」牆或角色，每一幀會拆成兩個小步驟來檢查碰撞。

瞄準：從「拉彈弓」改成「指哪丟哪」

第一版用的是拉彈弓：按下去往反方向拉，放開才丟。實際給人玩之後，得到的回饋是「完全不知道怎麼控制力氣和角度」。問題有兩個：一是方向跟直覺相反；二是起點可以在畫面任何地方，畫面上看不出拉了多少。

第二版改成以角色為中心：手指在角色的哪個方向，就往那邊丟；手指離角色越遠，力道越大。

const dx = (p.x - hx) * facing(me);  // 右邊的 Una 面向左，水平方向乘 -1
const dy = hy - p.y;
aim.power = Math.min(1, (Math.hypot(dx, dy) - 8) / 80);
aim.angle = Math.atan2(dy, dx) * 180 / Math.PI;

另外補了三個視覺回饋：量角器、角色旁邊的直式力道條，以及前 0.35 秒的軌跡預覽。預覽刻意只畫一小段而且不算風，保留這類遊戲「靠手感抓距離」的樂趣。

電腦怎麼瞄準

電腦用的物理函式跟遊戲完全一樣。輪到它的時候，會把角度 20°～80°、力道 30%～100% 的組合全部「在腦中」模擬一次（大約兩千多組），找出落點最接近對手的那一組。

但如果直接照答案丟，它會百發百中，一點都不好玩。所以我在角度和力道上加了隨機誤差，而且誤差會隨著丟的次數慢慢縮小，就像真人在修正手感：前幾顆常常打偏，越打越準。電腦也會用道具，例如血量低時補血、風很大時開無風、對手快沒血時用巨大化收尾。

數值調整

一開始讓「砸中身體」也依照離身體中心的距離算傷害，結果砸到頭頂只扣十幾點，電腦對電腦要打四十幾回合才分出勝負。後來改成直接命中拿滿傷害，再寫一個電腦對電腦的模擬程式跑了二十場，一場平均大約十回合結束，節奏剛好。

手機版優化

實際拿手機玩之後，調整了幾個地方：

• 道具按鈕放大並移到地面：原本道具是擠在最上面的小方塊，手指很難點，也看不出是做什麼的。現在改成地面上一整排有文字的按鈕（雙投、巨大、無風、補血），點下去會在上方顯示效果說明。第一次輪到你的時候，教學提示也會用綠色箭頭指向道具列。
• 全螢幕：有支援 Fullscreen API 的瀏覽器就用真的全螢幕；iPhone 的 Safari 不支援，就改成用 CSS 把遊戲框 position: fixed 鋪滿畫面，看起來一樣，只是網址列可能還在。橫向時左右會各留一點黑邊放 ✕ 按鈕，才不會擋到血量條。
• 畫面比例：之前所有遊戲都共用 6:5 的畫面比例，這款 16:9 的遊戲在網頁上會被壓扁。現在改成由遊戲引擎依照每款遊戲的實際寬高自動設定。
• 電腦思考不卡頓：電腦原本一次模擬兩千多組角度和力道，在比較慢的手機上會卡一下。改成先粗略掃一遍，再在最好的答案附近細找，運算量只剩大約四分之一，準度幾乎一樣。

如果你覺得電腦太強或太弱，歡迎留言告訴我。