AlpaKit Logo AlpaKit

網頁物理粒子與重力沙盒

在 Canvas 畫布中模擬 2D 物理粒子,支援重力、彈力、摩擦力、重力感應與滑鼠吸引。吉祥物 Alpa 會化身為物理粒子,跟著碰撞、彈跳並給出趣味表情!

⚙️ 沙盒物理參數設定

重力大小 (Gravity) 0.50
彈力係數 (Bounce) 0.75

📊 物理即時狀態統計

渲染影格率 (FPS) 60.0
當前粒子總數 1
Alpa 移動速度 0.0 px/s

💡 物理重力沙盒探索指南

您可以在畫布中任意生成發光的霓虹粒子。大號的「Alpa 吉祥物粒子」擁有完整的重力與彈性物理反彈。您可以用滑鼠點擊拖曳牠並拋向空中,牠會根據碰撞強度、速度與重力模式即時改變表情與氣泡說話,非常療癒!

使用方式

  1. 1 開啟網頁物理粒子與重力沙盒,輸入、貼上或選擇要處理的內容。
  2. 2 依需求調整頁面上的選項與格式。
  3. 3 確認即時結果,再複製或下載可用的輸出。

適合的使用情境

在 Canvas 畫布中模擬 2D 物理粒子,支援重力、彈力、摩擦力、重力感應與滑鼠吸引。吉祥物 Alpa 會化身為物理粒子,跟著碰撞、彈跳並給出趣味表情!適合日常工作、開發、學習或快速驗證時使用。

隱私與資料處理

工具在瀏覽器中運作;處理敏感資料前,仍請確認瀏覽器與裝置環境可信。

網頁物理沙盒:在瀏覽器裡玩重力、彈力與黑洞粒子

這是一個在瀏覽器裡執行的 2D 物理沙盒,用 Canvas 即時模擬發光的霓虹粒子與一顆大大的 Alpa 吉祥物粒子。你可以調整重力和彈力、切換不同的重力模式,或直接抓起 Alpa 甩出去,看它在牆壁之間彈跳、撞開周圍的粒子。它很適合拿來紓壓放空,也能當作理解重力加速度、恢復係數和簡單碰撞反應的互動教材,不需要安裝任何程式。

「重力大小」可以從 0 調到 1.5,「彈力係數」可以從 0.1 調到 1.0,數值越高,撞牆後保留的速度越多;不過模擬中也有輕微的空氣阻力,所以即使彈力設成 1.0,物體最後仍會慢慢停下來。按「發射粒子 (+20)」會在畫面上方一次加入 20 顆粒子,畫面上最多保留 400 顆,超過時會移除最早出現的粒子;「清空粒子」則會一次清除全部。用滑鼠或手指按住 Alpa 拖曳再放開,就能把牠拋出去。

重力模式有四種。「標準向下重力」就像地球上的重力;「無重力飄浮」會關掉重力,這時按住滑鼠,游標附近約 300 像素內的粒子會被吸過去;「羊駝中心黑洞」會把 Alpa 拉向畫面中央,同時讓所有粒子被吸向 Alpa,吸力大小跟著重力滑桿變化,滑桿調到 0 就不會有吸力;「行動裝置陀螺儀感應」則讓重力方向跟著手機傾斜的方向改變,iPhone 會先跳出授權提示。

為了在手機上也能流暢執行,小粒子只會和 Alpa 及畫面邊緣碰撞,粒子彼此之間不會互相碰撞。物理計算固定以每秒 60 步進行,螢幕更新率不同也不會讓速度忽快忽慢;右側會顯示即時的影格率、粒子數量與 Alpa 的移動速度。Alpa 被用力撞到牆時會換表情、發出短促的音效並噴出幾顆火花,粒子後方的光暈拖尾則是畫在畫布上的視覺效果。整個模擬都在本機執行,不會收集任何資料。

常見問題

為什麼粒子之間不會互相碰撞?

為了讓數百顆粒子在手機上也能流暢運作,沙盒只計算粒子與 Alpa、粒子與畫面邊緣之間的碰撞。如果每顆粒子都要互相檢查,計算量會隨粒子數量的平方增加,畫面很容易卡頓,所以粒子之間會直接穿過彼此。

陀螺儀模式沒有反應怎麼辦?

這個模式需要有方向感測器的手機或平板,一般桌上型電腦和筆電沒有這種感測器。iPhone 和 iPad 在切換到這個模式時會跳出「動作與方向」的授權提示,必須按允許才能使用;如果先前拒絕過,請重新整理頁面後再試一次。另外也要確認重力滑桿不是 0。

黑洞模式為什麼沒有把粒子吸過去?

黑洞的吸力會乘上「重力大小」滑桿的數值,滑桿設為 0 時就完全沒有吸力。把滑桿往右調,Alpa 會被拉向畫面中央,粒子也會被吸向 Alpa,數值越大,吸力越強。

彈力設成 1.0,物體會永遠彈跳下去嗎?

不會。彈力 1.0 代表撞到牆時不損失速度,但沙盒中還有微弱的空氣阻力,每一步都會讓速度稍微變慢,所以物體最後還是會逐漸停下來。想看到更久的彈跳,可以把重力調低一點。

瀏覽此分類: 設計與色彩

推薦與常用工具
    ↑ ↓ 移動選擇 ↵ 開啟工具 ESC 關閉
    咩~
    Alpa Idle Alpa Walk 1 Alpa Walk 2 Alpa Walk 3 Alpa Walk 4 Alpa Dizzy Alpa Sleep