İki bölümden oluşan bir strateji oyunu promptu: kendi köyünde altın madeni, iksir toplayıcı, kışla, top ve okçu kulesi gibi binaları kurup geliştiriyorsun, sonra asker toplayıp rakip köylere saldırarak kaynak kazanıyorsun.
Izgaraya bina yerleştirme, yükseltme süreleri, asker türleri, savunma kuleleri ve savaş sonucu hesaplaması ayrı başlıklarda anlatılıyor. Her şey Three.js ile tek bir HTML dosyasında. Prompt İngilizce.
Build a fully playable Clash of Clans-inspired strategy game using Three.js (loaded from CDN). The entire game must be a single HTML file with no build tools — only vanilla HTML, CSS, JavaScript, and CDN imports.
---
## CORE GAME LOOP
The game has two interconnected systems:
1. **Village Mode** – Build and upgrade your base
2. **Battle Mode** – Attack enemy villages to earn Gold and Elixir
---
## VILLAGE SYSTEM
### Grid & Layout
- The village is a 20x20 isometric-style top-down grid rendered in Three.js
- Each cell can hold one building
- Camera: orthographic top-down, drag to pan, scroll to zoom
### Buildings (unlockable/upgradeable)
| Building | Function |
|---|---|
| Town Hall (1x1) | Core building; determines max village level |
| Gold Mine | Passively generates Gold over time |
| Elixir Collector | Passively generates Elixir over time |
| Gold Storage | Increases max Gold capacity |
| Elixir Storage | Increases max Elixir capacity |
| Builder's Hut | Required to construct/upgrade buildings |
| Cannon | Defense tower; attacks enemies during Battle defense |
| Archer Tower | Ranged defense; higher attack speed than Cannon |
| Wall | Blocks troop movement paths |
| Army Camp | Increases max troop housing space |
| Barracks | Trains troops using Elixir |
### Building Placement
- Player drags buildings from a build menu onto the grid
- Buildings show green (valid) or red (invalid) ghost before placing
- Construction takes real time (speed scaled for fun: 5–30 seconds per level)
- Upgrading a building costs Gold or Elixir and increases its stats
### Resources
- Gold and Elixir accumulate passively from mines/collectors
- Shown in top HUD with animated counters
- Spending resources is instant; collecting from buildings requires a tap
---
## BATTLE SYSTEM
### Matchmaking
- "Attack!" button opens a Battle screen
- Game generates a random enemy village (procedurally placed buildings on a grid)
- Enemy village has randomized Cannons, Archer Towers, Gold/Elixir Storages, Walls
### Troop Deployment
- Player has a troop roster trained in Barracks (e.g. 10 Barbarians, 5 Archers, 2 Giants)
- Bottom bar shows available troops; tap a troop type, then tap the battlefield edge to deploy
- Troops spawn at the clicked edge position and walk toward the nearest building using simple pathfinding (BFS on the grid)
- Troops attack buildings within range; buildings auto-attack back
### Troops
| Troop | HP | DPS | Target Priority | Speed |
|---|---|---|---|---|
| Barbarian | 45 | 8 | Nearest building | Fast |
| Archer | 30 | 11 | Nearest building (ranged) | Medium |
| Giant | 300 | 11 | Defensive buildings first | Slow |
### Defense Towers (enemy side)
- Cannon: high damage, slow fire rate, targets nearest troop
- Archer Tower: medium damage, fast fire rate, ranged
### Battle Resolution
- Battle ends when: all enemy buildings destroyed (3 stars) OR all troops die
- Stars awarded: 1 star = 33% destruction, 2 stars = 66%, 3 stars = 100%
- **Loot earned = % of enemy Gold/Elixir storages destroyed × stored amount**
- Earned Gold and Elixir are added to player's village
---
## PROGRESSION SYSTEM
- Town Hall level 1–5 unlocks new buildings and higher upgrade tiers
- Each building has 3 upgrade levels with increasing HP, output, and cost
- Player starts with: 500 Gold, 500 Elixir, 1 Builder's Hut, 1 Gold Mine, 1 Elixir Collector
---
## UI / HUD
### Village Mode HUD
- Top bar: Gold counter (🪙), Elixir counter (💜), Builder count (🔨 X/Y available)
- Bottom bar: Build menu button, Attack button, Army button (shows troop queue)
- Clicking a building shows an info panel: current level, upgrade cost, upgrade button
### Battle Mode HUD
- Top: enemy village name, destruction % bar, star counter
- Bottom: scrollable troop bar with counts; tap to select, tap battlefield to deploy
- "End Battle" button to forfeit and keep partial loot
---
## THREE.JS RENDERING
- Use Three.js r128 from CDN: https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js
- Village and battlefield are rendered on a flat plane with colored box meshes representing buildings
- Each building type has a distinct color and height (e.g. Town Hall = tall gold box, Wall = flat grey tile)
- Troops are small animated spheres that move across the grid
- Projectiles are tiny fast-moving cubes
- Simple ambient + directional lighting for depth
- Camera uses OrthographicCamera with mouse-drag pan and scroll zoom
---
## TECHNICAL REQUIREMENTS
- Single HTML file, no build tools, no external frameworks except Three.js from CDN
- All game state in a JS object: `{ gold, elixir, buildings: [], troops: [], battleState }`
- requestAnimationFrame game loop
- Passive resource income calculated via delta time
- Construction timers tracked with timestamps
- Mobile touch support for troop deployment and building placement
---
## VISUAL STYLE
- Color-coded buildings: Town Hall = gold, Cannon = dark grey, Archer Tower = brown, Gold Mine = yellow, Elixir Collector = purple, Wall = grey, Barracks = red, Army Camp = green
- Grass-green ground plane
- Health bars (small red/green bars) floating above troops and buildings during battle
- Damage numbers pop up (+8, +11) in white floating text using CSS overlays synced to 3D positions
- Star rating animation at battle end (1–3 stars scale in)
---
Deliver the complete, fully working game as a single `index.html` file. Prioritize playability — all systems must actually function. Comment major code sections clearly.
Yorumlar
Yorum Yap