Mini RTS

The user wants to create a small RTS (Real-Time Strategy) game. This should be a complete, playable game in a single HTML file. Let me think about what makes a good mini RTS: Core RTS elements: 1. Units that can be selected (click/drag box selection) 2. Right-click or command to move 3. Resource gathering (workers harvesting from resource nodes) 4. Building construction 5. Unit production 6. Enemy AI that attacks 7. Combat (attacking, health, death) 8. Minimap maybe 9. Win/lose conditions Let me design a compact but complete RTS: **Features:** - Grid-based-ish terrain (or simple open map) - Resource nodes (crystal/gold) - Your base (Command Center) - Worker units (harvest resources) - Combat units (soldiers) - Enemy AI base that sends waves or builds units - Selection: left-click drag for box select, left-click select unit - Right-click: move/attack/harvest depending on target - Build units from base with buttons - Camera panning with edge scrolling or WASD - Fog of war? Maybe skip for simplicity, or simple version - Minimap for navigation Let me think about the entities: - **Worker**: harvests crystals, returns to base, costs resources - **Soldier**: combat unit with attack - **Enemy**: red AI units that spawn and attack Buildings: - **HQ (yours)**: produces workers and soldiers, drop-off point - **Enemy HQ**: spawns enemy units - Maybe turrets? Resources: crystals scattered on map. Mechanics: - Harvesting: worker goes to crystal, mines for some time (carrying capacity), returns to HQ, deposit. - Combat: units auto-attack in range or when commanded. Health bars. - Enemy AI: simple — spawns soldiers periodically and attacks your base. Waves increase. UI: - Top bar: crystals count, unit count, wave/enemy info - Bottom panel: when HQ selected, buttons to train Worker / Soldier. When units selected, show count. - Minimap canvas in corner. - Tooltips for costs. Controls: - Left click: select unit / drag box select - Right click: move / attack enemy / harvest crystal - Camera: WASD or arrow keys, edge scrolling optional, mouse drag middle? Let's do WASD/arrows + edge scroll. - Space: center on HQ maybe. - Ctrl+click? Keep simple. Implementation details: - Units move with simple steering: move directly toward target, with collision avoidance via simple separation (push apart overlapping units). - Attack: cooldown, range, projectile or instant? Projectiles look better. Small bullets for soldiers; workers melee? Workers can fight weakly. - Selection circles, health bars drawn on canvas. - Minimap: draw dots scaled. Win condition: destroy enemy HQ. Lose if your HQ destroyed. Enemy waves spawn from enemy HQ at intervals; enemy HQ maybe spawns continuously. To make it winnable, enemy HQ has finite health and you attack it. Also maybe enemy also builds workers? Keep simple: enemy spawns soldiers from its HQ every N seconds; waves attack. If player attacks enemy base, defenders spawn? Let's have enemy HQ spawn a soldier every few seconds up to some cap, and periodically send attack squads to player's base. Also include gather: crystals finite? Could deplete nodes. Let's have finite amount per node (e.g., 300 each). Show remaining when selected/hovering. That adds depth. Total resources on map enough to build an army. Costs: - Worker: 50 crystal - Soldier: 75 crystal - Worker: HP 40, small attack or flee. Soldier: HP 80, shoot projectiles with range ~120, damage ~8, cooldown ~0.8s. Enemy soldiers same stats as yours for fairness. Game pacing: start with 3 workers, HQ, 100 crystal. Enemy starts spawning after grace period. Map: 2000x1400 world. Player base bottom-left, enemy base top-right. Crystals near player base and central contested. Screen viewport with camera. Canvas full window. Rendering: draw simple shapes — circles for units with team color, building as rectangle with team color, crystals as diamonds cyan. Nice-ish colors, shadow. Selection box. Group info panel showing selected unit types and count, and buttons if HQ selected: "Worker (50)", "Soldier (75)". Hotkeys Q/W maybe. Also add a "rally" not needed. Minimap: click to jump camera. Show camera rectangle, units as dots, buildings as squares. Alright, also handle: - Attack-move: right-click on enemy = attack target. Right-click on ground = move. Right-click on crystal with workers = harvest. Shift-queue? Skip for simplicity but could mention. Keep simple. - Auto-attack: soldiers acquire nearest enemy within aggro range (~150) unless currently commanded to move? Standard RTS: idle units auto-attack nearby enemies. During move orders they won't stop, but once idle they attack. Implement: if unit.idle and enemy in range → attack. Workers auto-flee? They'll just keep harvesting; fine, but they have small self-defense? Let's give workers no auto-attack but you can command them to attack? Simpler: workers also have weak attack if right-click enemy. But harvesting logic: if order target is crystal, they do harvest cycle. Enemy behavior: - Enemy HQ spawns soldier every 6 seconds (grace first 45s), cap maybe scales. - Every 30s, if enemy has >=4 units, send squad to attack player base (target player HQ, attack anything in range while moving? they attack-move: if enemy in aggro range, engage). - Enemy units defend their HQ: if player units near enemy base, they attack-move to them (their idle auto-attack handles). Health bars, HQ health ~1000/1500. Enemy HQ health 1200. Win/lose overlay with restart. Camera edge scrolling maybe optional toggle; use WASD/arrows + minimap click. Edge scroll can be enabled with checkbox? Add edge scroll always, plus keys. Fine. Selection: your units and HQ selectable. Enemy click shows info? Could allow selecting enemy single unit for info. Simpler: left-click selects your units only; ignore enemies. UI: Use HTML overlay divs + canvas for game. Bottom panel with buttons (disabled if insufficient funds). Show selected info. Top-left resources; top-right time/wave. Let me write the code carefully. World size W=2200,H=1500. Entities arrays: ``` units = [] // {id, side:'player'|'enemy', type:'worker'|'soldier', x,y, hp,maxHp, cooldown, order:{...}, carry, carryCap, target (unit/building/crystal), attackCooldown, speed, damage, range, selected} buildings = [] // HQ each side {x,y,side,hp,maxHp,w,h} crystals = [] // {x,y,amount, amountMax} projectiles = [] // {x,y, target, speed, damage, side} ``` Unit ordering: order types: 'move', 'attack', 'harvest', 'idle', plus harvest substate: 'mine' (to crystal), 'carry' (to base). Update logic per unit: - if dead skip. - if attack order: if target dead → idle. if in range → shoot. else move toward. - move order: move toward point; when close → idle. - harvest: - if crystal depleted → find nearest crystal or idle. - if carry0; pick nearest when reached?), then mine: timer accumulates, take 5 per tick? Simplify: when within radius ~18 of crystal, mining timer: every 0.5s take 5 until carried 20, then go to base; when within base radius add resources, then head back (remember crystal). - idle: auto-acquire if soldier (any unit?) — workers too? If enemy within aggroRange (soldier 160, worker 80?) Workers try to keep task? For soldiers idle → acquire. Workers won't auto attack (so they're vulnerable). Enemy soldiers same. Separation: after moving, resolve overlaps: for pairs within sum of radii push apart slightly. O(n²) fine for ~100 units. Melee range: soldier range 130, projectile speed 260 px/s, projectile hits when within 6 of target, apply damage, create small hit flash maybe. Worker attack: range 18, damage 3, cooldown 0.7, instant melee. Fine—but workers won't auto-use unless ordered attack. Buildings attackable; HQ has no weapon. Spawning: buttons cost, spawn at HQ position + random offset, queue? Instant spawn with sound? No audio needed. Add simple production queue with progress bar maybe — instant but with 2s build time and queue list. Keep it simple: immediate spawn, cooldown 0? That's fine but production time adds RTS feel. Implement queue with times: worker 2s, soldier 3s; HQ panel shows queue progress. Manageable: hq.production = [{type, t, total}], update decrement time; when done spawn. UI show queued count and progress. Enemy AI spawn: timer spawns soldier instantly at enemy HQ every 5s after grace period, respecting cap maybe 25. Wave attack: every 25s, if count>=5, pick all idle enemy soldiers → attack-move to player HQ. Also if player attacks enemy side units near their base, they auto-defend via idle acquire. Difficulty balance guess; it's a small demo. Grace 40s. Crystals placement: clusters of 4 nodes near player start (safe) and central clusters and near enemy side for expansion. Each node 300. Visual: size depends on amount. Camera: {x,y}, move clamp. Zoom? skip zoom (or allow wheel zoom 0.7–1.5, worthwhile and simple: apply scale). Let's add zoom with wheel, clamp. Need to adjust hit-testing by accounting scale. Doable. Minimap: 200x~136 canvas scaled. Click sets camera center. Draw every frame or every few frames. Hotkeys: Q train worker when HQ selected; W soldier? Could conflict with camera WASD. Use different: avoid hotkeys, or use 'B' worker, 'N' soldier? Use keys: 'A' worker, 'S' soldier? WASD camera conflicts. Camera via arrow keys only? Many RTS use edge scroll anyway. I'll do camera: arrow keys + edge scroll. Then letters free: W worker, S soldier? Let's use: Z = worker, X = soldier when HQ selected. Also Space to jump to HQ. Tab? Simple. Actually let me keep WASD camera and use buttons; and also number shortcuts? I'll implement edge-scroll + arrow keys + WASD both, and hotkeys: when HQ selected, 'Q' worker 'E' soldier. W/A/S/D used for camera but Q/E fine. Good. Selection mechanics: mousedown left → start drag. mouseup: if small drag, pick single top unit (player). Else box select player units. Also click HQ select. Selection stores type. Right-click: - If selected units include HQ? HQ right-click sets rally? Skip. - Determine target: enemy unit/building within click radius (~ unit radius + 6) → attack. - crystal node within radius → workers harvest (only workers ordered to harvest; soldiers given move? treat soldiers ignore?). If mixed, all ordered: workers harvest, soldiers attack-move to area? Simplify: assign harvest only to workers, others move. - else move. Also draw movement target marker (small flag/pulse) and attack marker red. Health bars and selection circles. Draw crystals with glow amount. Projectile rendering: small dot with trail. Win/lose overlay div with restart button resetting game. Frame loop with requestAnimationFrame, dt clamped. Aggro/acquire: findTarget among enemy units + buildings choose nearest within aggro, prefer units? nearest entity (unit or building). For idle enemy soldiers near player base, player soldiers idle will defend. Attack-move implemented as order 'attackArea': move to point but engage enemies in range on the way? Simplify: move order with flag attackMove; each update if enemy within range+something engage. Let me implement generic: if order has `attackMove` flag and acquire finds target → switch to 'attack' with target, remember return? Keep simple: for soldiers, idle acquisition handles most; for move orders, set attackMove flag true when right-click didn't hit target but we still want engagement? Standard: normal move ignores enemies until idle. I'll implement attackMove flag: when true, each frame try acquire within aggro; if found switch order to attack target. When right-click ground, attackMove=false (move), when right-click enemy → attack specific (attackMove allowed to switch? just attack target). Enemy squads: attack-move toward player HQ with flag; they engage nearby player units then continue? Implementation with flag switches to attack; after killing they don't resume move. Acceptable. Also add idle acquisition to consider buildings only if no units nearby? Nearest overall fine but attacking HQ while units around needed. nearest works since units approach anyway. Performance fine. UI HTML structure: - #topbar: resources div (crystal icon), unit count, tips. - #selection panel bottom center: shows either HQ (queue buttons) or units list summary. - #minimap canvas bottom-left? Put minimap bottom-left, selection info bottom-center. Common RTS layout. - Help overlay small text top-right of controls. Colors: player teal/blue, enemy red-orange. Background dark green grid? Draw terrain with subtle grid lines and objects. Nice vignette. Starting resources: 150. Unit counts cap? Player cap maybe 40, show count/x. Simpler: no cap, but queue limit 5. Let me now write the full code. Key structures: ```js const WORLD={w:2200,h:1500}; let game; init() sets: buildings=[hq(player,150,1200?), enemyHQ(...) ]; Actually positions: player HQ at (250, 1250) bottom-left; enemy at (1950, 260) top-right. ``` Coordinate system: y increases downward; fine. Crystals: cluster(x,y,count). near player (350,1100) 4 nodes; central (1100,700) 6; enemy side (1850,450) 4; plus a couple more mid clusters to reward map control. Unit radius: worker 7, soldier 8. HQ size 70x70. Create: ```js function unit(side,type,x,y){...} ``` Stats: - worker: hp 45, speed 70, dmg 2, range 20, cd 0.8, radius7, carryMax 15, mineRate etc. - soldier: hp 90, speed 85, dmg 9, range 130, cd 0.9, radius8, projectile. HQ: hp1200 player, hp 1400 enemy. AI: enemy.spawnTimer countdown from grace; wave timer. Grace: 45 s. spawn every 5s soldier at enemy HQ with slight offset, cap 30. Wave: every 30s: gather enemyIdles count>=4 → for each set order attackMove(playerHQ pos). Also if enemy idle count high regardless, sends. Player resources: res=150. deposit adds carry amount. Update functions per entity: ```js function updateUnit(u,dt){ if(u.hp<=0)return; switch order... } ``` Movement helper moveToward(u,tx,ty,dt) returns bool arrived within threshold. Attack: if target invalid (dead/depleted building removed) → order idle. dist = range; shoot: if cd<=0 → if projectile-based create proj else instant damage; cd=base. Projectiles store target ref; on update move toward target's current position; if target dead → remove; if dist<8 → damage. Get nearest enemy entities for acquire: iterate units (opposite side, alive) plus buildings (opposite side alive) list cached per frame? Compute each acquire call O(n); units maybe 60; few calls; fine. Separation pass each frame over all alive units O(n²) ~3600 fine. Selection: sel=[] list of objects (units or building). On update panel. Rendering order: terrain grid, crystals, buildings, units, projectiles, selection box, markers. Markers array {x,y,color,t} fade. Minimap render each frame cheap. Also handle battle overlay detection: projectile hit small flash array. Edge scroll: check mouse pos; pan. Edge scroll toggled maybe always on; fine. Handle right-click context: prevent default. Prevent text selection. Buttons: btn worker "Train Worker — 50 (Q)", soldier "Train Soldier — 70 (E)". Disabled when funds insufficient or queue full (5). Click enqueue update resources immediately. Production progress: draw in hq panel: queue list with first item progress bar. When HQ selected also right-click sets rally point for produced units? Nice-to-have; implement rally: hq.rally={x,y} set when right-click with only HQ in selection. On spawn, unit ordered move to rally. Show rally flag on map. Good extra RTS feel. Game speed? normal. Restart via reload init state (rebuild arrays). Let me be careful with hit-testing under camera+zoom: screen = world->screen: sx=(x-cam.x)*zoom, sy=(y-cam.y)*zoom. world from screen: wx=cam.x+sx/zoom. Draw with ctx.setTransform(zoom,0,0,zoom, -cam.x*zoom, -cam.y*zoom). Then draw world coords directly. Reset transform for UI overlay (selection box drawn in screen coords from stored mouse events, or store world coords of drag box and draw with same transform — yes store world box). Minimap separate canvas 200x136 with own scale factor: sx=200/WORLD.w etc. Now enemy AI building destruction: when attacking building, projectiles target building center-ish, hit radius bigger (use target.r or half size ~ 45). I'll give buildings `radius` ~ 50 for hit tests and attacking. Buildings also targetable as selection? Write helper entitiesOf(side) for target search. Alright, code time. I'll aim for clean, well-commented, complete. Also add tips text: "Left-drag: select • Right-click: move/attack/harvest • WASD/arrows/edge: camera • Wheel: zoom • Q/E: train • Space: HQ". Let me manage fog? skip. Let me think about enemy spawn positions and wave for pathfind straight lines — map has no obstacles so fine. Crystal depletion: worker takes min(5, amount) each 0.5s tick while within radius 20. carry up to 15. After deplete node, workers retarget nearest non-depleted when arriving or when ordered? When their target crystal amount<=0 they find next nearest; if none, idle. On deposit, they go back to same crystal (stored in order.crystal). If depleted find again. If carrying and crystal gone fine. Enemy also miners? no. Mineral display: HUD with gem icon (emoji 💎 maybe) — use colored diamond drawn? HTML span with 🔷 or styled div. Use "◆" char with color. Fine. Panel: when units selected: show list grouped counts "Soldier x5, Worker x3". Show average hp? skip. Also allow clicking enemy to view? no. Draw enemy health bars only when damaged or always small? draw always for combat clarity but minimal: small bar above when hp=4. Also each frame enemy idle acquire handles. Now player won/lost: overlay div pointer-events enabled with restart button calls init() and hides overlay. init resets all. Minimap click sets camera center accordingly. Also right-click on minimap? no. Camera clamp: 0..WORLD.w - view.w etc considering zoom. View w = canvas.width/zoom. Edge scrolling: check mouse within 14px edges; pan speed 500*dt. Handle mouse coords for drag box stored. Selection click threshold: 5px. Also drawn rally flag for player HQ when selected (small flagpole). Production queue UI: when HQ selected, list queue icons; update panel each frame maybe cheap string compare; simpler redraw panel each frame—fine. Panel buttons attach event listeners once and just update disabled state and text content. Unit info panel: counts grouped. Let me also implement double-click select same-type? skip. I think plan is solid. Write code with careful organization: - HTML skeleton: style, topbar, hint, canvas #game, panel #sel, minimap canvas, overlay #end. - script: constants, state, init, input handling, camera, loop, update fns, render fns, UI update. Edge: user resizing → canvas size adjusts (listen resize, set canvas size to window). Zoom via wheel between 0.6 and 1.6. I must ensure no external libs. Full HTML in one block. Now specifics in code. Let me define selection: `sel` array; clicking sets. Right-Click handler: ``` function command(wx,w y){ if(!sel.length) return; // if only a building (our hq): set rally if(sel.length===1 && sel[0].typeObj==='building' && sel[0].side==='player'){ sel[0].rally={x:wx,y:wy}; marker; return;} // find target enemy entity let ent = pickEnemyAt(wx,wy); let cry = pickCrystalAt(wx,wy); let units=sel.filter(isUnit) if(ent){ units.forEach(u=>u.order={mode:'attack',t:ent}); marker red } else if(cry && !crystal depleted){ workers ordered harvest; soldiers amove? soldiers move. } else { // move formation: offset positions slightly units.forEach((u,i)=> u.order={mode:'move',x:wx+offsets, y..., }); marker green // workers cleared } } ``` pickEnemyAt: search units & buildings of enemy side within r+10. pickCrystalAt: within 30. Formation offsets: arrange in ring: i counts → dx = (i%5-2)*14, dy=(floor(i/5))*14 randomized. Fine. Harvest assignment only workers; if no workers in selection (all soldiers) treat as move. attack on enemy building also allowed. For attackers: range uses target radius: distTo - (target.r or building half) ≤ range. I'll give units target radius usage: effectiveDist(dist, target) = dist - (target.r||45). Projectile speed 320. Worker attack instant. Melee units don't spawn projectile. Projectiles array each {x,y,t(ref together with kind?),dmg,side}. Since target may die: if t.dead remove. Move toward current pos; if within 8 + (t.r or 40?) apply. For building target bigger radius so easier. Acquire for idle soldiers every ~0.3s stagger? fine every frame with early exit when cooldown? okay. Enemy squad amove: I'll implement amove mode: move to x,y; each tick try acquire (aggro) if found order={mode:'attack',t, fallback:old}. fallback chain preserve. attack target dead → resume fallback (amove). When arrive amove point → idle. This yields reasonable. Enemy squads target player HQ coords. Also player units idle-centered: after finishing move mode idle. Set initial: 3 workers, rally? none. Resource HUD; time? optional show enemy next wave timer maybe "Next attack: 25s". End overlay: win when enemy HQ dead; lose when player HQ dead. Freeze updates. Manage loop: always render; update only if !over. Restart resets via init and over=false. Instructions hint toggle small box. Now write final code. I'll keep code structured & commented, moderately. Let me also add a subtle grid and scattered decoration (trees/rocks) purely visual to avoid emptiness: generate rocks/trees on init with rand positions — nice. They're non-interfering visuals. Also avoid drawing under UI? draw before regionClick? fine. Prevent selecting visual deco obviously. Colors: player #4cc9f0 bluish, enemy #ff5a5a. Workers smaller, soldier gun line. Units drawn: circle body + direction line? Simple: circle + tiny barrel line toward facing for soldiers; worker diamond shape. Health bars: when damaged. Selection: player units selectable circle green; HQ rectangle outline yellow when selected. Markers (move/attack pings): fading circles: green ring for move, red X-ish for attack, flag icon for rally (persist). Alright—write it. Code length target maybe ~800 lines. Ensure all features included correctly and no bugs in logic: - init(): builds state; called on load & restart. - start position constants. - crystals clusters. Careful: selection preserved references: deadFilter removes units; also purge sel each frame for dead. Panel update each frame string building. Minimap drawing: player dots blue, enemy red, crystals cyan, buildings squares, camera rect. Zoom/clamp: wheel event preventDefault. Edge scroll default true unless mouse over bottom UI? Overlay panel has pointer-events auto but canvas full screen. Edge scroll only when hovering canvas edges mostly; could conflict with panel. Fine, we keep; maybe disable when pointer over panel: check event target? use mousemove on window with e.target check. Simplify: skip edge scroll if mouseY near bottom panel area? We can set panel pointer-events:none except buttons (buttons auto). Then edge scroll works under panel visually. Do that: #panel {pointer-events:none} .btn {pointer-events:auto}. Hotkeys q/e. Space center HQ. Also arrows keys. Ok write final answer. One more consideration: building production frame update: hq.prod array of {type,time,total}; update in game loop for player HQ; shift when done spawn unit; spawn pos find free offset ring. Costs: WORKER_COST=50, SOLDIER_COST=70. Starting res 160. Start workers 3. Deposit visual: marker "+15". Also draw numeric popups? markers with text optional. Aggro while workers harvest: workers won't fight back automatically — acceptable; allow manual attack ordering. Enemy unit count display maybe top. Time to produce final message: short intro, code block, perhaps brief controls summary. Keep response mostly code; instructions concise. Let me write the code very carefully now, simulating potential runtime issues mentally. Key helper: ```js function dist(a,b){...} function moveToward(u,tx,ty,dt){ let dx=tx-u.x, dy=ty-u.y; let d=Math.hypot(dx,dy); let sp=u.speed*dt; if(d<=sp+2){u.x=tx;u.y=ty;return true;} u.x+=dx/d*sp; u.y+=dy/d*sp; u.face=Math.atan2(dy,dx); return false;} ``` Effective attack: ```js function targetRadius(t){return t.radius?? (t.building?45: t.r); } ``` I'll store distinct kinds: units have .r, buildings have .size (half). targetRad = t.kind==='b'? t.size : t.r → set kind flags. I'll create entities: units plain obj with kind 'u' buildings kind 'b' Selection of building allowed. Order attack: compute d = Math.hypot; reach = u.range + targetRadius(target); if d<=reach shoot else moveToward center. Worker harvest: order={mode:'harvest', c: crystalRef, stage:'to'|'mine'|'back'} - if no c or c.amount<=0 → c=nearestCrystal(u) (nonzero) else idle. - stage to: moveToward(c.x,c.y); arrived→stage='mine' - stage mine: if dist >c.r+? then stage to; else mineT+=dt; every .4 carry+=take 3? Let me: rate=8/sec accumulate u.carryFloat; each tick carry +=1 transfersating? Simpler: mineT+=dt; while mineT>=0.4 {mineT-=0.4; let take=Math.min(5,c.amount, u.carryMax-u.carry); if(take<=0) { if(u.carry>=u.carryMax){stage='back';} else { find new c or idle} } else {c.amount-=take; u.carry+=take;} if(u.carry>=u.carryMax){stage='back';break;} } If crystal depleted before full: still go back with partial? Yes go back when c.amount==0 and carry>0, or find another crystal if carry==0. Handle: if c.amount<=0: if carry>0 stage back else c=nearest; continue. - stage back: moveToward(hq.x,hq.y+?); if dist< hq.size+15 → deposit: res+=carry; markers text; carry=0; stage='to' (c still referenced). Workers use player HQ pos lookup buildings hqAlive. Enemy attack handling on workers: none auto. Projectiles: {t,u?not needed,x,y,dmg,kind ref}. movement toward t pos. Separation: for i Mini RTS

controls
left‑drag: select • right‑click: order
WASD / arrows / edges: camera • wheel: zoom
select HQ → Q worker / E soldier • Space: jump to HQ

``` Time shown and wave countdown optional. Now the JS: ```js const T={ worker:{hp:45,speed:75,range:20,dmg:2,cd:.8,r:7,carry:15,proj:false,aggro:0,cost:50,prod:2}, soldier:{hp:90,speed:85,range:130,dmg:9,cd:.9,r:8,proj:true,aggro:170,cost:70,prod:3} }; const COL={player:'#3fb3e6',enemy:'#ff5a54'}; const WORLD={w:2200,h:1500}; let units,buildings,crystals,projs,markers,deco,texts; let res,sel,cam,zoom,dragBox,over,winner,grace,waveT,enemySpawnT,gameT; ``` init: ```js function init(){ units=[];buildings=[];crystals=[];projs=[];markers=[];texts=[];deco=[]; res=160;sel=[];cam={x:0,y:0};zoom=1;dragBox=null;over=false;grace=40;waveT=30;enemySpawnT=NaN? set grace concept: enemySpawnT=45;gameT=0; // deco for(let i=0;i<60;i++)deco.push({x:Math.random()*WORLD.w,y:Math.random()*WORLD.h,r:3+Math.random()*8,h:Math.random()}); const phq=makeHQ('player',240,1180); const ehq=makeHQ('enemy',1950,220); buildings.push(phq,ehq); cluster(330,1050,4); cluster(1150,720,6); cluster(1870,430,4); cluster(700,600,3); cluster(1500,1000,3); for(let i=0;i<3;i++){spawnUnit('player','worker',phq.x+(Math.cos(2.1+i))*60,phq.y+60);} sel=[phq]; cam.x=clamp(phq.x-innerWidth/2,0,WORLD.w-innerWidth); ... } ``` Careful with innerWidth scaling zoom; view clamp accounts zoom. makeHQ returns {kind:'b',side,type:'hq',x,y,size:44,hp:1200? enemy 1400,max,prod:[],rally:null,dead:false} spawnUnit pushes to units; also used by production. cluster: positions around. Loop: ```js function frame(t){ dt=...; if(!over){gameT+=dt; step(dt);} render(); requestAnimationFrame(frame);} ``` step: update hq prod, units, projectiles, separation, ai spawn/wave, markers fade, texts fade, purge, camera from keys+edge, end check. Keys tracked: set from keydown/up; Q/E handled on keydown (train). Space center HQ. segmentedEnemy spawn: ``` if(!over){ enemySpawnT-=dt; if(enemySpawnT<=0){find ehq if alive; if(countEnemy()<30){spawnUnit('enemy','soldier',...)} enemySpawnT=5+Math.random();} waveT-=dt; if(waveT<=0){ let es=units.filter enemy soldier; if(es.length>=4){ es.forEach(u=>u.order={mode:'amove',x:phq.x,y:phq.y}); markers; } waveT=30; } } ``` grace used only to not display scary; simpler: enemySpawnT starts 45. HUD wave text "Enemy attack in: Xs". render order with transform. selection UI updatePanel each frame writing innerHTML (careful to not recreate buttons each time because listeners lost—use cached handler? If we rebuild innerHTML, onclick attribute referencing functions works if functions global. Use inline onclick attr strings. It's fine: innerHTML rebuilt each frame, buttons with onclick="train('worker')". Global function train. Disabled attr set in string.) Simpler: build string: ``` if sel includes building hq: content = `

Command HQ

...` queue display "Queue: Worker...". else group counts. ``` Production progress bar in string with first item pct. OK write it all concretely now fully. Cluster function define: ```js function cluster(cx,cy,n){for(let i=0;i0&&Math.hypot(c.x-x,c.y-y)<26) return c; return null;} ``` command: ```js function command(wx,wy){ if(!sel.length) return; const buildingsSel=sel.filter(s=>s.kind==='b'); const us=sel.filter(s=>s.kind==='u'); if(buildingsSel.length===1&&us.length===0){ // rally buildingsSel[0].rally={x:wx,y:wy}; markers.push({x:wx,y:wy,c:'#ffd452',t:1,type:'flag'}); return; } let ent=entityAt(wx,wy); let us2=us.filter(u=>u.side==='player'); // only control own although sel only own anyway if(ent){ us2.forEach(u=>u.order={mode:'attack',t:ent,fallback:null}); markers.push({x:wx,y:wy,c:'#ff6b6b',t:1}); }else{ const c=crystalAt(wx,wy); let i=0; us2.forEach(u=>{ if(c&&u.kind2==='worker'){u.order={mode:'harvest',c:c,stage:'to'};u.carryFloat=0;} else { // formation offsets let ox=((i%5)-2)*16, oy=Math.floor(i/5)*16-16; u.order={mode:'move',x:clamp(wx+ox,0,WORLD.w),y:clamp(wy+oy,0,WORLD.h)}; i++; } }); markers.push({x:wx,y:wy,c:'#7cfa8f',t:1}); } } ``` Store unit subtype as u.kind? conflict. Use u.type. kind:'u' with type worker/soldier. attack update: ```js function doAttack(u,dt){ let t=u.order.t; if(!t||t.dead){ let fb=u.order.fallback; u.order=fb?fb:{mode:'idle'}; return;} const tr=t.kind==='b'?t.size:t.r; const d=Math.hypot(t.x-u.x,t.y-u.y); u.face=Math.atan2(t.y-u.y,t.x-u.x); if(d<=u.range+tr){ if(u.cdt<=0){ if(u.proj){ projs.push({x:u.x,y:u.y,t:t,dmg:u.dmg}); } else { damage(t,u.dmg); } u.cdt=u.cd; } } else moveToward(u,t.x,t.y,dt); } ``` cdt decrement each update. Acquire: ```js function acquire(u){ let best=null,bd=u.aggro; for(const v of units){ if(v.side!==u.side&&!v.dead){let d=Math.hypot(v.x-u.x,v.y-u.y)-(v.r); if(d0 attempt acquire → if found order attack (fallback null). Amove fallback chain: fallback object references; fine. Harvest code as designed. Deposit: find own hq building object reference stored global playerHQ. deposit: ```js res+=u.carry; texts.push({x:hq.x,y:hq.y-hq.size-10,str:'+'+u.carry,t:1}); u.carry=0; ``` Workers with carry returning: ensure if own HQ destroyed (dead), they become idle. Separation function. damage(t,d){t.hp-=d; if(t.hp<=0){t.dead=true; spawn markers;}} Buildings purge: for HQ destruction significant. Keep building in array with dead, but filter for removal. For HQ when dead we set over accordingly perhaps. purge: ``` units=units.filter(u=>!u.dead); buildings=buildings.filter(b=>!b.dead); sel=sel.filter(s=>!s.dead); ``` Check game over: phqRef/ehqRef stored globally; if dead → over/winner. Render: ```js function render(){ const cv=document.getElementById('game');... ctx.setTransform(zoom,0,0,zoom,-cam.x*zoom,-cam.y*zoom); // bg fill big rect // grid lines every 100 // deco circles greenish // crystals // rally lines for player hq // buildings // markers // units // projectiles // health bars // selection circles for sel units & hq outline // drag box (screen transform): compute from stored world coordinates to draw in same transform → fine. // reset transform, draw minimap content separately on its canvas. } ``` Selection circles only player-controlled? Draw for all in sel (own only). Enemy health bars for all units hp=5 return; res-=cost; push {type,time:stat.prod,total}. step production: for player hq alive: if prod[0] advance time-=dt; when <=0 shift & spawn; rally order if exists. Also production queue times update even if HQ not selected evidently global only one HQ. Enemy spawn from ehq roughly symmetrical: no prod time (instant). enemySpawnT initial 45. handle keydown: ```js keys[k.toLowerCase()]=true; if(k==='q'||'Q') train('worker'); if 'e' train soldier; if ' ' center on hq. ``` Use e.code? simpler e.key.toLowerCase(). Camera step: dir from keys arrows WASD; plus edge if mouse near edges and not dragging; cam move speed 600/zoom? Pan in world coords: speed 600*dt. clamp with view size canvas.width/zoom. Zoom wheel: zoom*= old clamp .5..1.8; keep under pointer? simplistic scale about center of screen; fine. Also ensure cam clamp after zoom: clampCam(). Minimap interactions: mousedown on mini → compute world pos scale; center cam; also while dragging move listen global mousemove? add mousemove on mini to pan when buttons down. I think enough planning; finalize code in answer. Try to keep it syntactically correct. I'll be thorough and write cleanly. Let me also verify selection drag box drawn with transform: store world coords; when rendering with transform active it draws correctly. Mouse events stored clientX/Y; convert. Edge scroll check uses mouse client coords from last mousemove. Potential bug: `canvas` variable name conflicts; use `cv`. Write final full script: Also overlay #end style and show/hide. Let me write damage for workers' crystal? no. One more: projectiles hitting buildings: dist < 8 fine since moving toward center; they may fly past center if small step; still fine. Alright, also give small battle text "VICTORY"/"DEFEAT". Now produce the final answer with intro line and code. Reasonably long. Edge: when enemy targets crystal? They won't target crystals since acquire only units/buildings. good. Enemy fallback: when their amove fallback point reached eventually idle. Also normal 'move' fallback none. Let me also ensure units target dead purge doesn't break order t ref (t.dead flags set) fine. Write it. After init, requestAnimationFrame once. Need global cv ctx. Time now to compose. Here's a complete mini RTS with resource gathering, unit production, box selection, attack/move orders, a minimap, and an enemy AI that launches waves at your base. ```html Mini RTS

left-drag: select • right-click: move / attack / harvest
WASD / arrows / screen edges: scroll • wheel: zoom
select HQ → Q worker / E soldier • Space: jump to HQ

``` **How to play:** - Harvest ⛏ crystals with workers from your HQ (produce more with **Q**) - Build 🔫 soldiers with **E**, then box-select your army and right-click the enemy base (top-right) - The enemy activates after ~45s and launches attack waves — destroy their HQ to win - Use **WASD/arrows/edge-scrolling** to move the camera, mouse wheel to zoom, and the minimap to jump around - Right-click with only the HQ selected to set a rally point for new units

Create a small RTS