# 撞球教學模擬器 — Vibe Coding 提示詞與紀錄

> 來源：`data/撞球教學模擬器-提示詞.md`  
> 本站展示頁：`/showcase/billiard-simulator`

## 我的第一支 Vibe Coding

使用 Gemini 3.0，請 AI 寫提示詞：

> 「請教我產生一個『撞球教學網頁』的提示詞，要有擊球、進球的角度示範」

## 推薦的提示詞（Prompt）

可複製以下文字給 AI：

```
角色設定：你是一位精通 HTML5 Canvas、Physics Engine（物理引擎）與幾何學的前端工程師。

任務：請寫一個單一檔案的 HTML/JS 網頁應用程式（Single File Web App），主題是「撞球進球角度教學模擬器」。

核心功能與需求：

視覺呈現：

繪製一個俯視視角的綠色撞球桌，包含 6 個球袋。

包含一顆母球（白色）和一顆子球（彩色）。

球體需要有簡單的光影渲染，看起來立體一點。

互動操作：

滑鼠移動控制球桿方向（瞄準）。

滑鼠點擊進行擊球（蓄力或直接擊發皆可）。

提供按鈕：「重置球位」、「隨機球位」。

教學輔助線（這是最重要的）：

假想球（Ghost Ball）：當瞄準線對準子球時，顯示子球進袋前，母球應該撞擊的理想位置（用半透明虛線圓圈表示）。

進球路線：顯示子球被撞擊後的預測路徑。

分離角（Tangent Line）：顯示撞擊後，母球會往哪個方向彈開（90度分離角原理）。

物理模擬：

實現基礎的 2D 碰撞物理（動量守恆）。

模擬摩擦力，讓球會慢慢停下來。

邊緣反彈。

技術限制：使用 Tailwind CSS 進行 UI 排版，所有程式碼（HTML, CSS, JS）整合在一個檔案中。
```

## 成果連結

- **成果示範1**：https://gemini.google.com/share/eb14c734c824

## 迭代修正說明

成果示範1有錯誤：擊球後，球的形狀變了；請修正，滾動時要維持球的一致性；另外，角度正確後，球仍不太容易入袋，請改為較易入袋的可容誤差。

## 最後版本

- https://gemini.google.com/share/1a604358e38e