A high-fidelity 2D top-down tactical shooter inspired by Counter-Strike, built entirely with React 19, TypeScript, and HTML5 Canvas.
This project runs 100% on the client-side with no backend dependencies. All physics, AI pathfinding, and sound synthesis are calculated in the browser.
(Replace the link above with your actual gameplay GIF)
| Firefight | Buy Menu |
|---|---|
| Intense tactical combat | Classic purchasing system |
- Tactical Gameplay: Classic 5v5 Bomb Defusal mode on a Dust2-inspired layout.
- Advanced AI: Bots use Behavior Trees and A* Pathfinding to navigate, hold angles, plant/defuse bombs, and react to sound/sight.
- Weapon System:
- Realistic mechanics including spread, fire rate, magazine management, and reload times.
- Arsenal includes Glock, USP-S, Desert Eagle, AK-47, M4A1-S, and AWP.
- Economy & Buy Menu: Earn money by eliminating enemies or winning rounds to buy better gear.
- Audio Engine: Custom
Web Audio APIsynthesizer for procedural gunshots, explosions, and UI sounds (no external audio files required). - Spectator Mode: Automatically switch views to living teammates when eliminated.
| Key | Action |
|---|---|
| W A S D | Move |
| Mouse | Aim |
| L-Click | Shoot |
| R | Reload |
| B | Open Buy Menu (Only in Spawn Zone) |
| E | Plant Bomb (T) / Defuse Bomb (CT) |
| L-Click | Cycle Spectator (When Dead) |
- Rendering: HTML5 Canvas optimized for 60FPS performance.
- Pathfinding: Custom implementation of the A* algorithm with wall-sliding physics logic to prevent entities from getting stuck.
- State Management: Hybrid approach using React State for UI and Refs for the high-frequency game loop to minimize re-renders.
- Styling: Tailwind CSS for responsive UI overlays (HUD, Buy Menu, Main Menu).
Since this is a standard React project:
-
Install dependencies:
npm install
-
Start the development server:
npm start
-
Open your browser to
http://localhost:3000.
這是一款向 Counter-Strike 致敬的高擬真 2D 俯視視角戰術射擊遊戲，完全使用 React 19、TypeScript 和 HTML5 Canvas 構建。
本專案是純前端應用，無需後端依賴。所有的物理運算、AI 路徑搜尋以及音效合成皆在瀏覽器端即時計算。
- 戰術玩法：經典的 5v5 拆彈模式（Bomb Defusal），地圖設計靈感來自 Dust2。
- 高階 AI 系統：
- 電腦玩家 (Bot) 採用 行為樹 (Behavior Trees) 與 A 尋路演算法*。
- 具備戰術意識：懂得繞路、尋找掩體、搜點、安裝與拆除炸彈。
- 聽音辨位與視線檢查 (Line of Sight)。
- 擬真武器系統：
- 包含彈道擴散、射速、彈匣管理與換彈時間。
- 收錄經典武器：Glock, USP-S, Desert Eagle, AK-47, M4A1-S, AWP。
- 經濟系統：擊殺敵人或贏得回合可獲得金錢，並可在出生點按下
B鍵購買裝備。 - 音效引擎：使用
Web Audio API實時合成槍聲、爆炸聲與介面音效，無需加載外部音頻文件。 - 觀戰模式：玩家死亡後，視角會自動切換至存活的隊友，點擊滑鼠可切換觀看對象。
| 按鍵 | 動作 |
|---|---|
| W A S D | 移動角色 |
| 滑鼠移動 | 瞄準 |
| 滑鼠左鍵 | 射擊 |
| R | 換彈 (Reload) |
| B | 開啟購買選單 (僅限出生點內) |
| E | 安裝炸彈 (T) / 拆除炸彈 (CT) |
| 滑鼠左鍵 | 死亡後切換觀戰對象 |
- 渲染 (Rendering)：使用 HTML5 Canvas 進行高效繪圖，優化至 60FPS 流暢運行。
- 尋路 (Pathfinding)：實作 A* 演算法，並加入「沿牆滑動 (Wall-sliding)」物理邏輯，解決角色卡牆問題。
- 狀態管理：採用混合模式，UI 使用 React State，而高頻率的遊戲迴圈 (Game Loop) 則使用 React Refs 進行數據存取，以最小化 Re-renders 並提升效能。
- 樣式：使用 Tailwind CSS 製作響應式的 HUD、購買選單與主畫面。
這是一個標準的 React 專案：
-
安裝依賴套件：
npm install
-
啟動開發伺服器：
npm start
-
打開瀏覽器訪問
http://localhost:3000。
本專案為純前端遊戲，不會將數據儲存於伺服器。重新整理頁面後，遊戲進度與金錢將會重置。