CS2 // Browser Edition

The user is asking for "CS2" — Counter-Strike 2 — to be made from scratch, with the most realistic graphics, physics, and functionality. This is a game built in HTML/JS (iframe, browser). I need to build a fully functional Counter-Strike-style FPS game in a single HTML file using Three.js (an external library via CDN is allowed — "if using external libraries, the response should include complete HTML including ``` CDN: https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js — reliable UMD. Let me write the code in sections: 1. Config & weapon data 2. Audio engine 3. Map grid build + collision helpers (cellAt, isWall(x,z), raycast grid, A*) 4. Three scene setup, materials/textures, build meshes from grid (merge runs per row into boxes? Simpler: 1 box per wall cell is 100*4+segments ≈ maybe 600 cells → 600 meshes too many. Merge: for each row, find wall run, make box per run. ~60 runs. Or merge 2D connected regions... row runs sufficient (~80 boxes). Crates separate. Also floor plane, ceiling? No ceiling (open sky) but add perimeter height 5. Add some props: wooden crates, barrels, site signs (canvas texture with "A"/"B"), sandbags? Maybe skip. 5. Textures: canvas generators: plaster (noise), floor (concrete), crate wood, metal. 6. Player controller: input, physics (AABB vs grid & crates), jump, crouch, spread. 7. Weapon system: fire (raycast to bots + world), tracers, impacts, penetration, recoil, reload, switch, view model anim. 8. Bot system: AI update, model, shooting (raycast with spread to player/teammates), health, death. 9. Grenade system. 10. Bomb logic. 11. Economy + buy menu UI. 12. Round manager. 13. HUD rendering (DOM + canvas radar). 14. Menu + pause. 15. Main loop. Bot LOS: grid raycast between eyes; check crates (2D segment vs AABB with height check). Bot shooting: on trigger: spawn bullet ray from bot eye toward target with spread; test against player body parts (player hitbox: head sphere r 0.18 at y 1.58?, torso, legs — player crouch changes). Implement player hit zones as boxes: head (0.25 cube at headY), torso, legs. Ray vs box. World occlusion: if wall/crate closer, no hit, spark at wall. Bot damage to player: apply armor etc. Show damage direction. Bot vs bot: should they fight each other? Team T bots vs CT bots — yes! Full simulation: bots can shoot teammates? Friendly fire off: bullet stops at own team. Bots engage enemies: if in LOS (raycast on grid) within 60. This makes rounds play themselves when you die → spectator view. Round flow: 1. Menu → pick side, difficulty. 2. Round start: freeze 5s? CS buy is 15s. Let's do freeze 12s (movement locked, buy allowed), timer 1:55 starts after freeze. 3. Bomb: if T: player (if T alive) holds; if player is T and dies, a T bot gets bomb. 4. Plant: T in site, E, channel 3s, interruptible. After: 40s countdown, beeps accelerate. Explosion: T win (unless defused). 5. Defuse: CT in site, E, 5s (no kit; with kit 1.5s — add defuse kit item? $400. Yes, add). 6. Win check: team eliminated (no plant → CT win). Timer 0: plant → T win; else CT win. 7. End: message 4s, next round, economy payout. Match: first to 8 rounds? Show score; maybe 12 rounds or endless; add "match ends at 8"? Make it endless with score; add match point at 8? Keep endless, but show score. Or first to 8 → "Victory" screen with stats (K/D, accuracy), restart button. Let's do first to 8 → final screen with stats (K/D, accuracy), restart button. Difficulty: Easy (bot inaccuracy high, reaction slow), Normal, Hard (more accurate, faster). Affects bot damage multiplier. OK, a lot of code. I'll write it in sections as listed. Let me define everything concretely. MAP CODE: ```js const MW=100, MH=100; let grid = new Uint8Array(MW*MH); // 1 wall, 0 floor function wall(x1,z1,x2,z2){ // inclusive cell range for(let z=Math.max(0,z1); z<=Math.min(MH-1,z2); z++) for(let x=Math.max(0,x1); x<=Math.min(MW-1,x2); x++) grid[z*MW+x]=1; } function floor(x1,z1,x2,z2){ similar 0 } ``` Build: ``` // default all floor, then border walls wall(0,0,MW-1,0); wall(0,MH-1,MW-1,MH-1); wall(0,0,0,MH-1); wall(MW-1,0,MW-1,MH-1); ``` Then segments (as designed): - CT compound: x 30..70, z 75..93: wall(30,75,30,93) west; wall(70,75,70,93) east; north z=75: wall(30,75,45,75), wall(54,75,70,75) → gap x 46..53. - Mid: wall(44,40,44,74); wall(56,40,56,74). Wait, mid x 44..56 means walls at x=44? Corridor interior x 45..55, walls x=44 & x=56, z 40..74. CT gap x 46..53 is inside. Mid south end z=74, opening to CT gap at z=75 (z 75 row has gap x 46..53) — good. - Junction x 30..88, z 22..40: - West wall x=30, z 22..40: wall(30,22,30,40) - East: junction east edge x=88 merges to long west wall x=88 (z 4..72) — no extra. - North wall z=22, x 31..41: wall(31,22,41,22); x 42..58 middle lane north: wall(42,22,58,22); x 59..87: wall(59,22,87,22). So z=22 is all wall x 31..87 (3 segments → 1 call wall(31,22,87,22)). - Middle lane: x 42..58, z 23..31: bounded north z=22 (done), south opens to junction (z 32..40 x 42..58 is inside junction → floor). West bounded by B site east wall x=42; east by A site west wall x=58. - Site A: x 58..98, z 4..31: - West wall x=58, z 4..23: wall(58,4,58,23); gap z 24..31 (A main / lane entry). Also west wall x=58, z 32..32: wall(58,32,58,32). - South wall z=32, x 59..87: wall(59,32,87,32); x 88..98 open (long). - Long: west wall x=88, z 4..72: wall(88,4,88,72). Long corridor interior x 89..97, east = perimeter x=99? Perimeter wall x=99; x=98 is floor. Corridor x 89..98. - T compound: x 74..98, z 72..98: - West wall x=74, z 73..98: wall(74,73,74,98) - North wall z=72, x 74..87 & x 94..98: wall(74,72,87,72), wall(94,72,98,72) → gap x 88..93. - Wait, perimeter x=99 & z=99 are walls; inside T: x 75..98, z 73..98. - T spawn z 84..92, x 80..94. - B site: x 4..42, z 4..31: - East wall x=42, z 4..23: wall(42,4,42,23); z 32..32: wall(42,32,42,32); gap 24..31. - South: B main lane z 23..31 x 42..58 opens south to junction (x 42..58 z 32..40 = junction? junction x 30..88 z 22..40 → yes, floor). - So B main entry = middle lane west part: lane x 42..58: west edge x 42, z 24..31 open → B site. - B site west: wall x=4, z 3..32: wall(4,3,4,32). (Blocks pocket x 1..3.) - B site east edge x=42 handled. Site interior x 5..41, z 4..31. - Tunnels: - West corridor: x 8..29, z 57..65: north wall z=56, x 8..29: wall(8,56,29,56); south wall z=66, x 8..29: wall(8,66,29,66); east end connects to CT compound west wall gap: CT west wall x=30, z 75..93 — tunnel at z 57..65, not touching! Need a connector: gap at x=30 z 57..65? CT compound west wall is z 75..93 only. So tunnel east end x=29 needs a connection to CT area: wall segment at x=30, z 56..75 (extend CT west wall west of compound? CT compound is z 75..93). Let me extend west wall: wall(30,56,30,93) (CT west from z 56), with gap at z 57..65? Overlap: wall(30,56,30,93) then floor gap? Just: wall(30,66,30,93) and wall(30,56,30,56)? Let me define CT west wall x=30, z 56..93, gap z 57..65 (opens to tunnel). So: wall(30,56,30,56) (1 cell) + wall(30,66,30,93). And tunnel north corridor x 8..16, z 24..56: east boundary x=17, z 32..56: wall(17,32,17,56); west boundary x=7, z 32..56: wall(7,32,7,56); also west corridor west boundary x=7, z 56..66: wall(7,56,7,66); north corridor merges to B site at z 24..31 (site interior x 5..41, z 4..31; corridor x 8..16 z 24..31 inside site → open). Wait, junction west wall x=30, z 22..40 and CT west wall x=30 z 56..93: between z 41..55 x=30: open → pocket x 1..29, z 41..55 open?? That area (x 1..29, z 41..55): west bounded by x=0 perimeter? x=1..29 z 41..55: west: x 1..6 open (pocket!), north: junction south? Junction z 22..40 x 30..88 — so z 41 is south of junction. West area x 1..29 z 41..55: open pocket — should wall: x=30, z 41..55: wall(30,41,30,55). Then x=30 is a continuous wall z 41..93, gap 57..65. And pocket x 1..29 z 41..55: enclosed by x=30 (east), z=40? North: x 1..29 z 40: open (no wall) → connects to x 1..29 z 23..40 area: bounded north? B site west wall x=4, z 3..32; x 1..3 z 33..40 pocket: bounded north by B site west wall x=4 z 3..32 → below z=33: x 1..29 z 33..40: open strip connecting... north end z=32: bounded? B site is x 4..42 z 4..31; west of B x 1..3 z 4..31 blocked by x=4 wall. So x 1..29 z 33..40: open strip; north z=32: bounded? B site z 32 x 5..41: south of site: z=32 x 5..41: wall? I only placed site south wall at x=59..87 (A side) & x=42 (B east stub). B site south edge z=32: x 5..41: needs wall or opens to strip: if opens, strip x 1..29 z 33..40 is a corridor along B site south to junction west?? That would create a hidden route — undesirable. Wall: wall(5,32,41,32) (B site south wall, x 5..41). Also x 1..4 z 33..40 & z 41..55 pockets: wall(1,33,3,40)? Getting messy. Cleanest: make everything west of x=30 & south of z=32 solid, except tunnels: i.e., after building, fill: wall(1,33,29,55) (big solid block), then carve tunnels: floor(8,57,29,65) (west corridor), floor(8,33,16,56) (north corridor), floor(8,31,16,31)? B site already floor z 4..31: north corridor connects at z 32? Carve floor(8,24,16,56)?? z 24..31 is already site floor. So block (1,33,29,55) then carve floor(8,57,29,65) and floor(8,24,16,56). Wait, z 24..31 x 8..16 is inside B site (already floor). Carve floor(8,57,29,65) and floor(8,24,16,56). Then check boundaries: block (1,33,29,55) covers: z 33..55: blocks B south strip ✓. Carved west corridor z 57..65 x 8..29: north side z=56 = block ✓, south z=66: block? Block goes z 33..55 — z=66 not in block! z 66..74 x 1..29: open pocket below tunnel! Fill: extend block to z 33..74: wall(1,33,29,74), but CT compound west wall x=30 z 56..93 separates x 1..29 z 57..65? No — x=30 wall separates; west of it z 57..74 x 1..29: pocket → block covers to z 74 ✓. z 75..98 x 1..29: CT compound is x 30..70: west of CT x 1..29 z 75..98: pocket: block: wall(1,75,29,98). And z 33..74 block covers. z 75..98 covered. So final west fill: wall(1,33,29,98) (whole west of x=30, south of z=32), then carve: floor(8,57,29,65) and floor(8,24,16,56). Wait, z 24..31 x 8..16 is inside B site (already floor). Carve floor(8,57,29,65) and floor(8,24,16,56). Also B site south edge z=32 x 5..41: block starts z 33 → z=32 x 5..29: part of wall(1,33...)? No z=32 not covered: strip x 1..29 z 32: open! Also need z=32: include: wall(1,32,29,98)?? But then carve floor(8,24,16,56) cuts through at x 8..16 z 32 ✓ (carved later). And z=32 x 5..7, x 17..29 wall ✓, x 8..16 open (north corridor) ✓. And CT west wall x=30 z 56..93: with x=29 block, x=30 wall is redundant except gap: gap z 57..65: x=30 must be floor there: x=30 z 57..65: open (no wall) ✓, x=30 z 32..56: open → pocket? x=30 z 32..55: adjacent to block x≤29 and east junction (x 31..88 z 22..40) and east of z 41..55 x=31..? East of x=30, z 41..55: what's there? Junction z 22..40; south z 41..74: mid corridor x 44..56 & CT compound x 30..70 z 75..93. Area x 31..43 z 41..74: open (part of CT spawn approach / mid west). Hmm, that area x 31..43 z 41..74: bounded west by x=30 wall? I removed it (x=30 z 32..55 open?). Let me set explicitly: - CT compound west wall x=30, z 75..93 (compound) — tunnel connection: tunnel at z 57..65 → needs a wall at x=30 with gap z 57..65 and walls z 41..56 & z 66..74 to close pocket: so west wall x=30: wall(30,41,30,93) with gap z 57..65: so wall(30,41,30,56), wall(30,66,30,93). Then z 32..40 x=30: junction west wall: wall(30,22,30,40) covers ✓ (z 22..40). So x=30 is fully wall z 22..93, gap 57..65 ✓. - Pocket x 31..43 z 41..74: open area between tunnel CT wall and mid — that's fine, becomes "mid doors" pocket (playable, connects to CT compound north gap? CT gap x 46..53 z=75, mid x 45..55: pocket x 31..43 z 41..74 east edge x=44 (mid west wall) — so pocket opens east at z 75? No: mid west wall x=44 z 40..74 blocks; CT gap at z=75 x 46..53 is east of x=44. Pocket x 31..43: south z=75: wall(30,75..,70,75) covers x 31..43 ✓ (north CT wall spans x 30..70 with gap 46..53). So pocket x 31..43 z 41..74: bounded west (x=30), north (z=40? north wall x 31..43 z=40: junction west wall x=30 z 22..40; z=40 x 31..88: is there wall? Junction z 22..40 → south edge z=40..41 open to mid & pocket. So pocket north = open to junction? Junction z 22..40 x 30..88: at z=40, x 31..43: floor (junction) → pocket connects north to junction ✓ (that's "mid doors" route!). So pocket = mid doors room: connects: north to junction, east to... x=44 wall z 41..74; east at z=40?? Pocket z 41..74 east wall x=44 z 40..74: blocks. West: x=30 wall gap z 57..65 → tunnel ✓. South: CT wall ✓. So pocket connects to junction (north) and tunnels (west). But wait, mid corridor x 45..55, z 41..74 connects junction (z 40) to CT (z 75 gap x 46..53 ✓). Great, topology: - CT ↔ mid ↔ junction - junction ↔ tunnels (via pocket? no—junction north z 22..40 x 30..88; pocket x 31..43 z 41..74; junction west wall x=30; pocket opens to junction at z 40..41? Junction area includes z 40; pocket z 41: adjacent → open ✓) - Wait, does pocket open to junction directly? Junction z 22..40; pocket z 41..74; both x 31..43: adjacent rows z 40/z 41 both floor → connected ✓. - tunnels ↔ B site; junction ↔ A site (via x 58..? A site west wall gap z 24..31 x=58: junction z 22..40 x 30..88 includes z 24..31 x 59..87 ✓ opens to site gap ✓); middle lane: x 42..58 z 23..31: junction? lane z 23..31 x 42..58: north z=22 wall x 42..58?? I said wall(31,22,87,22) — that blocks lane from the outside; lane south (z 32) to junction: z 32 x 43..57: inside junction z 22..40 → floor ✓. So lane = north protrusion from junction, opens west to B site (x=42 wall gap z 24..31 ✓) & east to A site (x=58 gap z 24..31 ✓). - junction ↔ A site, direct (x 59..87 z 24..31 is junction? junction z 22..40 x 30..88 ✓ — so A main lane = junction east part; A site south wall z=32 x 59..87 blocks south; A site west x=58 z 4..23 blocks west; so junction connects to A site at x 58..87?? No: A site x 58..98 z 4..31. Junction x 30..88 z 22..40. Overlap region x 59..87 z 23..31: junction includes (z 22..40), site includes (z 4..31): overlap → same floor ✓. So A site merges with junction east! So A site = x 58..98 z 4..31 ∪ junction overlap → effective A zone x 58..98 z 4..31 plus junction x 59..88 z 22..40?? No—junction is just open floor south of A site south wall? Site south wall z=32 x 59..87: junction z 22..40 → z 23..31 x 59..87 is inside both junction and site. Hmm, so "A site" visually extends to z 31, and junction z 32..40 is south of site wall. But wait: I placed A site south wall z=32 x 59..87, and junction spans z 22..40 → junction includes z 32..40 x 59..87 → wall inside junction. So junction's east part (x 59..87) is z 22..31 (north of wall z=32). Fine: A main lane = x 59..87 z 22..31. OK. Similarly middle lane x 42..58 z 23..31 opens to junction at z 32..40 ✓, to B at x=42 gap, to A at x=58 gap. And A/B sites z 4..23 are separated from lane by walls x 58/x 42 z 4..23 ✓. - Long ↔ T: gap x 88..93 z=72 ✓. Long ↔ A: long x 89..98 z 4..72; A site x 58..98 z 4..31: overlap x 89..98 z 4..31 → long directly merges into A site (no wall between) ✓ (as in dust2: long opens into A). - Check T compound: x 74..98 z 72..98, west wall x=74 z 73..98, north z=72 gap 88..93. Area x 74..98 z 41..71: east of junction x>88? Junction x≤88. Long west wall x=88 z 4..72. So x 89..98 z 32..71 = long corridor (x 89..98 z 4..71 open? long west wall x=88: corridor x 89..98 ✓ z up to 71, then z=72 wall x 74..87 & 94..98, gap 88..93 → T). ✓ - x 74..88 z 41..71: pocket? Bounded west: x=74? No wall at x=74 z 41..71. Bounded north: z=40? Open (junction south edge is z=40 → z 41 open). So x 74..87 z 41..71: open area between junction/long — part of the map ("A ramp" area) ✓ connects to junction (north) and long? Long x 89..98: gap at x=88 z 41..71? Wall x=88 z 4..72 covers z 41..71 → separated ✓. So x 74..87 z 41..71 = open area (call it "A ramp"), open to junction ✓, south to T? T north wall z=72 x 74..87 (wall) ✓ only via gap x 88..93. Good, dead-end-ish area → add crates. Final wall list: ``` wall(0,0,MW-1,MH-1)? No — border: wall(0,0,99,0); wall(0,99,99,99); wall(0,0,0,99); wall(99,0,99,99); // west fill wall(1,32,29,98); // carve tunnels floor(8,57,29,65); // west tunnel (east end meets x=30 gap) floor(8,24,16,56); // north tunnel // CT compound wall(30,75,70,75) minus gap → wall(30,75,45,75); wall(54,75,70,75); wall(30,41,30,56); wall(30,66,30,93); // CT west (with gap 57..65) wall(70,75,70,93); // CT east // mid wall(44,40,44,74); wall(56,40,56,74); // junction north wall wall(31,22,87,22); // junction west wall(30,22,30,40); // A site wall(58,4,58,23); wall(58,32,58,32); wall(59,32,87,32); // B site wall(42,4,42,23); wall(42,32,42,32); // long wall(88,4,88,72); // T compound wall(74,73,74,98); wall(74,72,87,72); wall(94,72,98,72); ``` Wait, CT west gap: tunnel corridor x 8..29 z 57..65, east end x=29; x=30 z 57..65 open (no wall) → connects to CT compound x 31..69 z 75..93?? No — z 57..65 x 31..69: what's there? CT compound is z 75..93. x 31..69 z 41..74: pocket/doors area (x 31..43) plus x 44..56 mid (z 41..74) plus x 57..69 z 41..74: another pocket (open to junction north? junction z 22..40: yes z 41 open → open area). So tunnel exit (x 30, z 57..65) enters area x 31..69 z 41..74: bounded south by CT north wall z=75 ✓. So tunnels → "mid doors pocket" ✓. And gap x=30 z 57..65: floor ✓ (walls are only z 41..56 & 66..93). Hmm wait: tunnel exit opens at x 30 z 57..65 into pocket x 31..69 z 41..74 — that pocket also opens north to junction (z 40 boundary open) — so tunnels reach pocket which opens to mid/junction — that's fine (dust2 tunnels lead to CT doors). Also check B site: interior x 5..41 z 4..31 ✓; north z=3 perimeter? Perimeter z=0; z 1..3 x 5..41: pocket behind B: bounded north by perimeter, south by site? z=4? No wall → pocket x 5..41 z 1..3 connects to site interior (z 4) → just part of site area, fine (visually: site extends to z 4; fine). Same for A site behind: z 1..3 x 59..98 pocket → open to site ✓ fine. Crates (cover), positions (x,z center, size 1.6): - A site: (66,10), (72,14), (84,8), (90,20), (62,24) - Long: (92,40), (93,55) - Mid: (50,50), (48,58)? Mid corridor x 45..55: crate at (50,52) - Junction: (40,30), (76,26)? z 22..31 A lane: (76,27) - B site: (14,12), (24,8), (34,20), (10,22) - Tunnels: (18,60)? west corridor x 8..29 z 57..65: (20,61) - A ramp pocket: (80,55) - CT: (40,85), (60,85) - T: (80,84) Add about 15 crates with variety (some 2-stacked). Barrels (metal cylinders) a few: site A (95,15)? etc. Signs: canvas texture "A"/"B" large, painted on site floors? Site paint: large floor decal circles/rectangles with team paint — I'll draw a site rectangle on the floor with a plane with "A" / "B" letter texture, transparent. Spectator/spawn positions: - CT spawn: [(50,88),(46,84),(54,84),(42,90),(58,90)] face north (yaw facing -z → yaw=0 defined as -z? Define yaw=0 → forward -z (three: camera looks -z by default ✓). - T spawn: [(90,86),(84,84),(94,84),(88,92),(92,92)] face -z. Sites: - A plant zone: rect x 64..94, z 6..26 (within site). - B plant zone: rect x 8..38, z 6..26. Bomb plant markers: draw circles on floor + small "C4 zone" rings; plant point: nearest to zone center. Waypoint targets for AI: - T anchors: site A points [(70,12),(88,10),(64,24),(90,24)], B points [(16,14),(34,10),(12,24),(30,24)], mid anchors [(50,45),(45,35),(60,35)], long [(92,45),(93,60)]. - CT anchors: A: [(62,28),(90,30)?? Must be inside floor: (62,29),(86,28),(58,26)? x=58 wall... (60,28),(70,30)? z 30: A south wall z=32; z=30 x 59..87 is inside junction?? Junction z 22..40: x 59..87 z 23..31 inside junction ✓. CT A anchors: (62,29),(80,30),(92,18),(66,10) (inside site is OK for defend? CTs camping inside site is fine). - CT B: (10,29)?? z 29 x 10: B site ✓, (36,28),(24,14),(40,24). - Mid: (50,42),(48,36),(54,36); doors pocket: (36,60),(60,60)?? x 60 z 60: pocket x 57..69 z 41..74 ✓. Strategic roam: bots pick from anchors per phase. Bomb carrier routes to site: A* to random plant zone point. A* on grid: start = bot cell, target cell; 8-dir? 4-dir for simplicity (bot movement smooths), 8-dir with corner cut prevention (both neighbors free). Use 8-dir. Collision (entity vs world): circle (r 0.35) vs grid cells & crate AABBs: try move x, resolve, move z, resolve. Standard. Player eye: y = 1.62 (stand), crouch 1.15? crouch eye 1.1, bot eye 1.5. Bot raycast LOS: 2D ray step on grid + crate segment check (only for y overlap? All crates 1.6 high; eye 1.5 → crates at full height? If crate height 1.6 > eye 1.5, LOS blocked when standing; crouching (eye 1.1) can peek over? No—crate 1.6 > 1.1 too. Let crates be 1.2 high: can shoot over? If crate 1.2, then eye 1.5 sees over crate → LOS is not blocked by crate! In CS, full crate is 1.4 blocks? Let me do crates 1.4 high, block movement & bullets, but not block LOS for standing eye (1.62/1.5 > 1.4)?? Hmm, for simplicity: crates block bullets (ray at eye height hits crate top? Bullet at eye 1.62 > 1.4 → passes over!). That breaks crate cover. Let me make crates 1.5 tall → blocks standing (eye 1.5, 1.62) but crouch (1.1) sees over — that's realistic-ish (CS crouch over low cover is rare though). Simpler and robust: all crates 1.5; LOS/bullets at eye height hit; crouch player sees over crate (fun tactical). OK. Barrels: cylinder r .4 h 1.2? Same, treat as crate box for collision? Use AABB 0.8×0.8×1.5. Bullet world cast: ray from eye: step: find nearest intersection: (a) grid walls via 2D DDA with 3D y check (walls height 4 — always hit), (b) crate AABB 3D (2D DDA + y range), (c) bots: ray vs capsule approx: 3 spheres per bot? Use boxes: head box (0.3^3 at eyeY), body (0.5×0.7×0.25 at 1.0), legs (0.45×0.6×0.25 at 0.3) — transform into world via bot yaw; ray vs OBB (use sphere approx for speed: head sphere r .17 at y 1.52, torso sphere r .32 at y 1.05, legs r .3 at y 0.35, and check ray-sphere, take nearest, determine part by which sphere, plus verify not behind (ray direction dot). Spheres simpler & faster. Damage by part. Also verify no wall/crate closer. Same for bots shooting player: player spheres: head at (p.x, eyeY+0.05? player eye 1.62 head center ~1.55? Let's do: head r .17 y = crouch?1.15+0.5:1.62; torso r .32 y 1.1; legs r .28 y 0.45 (standing) / crouch: head 1.05, torso 0.78, legs 0.38. Penetration: on wall (grid) hit: block. On crate (wood) / barrel (metal): if damage*rand(0.6,1) > (wood? 350: 800)*? CS wood 900 metal 2000 with damage ~30-50: 36*1 > 900? no → never penetrate. CS: threshold = hardness/3? Actually CS: `dmg*random(0.6..1) > surface.damagePenetrationThreshold*?`... Let me just simplify: wood: pass if dmg > 90*? AK 36 → wood pass? CS AK penetrates wood at close: threshold wood 900, bullet dmg 29.6 * rand(0.6-1) < 900... CS formula: `if (dmg*rand < threshold) pass else...`? Actually in CS, metal 2000 / wood 900 with random 0.6-1.0 factor: `if (rand(dmg*0.6, dmg*1.0) > threshold*0.25)` pass? I don't remember exactly; let me just implement: metal passes if dmg > 55, wood passes if dmg > 35; damage × 0.5 per surface. So AK (36): wood ✓ metal ✗ (metal tap sound). AWP passes both. M4 (33): wood ✓. Glock (28): no. Feels right. Tracer: from muzzle to hit point, additive line, lifetime 60ms. Impact: on wall: spark burst + small decal (persistent, cap 60, fade oldest). Decal: small dark circle plane oriented to face normal. Muzzle flash: sprite at muzzle + point light (intensity decays 40ms). View model: group per weapon type, build from boxes: - Rifle: body, barrel, magazine, sight, front grip; positioned bottom-right; ADS: move to center, scale slightly, FOV 75→50 (rifle), 75→30 AWP? AWP ADS is scope: implement scope overlay? Simpler: AWP ADS FOV 30, model centered; that's enough. - Pistol smaller. - Knife: blade box. - Grenade: hand + grenade sphere. Animation: bob (sin walk), recoil pitch (recoilAnim decays), reload (dip model down + rotate), ADS lerp. Sound design (WebAudio): ``` AC = new AudioContext (lazy on first click) master = gain 0.5 shot(weapon, dist): noise buffer burst: - create bufferSource noise 0.15s, gain envelope exp decay, lowpass (f by dist & weapon), + sine 150→40 drop for body. Distance: gain = 1/(1+dist*0.15), lowpass freq = clamp(9000 - dist*180, 300, 9000) ``` Pre-generate noise buffer once. Footsteps: per step: short noise tick 30ms, highpass 200 lowpass 1200, gain 0.12, slight random pitch. Alternate. Hit tick: 2000Hz square 30ms + 3000; headshot: extra 1500→900? CS "headshot sound": bright ding: 2 tones. Bomb tick: 880 square 50ms, rate increases. Plant beep: 660 80ms xN. Round horn: 220 saw 0.6s + 330? CS round start: "buy" sound; end: horn. 150Hz square 0.5s with vibrato for "horn". Buy: 1000Hz blip. Knife whoosh: noise bandpass sweep; hit: thud (lowpass 100 noise 60ms). Flash: bright noise pop + high sine. Explosion: big lowpass noise 1s + sine 60→30 0.5s. Bolt (AWP): click + rack: 2 ticks + slide. Reload per weapon: schedule tick pattern. OK HUD DOM: ``` #hud #top: #timer #score (T x - x CT) #round #radar (canvas) #killfeed #msg (center announce) #crosshair (4 lines + dot, JS positions) #dmgdir (canvas overlay? CSS: conic red arc rotating) → use a div with conic-gradient, set rotate. #healthrow: hp, armor #weapon: name, big ammo #money #buyhint (B key) #channelbar (plant/defuse) #spectate tag #menu (main): title "COUNTER-STRIKE: DUST ARENA"? Avoid trademark? "Counter-Strike" is a real name... The user asked for "CS2". Let me title it "CS: ARENA 2" or "COUNTER-STRIKE // DUST"? Let's title "COUNTER-STRIKE 2 — BROWSER ARENA". I'll title: "CS2 // BROWSER EDITION". Side select: T / CT cards; difficulty; controls list; PLAY button. #buymenu (panel): tabs: Weapons / Gear; items grid with cost, stats; hotkey. #pause (overlay on pointer unlock during game): Resume / Back to menu / stats. #end: round result banner handled by #msg; match end screen with stats + Rematch. ``` Crosshair: JS sets line offset from spread (px = spread*H/(2*tan(fov/2)) * (1/10)?? Let me compute: distance d=10; world spread = 2*spread*d; screen: world / (2*d*tan(fov/2)) * H → H*spread/tan(fov/2). Use that, clamp. Buy menu items: ``` T: Glock-18 200, MP9 1250, AK-47 2700, AWP 4750, Nova? skip. HE 300, Flash 200, Smoke 300, Armor 650, Armor+Helmet 1000, Defuse Kit 400 (CT only? CS: CT only; allow both? CT only). CT: USP-S 200, MP9? give CT "MP5-SD"? Keep MP9 for both, M4A4 3100, AWP 4750, ... ``` Also keep knife free. Buy replaces primary/pistol. Armor stacks. Player's weapon slots: [primary, pistol, knife, grenade (selected index)]. Switch: 1 primary, 2 pistol, 3 knife? CS: 1 primary, 2 secondary, 3 knife. Grenades: G or keys 4-6? Let me do: 4 HE, 5 Flash, 6 Smoke (quick equip & throw with click); also Q swap primary/pistol, E is reserved for plant. Tab? No. Grenade slot: when equipped, show grenade count? CS has 1 slot for each type, up to 1 stack... Simpler: unlimited count? Cap: 1 of each per round (buy 1). Count shown. Grenade throwing: velocity 15.5, aim: forward * (ads? 15.5: 12) + up 5 + player velocity. Now bot AI detail: Bot state: ``` { pos, yaw, health, armor, helmet, team, name, weapon(s), state: 'toPoint'|'fight'|'plant'|'defuse'|'dead', target, path[], pathI, reactT, shootT, lastShot, nextThink, point, role, holding bomb, blindUntil, deadT } ``` Think (every 0.15-0.3s): - If blind (flash): wander randomly. - Find enemies: nearest visible enemy (LOS grid ray + range 55): if found: - If reactT not armed: reactT = now + reaction(0.25-0.6s by difficulty); - Combat: face target (lerp), strafe (perpendicular random, keep distance 8-25; if target > 30 maybe approach), shoot if in burst cycle: burst 3-7 rounds, pause 0.25-0.6s; inaccuracy: spread angle = base by difficulty (easy 3.5°, normal 2.2°, hard 1.4°) + distance factor + moving penalty; damage multiplier (easy 0.7, normal 1, hard 1.2). - While fighting: if no LOS for 0.8s: go to last-seen point → path. - Else: move toward objective point: - T with bomb (pre-plant): path to carrier's site target point (carrier picks a site on round start, e.g., 50/50 A/B, or player if T player alive — player is the carrier). - T escort: follow carrier at offset; if too close, pick nearby point. - CT: pick anchor: if plant: 2 nearest bots defuse (point = bomb), others hold site/mid. - Roam: if idle 5s, pick new point. - Hearing: onShot (pos, loudness): if dist < 26 & LOS? (not needed for hearing, just dist<26 + random): set investigate point = pos (approx), for 4s, state toPoint(investigate). Movement: follow path cells (center +0.5), speed 4.2; if target in LOS: stop (stand) or strafe in place. Separation: push away from teammates within 1.2. Bots also crouch? Skip (visual). Bot death: topple animation: rotate model to floor, 18s, fade, remove. Bot shooting implementation: on trigger: origin = eye; dir = to target head (or body center) + random cone by inaccuracy; cast against world & enemies (not own team); if enemy hit: damage; tracer from bot muzzle to hit; distant shot sound; also shell? Skip. Bot vs player friendly fire: none. Bomb logic: - Round start: if team T: player (if T alive) is carrier. If player (T) dies: pick a random T bot to be carrier. - Plant: player: if T, has bomb, in site zone, weapon=knife? (CS: knife out or any) → hold E: channel 3s, must stand still? (interrupt on damage) → planted: bomb at position (snap to zone center? keep pos), beep loop, 40s. - Bot plant: carrier in zone (no enemies nearby for 1s?) → channel 3s → planted. - Defuse: CT in zone near bomb (1.5m): hold E 5s (1.5s if kit). - Explosion: big boom at bomb, T win (unless defused). Also damage to nearby? Just win. - Round end check. Round timer: 115s + freeze 12s. Timer 0: if plant → T win, else CT win. Elimination: if team wiped & no plant & not in... standard. Economy payout at round end: win 3250, loss 1400 + streak bonus 500*min(streak,5)? Keep base + 500/kill already. Cap 16000. Bot money too? Bots: give them fixed loadouts each round based on "economy" simulated: simple: bots have money too, same rules, pick buys by price tier: if money >= primary → buy; else pistol-only. Keep simple: bot purchases: rifle if money>2500 (AK/M4 by team, 20% chance of AWP if >4500?), armor always, pistol default. Good. Spectate: when player dies: camera lerp to a random alive ally's head; show "SPECTATING [name]". Round end: free orbit camera around map center? Keep follow ally. Match: first to 8. Show final stats screen (K, D, accuracy, ADR). Pause: pointer lock lost → if in round & alive → pause overlay (Resume re-locks). Edge cases: pointer lock exit is Esc; also handle 'pointerlockerror'. OK, and "most realistic graphics": add: - Fog: THREE.FogExp2? Dust: color #c8b89a? Sky gradient light. FogExp2 0.008. - Sun: DirectionalLight warm, shadow 2048, camera range ±60. - Hemisphere: sky #bcd3e8 / ground #b8a67f. - ACESFilmic, exposure 1.1. - Texture repeat & anisotropy. - Ambient occlusion: fake via vertex? Skip. - Slight camera bob & FOV kick on sprint? Small. - Grass? Map is dusty; floor is concrete + sand patch outside? All floor sand/concrete. - Skybox: big sphere with gradient shader (backside) + sun disc? Simple gradient canvas → texture on sphere. Bot "realism": add helmets (T: no helmet, cap; CT: helmet), simple face? Boxes with texture tint. Weapon box in hand. Now write the code. It'll be long. Must be efficient and complete. Let me start writing. Key data: ```js const WEAPONS = { knife:{name:'Knife', type:'knife', dmg:55, rate:0.55, mag:0, auto:false, range:2.2, spread:0, price:0, pen:0, recoil:0.004, magSize:1}, glock:{name:'Glock-18', dmg:28, rate:0.125, magSize:20, reserve:120, auto:false, spread:0.011, adsSpread:0.008, moveSpread:0.012, bloom:0.004, recoil:[0.010,0.006], price:200, pen:28, sfx:'pistol'}, usp:{name:'USP-S', dmg:35, rate:0.125, magSize:12, reserve:24, auto:false, spread:0.009, adsSpread:0.006, moveSpread:0.011, bloom:0.004, recoil:[0.008,0.005], price:200, pen:35, sfx:'pistol'}, ak:{name:'AK-47', dmg:36, rate:0.1, magSize:30, reserve:90, auto:true, spread:0.013, adsSpread:0.007, moveSpread:0.016, bloom:0.006, recoil:[0.016,0.009], price:2700, pen:36, sfx:'ak'}, m4:{name:'M4A4', dmg:33, rate:0.1, magSize:30, reserve:90, auto:true, spread:0.011, adsSpread:0.006, moveSpread:0.015, bloom:0.005, recoil:[0.012,0.007], price:3100, pen:33, sfx:'ak'}, mp9:{name:'MP9', dmg:29, rate:0.105, magSize:30, reserve:120, auto:true, spread:0.012, adsSpread:0.008, moveSpread:0.014, bloom:0.005, recoil:[0.008,0.005], price:1250, pen:29, sfx:'smg'}, awp:{name:'AWP', dmg:115, rate:1.5, magSize:5, reserve:30, auto:false, spread:0.09, adsSpread:0.0004, moveSpread:0.02, bloom:0.01, recoil:[0.09,0.03], price:4750, pen:200, sfx:'awp', bolt:true} } ``` Head mult 4, legs 0.8, torso 1. Falloff: dmg *= 1 - 0.3*(dist/50) clamped to 0.7. Armor: body & legs hit: armor absorbs 50% (armor-- accordingly). Helmet: head: 55% of head damage absorbed. Player: ``` { pos:Vector3, vel, onGround, crouch, health 100, armor 0, helmet, money 800, team, weapons:{primary:null,pistol:'glock'/'usp',knife, grenades:{he:0,flash:0,smoke:0}}, cur slot, ammo per weapon...} ``` Ammo store: {mag, res} per weapon id. Weapon instance: `P.w = {primary: 'ak' or null, ...}` with ammo object. Firing logic (player): ``` onMouseDown: if slot is grenade: throw; else if cur is knife: swing (timed, melee check sphere forward 2.2); else: if reloading → no; if mag 0 → click (auto reload?), else shoot: spread = calc; dir = camera forward + random in cone (2D random in circle*spread) cast → apply damage/tracer/impact; recoil: pitch += recoilY*(rand .8-1.2), yaw += pattern drift + random; bloom += w.bloom; muzzle flash; sound; mag--; if 0 → auto-reload? CS doesn't auto-reload; show "0 — R" hint. Full-auto: if mouse held, continue. ``` Recoil recovery: camera pitch recovers? CS doesn't recover (you must pull down). Keep: no recovery, but aimTime resets spread. AimTime: time since last movement (speed<1) & not jumping & not switching. ADS: lerp fov 75→ (awp 34, else 58), view model shift. Player physics: ``` vel.y -= 9.81*? CS gravity ~36u? Use meters: g=20 (feels snappy), jump v 7.5 (height ~1.4m? h=v²/2g=1.4 ✓ CS jump ~1.4m). speed: walk 4.5 (shift 3), sprint 5.5? CS walk 250 units? Let's do: run 5.4, walk 3.2 (shift), crouch 2.6. acc: horizontal: lerp vel.xz toward wishdir*speed at rate 12 ground / 3 air. ``` Collision: circle r .38 vs grid: check cells around; resolve by pushing out of wall cells (2D). Crates: AABB: resolve min axis. Jump: onGround && space. Landing: if fall speed > 8: landing sound. Movement spread factor: speed/5.4. Bot model build: ``` function makeBotMesh(team): group: legs: 2 boxes (0.16w, 0.75h) y .375; torso 0.5×0.55×0.28 y 1.02; arms 2 boxes .13×.5 y 1.12 x ±.32 (rotate for aim); head .26 y 1.5; helmet/cap; weapon box forward. Material: team colors: T: #6b6448? T shirt dark green #55603f? Classic: T = green/brown, CT = blue/gray. ``` Animation: walkPhase → leg rotation ±.5 sin; when fighting, arms up (lerp arm rotate to aim pose); head faces target. Death: rotate group around z? Fall: animate group rotation.x to ±PI/2 in .4s, pos y to floor; then sink after 15s. View model: build similar small gun. Radar: 150px canvas: scale map 100→150 (×1.5), draw: bg #202818cc? CS radar bg: dark green; walls #4a5d3a; sites: A/B letter light; player white arrow; allies light-blue/white dot; enemies: hidden unless recent (skip); bomb: red dot if planted (visible to both? In CS: bomb visible to both ✓); own team color. Rotation: north-up (simplest). Killfeed: array of {t, text}; render to DOM, fade after 5s. Center messages: large text with fade (queue). Now buy menu UI: build items per side: ``` primary: team==='t'? [mp9, ak, awp] : [mp9, m4, awp] secondary: glock/usp gear: armor 650, armor+helmet 1000 (adds both), defuse 400 (CT), he 300, flash 200, smoke 300 ``` Buy time only (freeze). Show "BUY TIME" indicator. Click or number to purchase. Difficulty: {easy: {acc:3.4, react:.55, dmg:.7}, normal:{2.4,.4,1}, hard:{1.5,.28,1.25}} (spread degrees). Sound distance: listener pos = player head; distance from event position to player; gain & lowpass as above; stereo: pan by relative angle. Bot shot: sfx with dist → auto-attenuates. OK, and round-start camera: during freeze, camera can look around but not move; show "BUY TIME — B". Bomb carrier player: HUD hint "You are carrying the bomb"; small C4 view model? Show hint text + sound? OK. Let me write. I'll do a single big script with sections. Be careful with syntax. Use const/let, arrow functions. Avoid classes to keep code compact? Use plain objects + functions. Pointer lock: canvas.requestPointerLock on click / "click to play" in menu. Loop: ``` let last=performance.now(); function frame(t){ dt=min(.05,(t-last)/1000); last=t; if(state==='menu'){} update(dt); render; requestAnimationFrame } ``` States: 'menu', 'freeze', 'live', 'roundEnd', 'matchEnd', 'paused' (flag). update(dt): - if paused: skip game logic but still render. - player: input, physics, weapon anims, spread decay, fire. - bots update. - grenades, projectiles, particles, tracers, smoke, flashes. - bomb plant/defuse channel (player & bots), bomb timer, tick. - round timer, win check. - HUD update. Bot think: stagger: thinkT -= dt; when <=0: think (0.12+rand*.15). Bot shooting: if in fight & LOS & reactT passed & cooldown: fire with burst logic: burstT. Bot bullets: function botFire(bot, target): spread angle: diff.acc deg * (1 + dist/40) + (bot moving? 0.5:0) deg; direction to target head with ±; raycast: nearest enemy hit vs world: iterate enemy spheres; world DDA; damage apply; tracer; sound; also shell? Skip. Player hit by bot: damage → if dead: playerDie (ragdoll? No model; screen red fade, spectate). Bot hit by player: damage number? Small floating text? Skip; hit marker + sound. Kill: update stats, feed, money, if carrier: transfer bomb, if bot with bomb → transfer to another T bot (or if none: bomb on ground? CS: bomb drops? On carrier death, C4 transfers to another T). Implementation: find another alive T bot → they carry; else bomb "dropped" at death pos, any T can pick up (walk over → carry). Fun & CS-like-ish. Plant zone check: point in rect. Bot defuse: 2 nearest CTs: target = bomb pos, hold within 1.2 → channel progress += dt/5 (1.5 if kit (gives 30% chance of kit to CTs)). CT defuse priority: closest 2 CTs. Also CTs before plant: defend anchors; T carrier: go to chosen site (random A/B 50/50, or player if T player alive — player is carrier). T non-carrier: follow carrier (distance 5-15) or anchor near route (long/mid points near carrier). After plant: T defends site (anchors inside site); CT rotates: defusers to bomb, others to mid/site. Waypoint targets: A* every time new target; path is array of {x,z}; follow: move to path[i] center; if < 0.6 → i++. Repath every 2s if stuck (pos not changed 1.5s). A*: open list array with min scan (10k cells OK for 100×100 but frequent calls... 9 bots repath 0.5/s: A* worst ~10k iterations × 9 = fine at low freq). Use array-based with gScore & f; OK. LOS check: 2D DDA on grid + crate segment: function losClear(x1,z1,x2,z2): step DDA on grid until hit or exit; crate: segment vs AABB (2D) with y overlap (always true since eye 1.5, crate 1.5) → block. Smoke occlusion: check each active smoke: distance from segment to smoke center < r → block (for bots; player visually). Segment-AABB 2D: slab method. OK, bot melee? Bots use knife when close (<2m) & no magazine: deal 40 damage every 0.8s. Add: else if dist<2 & mag==0: knife swing damage. Player melee: on click, if knife: animate, after 0.25s (mid swing), check spheres within 2.2 & forward dot>0.7 → 55 damage. Grenade inventory & select: slot 3? Let me do: keys: 1 primary, 2 pistol, 3 knife. G = throw selected grenade? Or 4/5/6. Implement: 4 HE, 5 Flash, 6 Smoke — equip grenade slot (throw with left click), auto-return to last weapon after throw. G also quick HE? Skip. Grenade view model: simple hand + grenade in hand. Also add: Tab? No. Damage indicator: on player hit: set dmgAngle (to shooter), opacity 1 decay. Hitmarker: small X 100ms (red on kill). Blood: red particles on hit; spark for walls. Particle system: array of {pos, vel, life, size, color, gravity, type(point/sprite)}. Render: one THREE.Points with buffer? Simpler: individual small meshes = heavy. Use THREE.Points with dynamic buffer: pool 500. Let me write a Points pool: positions Float32Array, colors, sizes (PointsMaterial vertexColors, size 0.06, sizeAttenuation, transparent). Manage life; dead → move far away. AdditiveBlending for sparks; blood maybe normal? Single system with additive for sparks + a separate one for blood (normal blending, red). 2 Points systems: sparks (additive, yellow/white), blood (normal, dark red), and smoke puffs? Smoke: separate sprites (few). Smoke cloud: on spawn: create group of ~14 sprite meshes (soft circle texture, opacity .55, gray #cfc8bb), random positions within sphere, scale expand 0→7 over 1s, life 18s, fade last 2s. Occlude bot LOS (list of active smokes {pos,r:6.5}). Flash: whiteout player: if player affected (looking at & within & clear): flashT=3 (screen white overlay alpha=flashT/3; crosshair hidden; bots: blindUntil). Bot blind: while blind: can't fight (aim error ×8) & maybe wander. HE: damage to all (player & bots) within 9m, wall attenuation: if LOS from bomb to victim blocked by wall: damage ×0.25. 110 max. Also crates? No (or destroy crates? skip). OK, explosion also spawns spark burst + light flash + boom. Now HUD numbers: ammo display "27 | 90". Timer display M:SS. Score: "T 3 : 5 CT". Money: "$ 4 300" formatted. Buy menu layout: left column categories (Weapons/Grenades/Gear), grid of item cards: name, price, small stat bars (dmg/rate). Keys 1-6 quickbuy? Click to buy. ESC/B to close. Round flow detail: ``` startRound(): state='freeze'; freezeT=12; roundT=115; reset player (pos spawn[round#?], hp 100? Keep hp/armor? CS: full reset. Reset hp 100, armor persists? CS: armor persists if >0? No—armor carries? In CS: armor persists between rounds? No: full reset each round (health 100), armor persists if bought and >0? Actually CS 1.6: armor persists? Health resets; armor resets? I think armor carries in CS:GO? Hmm — CS:GO armor carries between rounds? No — armor is reset every round in CS:GO. Yes, resets. Weapons persist; ammo full? In CS:GO ammo persists? Reloads fully... I think ammo carries. Let me refill magazine (simpler & fair), reserve persists. Bots: reposition, respawn (model reset), hp 100, loadout: re-buy each round by economy: bot money persists; buy logic: if money>=price(primary) & random → primary else default pistol; armor if money>800. Simplify: bot buys: if money>=2700: primary (ak/m4; 15% awp if >4500); if >=1250 & no: mp9; armor+helmet if >800 (50%); reset money after buy. Bomb: if T: assign: if player T & alive → player; else random T bot. planted=false; bombT=40. Messages: "Round N — Buy Time". ``` Live update: ``` freezeT-=dt → 0 → state 'live', message "GO GO GO" roundT-=dt; if <=0 → end: plant? T wins : CT wins. Bomb plant timer: bombT-=dt; beep; <=0 → explode → T wins. Win: alive count; if CT 0 (player included) → if !planted: T wins. If T 0 → CT wins (only if !planted? If plant & T 0 → CT wins ✓ standard). endRound(winner): state 'roundEnd', t=4.5s; payout; score++; message; cleanup deaths (keep for 4s), check match (>=8) → matchEnd screen, else → after delay → startRound. ``` Player plant/defuse channel: E held: if in zone & (plant: has bomb & not planted; defuse: !teamT & planted & near bomb): channel += dt (must stay within 2m? CS: within zone); on release/interrupt: decay channel quickly. Complete → plant/defuse. Also knife required? CS requires knife out (for plant) — let me allow any weapon, simpler. Plant visual: bomb box at pos (small black box with red blinking LED) + progress; beep; planted: red LED accelerates. Also site paint: big floor decal with letter. Spectate: after death: spectateT; pick random alive teammate → camera lerp to head pos + look their yaw; show name tag. If all teammates dead? (team already lost?) Camera at own death pos looking at killer? Or slow orbit. Edge OK. Now let me write everything. I'll also add small "instructions" in menu. Performance target: fine. Edge: pointer lock & pause: on 'pointerlockchange' lost during live → paused=true show overlay. Resume button: requestPointerLock. Audio: resume ctx on user gesture (menu click). Let me write out the map wall calls concretely (final): ```js const M=[]; // walls built by code function W(x1,z1,x2,z2){ for(let z=z1;z<=z2;z++) for(let x=x1;x<=x2;x++) if(x>0&&z>0&&x tag"). Let me use: display: 'Saira Condensed' or 'Oswald' (CS feel: condensed) for HUD numbers/titles, and 'Rajdhani' for UI. Both Google fonts. Link: https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Rajdhani:wght@400;500;600;700&display=swap HUD colors: CT blue #6fb1e0? CS:GO HUD: white/gray with yellow money, red T, blue CT. Use: background dark overlay, white text, T accent #e8a33d, CT #5aa7e8, money #9be355. Title: "COUNTER-STRIKE 2" with "BROWSER EDITION" tag — fine to reference. Now write the actual code. Careful with correctness. Let me write in order: ```html CS2 // Browser Edition

...

``` Let me write CSS carefully for HUD. Key JS pieces — I'll write them in my head carefully for bugs: Collision resolve (2D circle vs grid & crates): ```js function collideCircle(x,z,r){ // returns corrected x,z // grid const x0=Math.floor(x-r), x1=Math.floor(x+r), z0=Math.floor(z-r), z1=Math.floor(z+r); for(let cz=z0;cz<=z1;cz++)for(let cx=x0;cx<=x1;cx++){ if(cx<0||cz<0||cx>=MW||cz>=MH||grid[cz*MW+cx]) { // circle-AABB resolve const nx=clamp(x,cx,cx+1), nz=clamp(z,cz,cz+1); let dx=x-nx, dz=z-nz; const d2=dx*dx+dz*dz; if(d20?1:-1, stepZ=dz>0?1:-1; const tDX=Math.abs(1/dx), tDZ=Math.abs(1/dz); // inf-safe: if dx==0 → Infinity let tMX=(dx>0? (x+1-ox): (ox-x))*tDX, tMZ=(dz>0? (z+1-oz): (oz-z))*tDZ; let nx=0,nz=0, t=0; for(let i=0;i<200;i++){ if(tMXmaxT) return null; if(x<0||z<0||x>=MW||z>=MH||grid[z*MW+x]) return {t, nx, nz}; } return null; } ``` Note: at start cell, if starting cell is wall (shouldn't be). Also 3D point: px=ox+dx*t etc. Crate ray: slab: ```js function rayCrate(ox,oy,oz,dx,dy,dz,c){ // c: {x,z,hw,hd, y0:0,y1:1.5} slab x: if |dx|=max(tmin,0) & tmin>=0 return {t:min(tmin,0)<0? 0?? use tmin (entry), normal axis by which slab...} } ``` Standard. Sphere: t = b - sqrt(b²-c), b = o·d, c = |o|²-r² (o relative, d normalized). tmin 0.01. botFire: ```js const w=WEAPONS[bot.curWep]; spread = (diff.acc + dist*0.02 + (bot.moving?0.6:0)) * deg2rad * (bot.blind? 6:1); dir = norm(targetEye - eye) + randVec*spread (2 random tangents) cast world (grid + crates + smoke? Smoke doesn't block bullets) check enemy spheres (player + enemy team bots): nearest enemy sphere hit within world t. Apply damage with falloff & part & armor. tracer from muzzle (eye - up? eye + forward*0.3 + right*0.15) to endpoint. Impact spark if wall hit. Sound at bot position. ``` Bot burst logic: ``` bot.burst = shots remaining in burst; bot.burstCd. in think/combat update (per frame if fight): if LOS & reactDone & canShoot (mag>0): if bot.burstCd>0: -=dt else if bot.burst>0: fire (interval w.rate*1.15); bot.burst--; if burst==0: burstCd=0.2+rand*0.4; (reset burst = 3+rand*5 when LOS acquired) ``` Reload: if mag==0: bot.reloadT = 2.5+rand; after: mag=full. Player reload: time by weapon: glock 2.2, ak 2.4, m4 3.0? m4 3, awp 3.2 (bolt 1.6 each? Let me keep single reload 2.6), knife 0. During reload, model dip. Bolt: after AWP shot: next shot requires 1.4s bolt anim: implement as shot delay (rate 1.5 covers). Weapon switch: 0.35s anim, no shoot during. OK, HUD update: per-frame update DOM text cheap (cache refs, only update on change for money? just update per-frame fine, except crosshair (style transform) — OK). Radar draw per-frame: cheap (150px, few shapes; walls: pre-render once to offscreen canvas, blit). Killfeed DOM: update on events only. Let me write the "center message" system: msgMain(text, sub, dur): set text, class show, timeout hide. Now main menu design: distinctive opening: not a generic hero. Let's do: full-screen menu with animated background (slow camera auto-orbit around map, fog, maybe running a few bot patrols? Just camera drift + dust particles in air). Title in big condensed type left-aligned with tactical overlay: side select as two big panels (T orange / CT blue), difficulty pills, controls grid, big "ENTER MATCH" button. Add version tag, map name "de_dust_arena". Good. In-air dust particles: Points drifting — nice ambience. Add 400 dust motes, drift slowly, additive faint. Match end screen: stats: rounds won, K/D, accuracy, best streak; big "TERRORISTS WIN" / "COUNTER-TERRORISTS WIN"; rematch button → reset. Also, kill count HUD? Show K/D top-right below feed? Add small "K 12 | D 4". Pause stats too. OK, writing the final code. Careful with: - three r128 API: WebGLRenderer({canvas, antialias}); renderer.outputEncoding = THREE.sRGBEncoding; renderer.toneMapping = THREE.ACESFilmicToneMapping; shadowMap.type = THREE.PCFSoftShadowMap. MeshStandardMaterial. PointLight. SpriteMaterial. Points. All fine in r128. - texture: CanvasTexture, wrapS/T RepeatWrapping, encoding sRGB. View model group is a child of camera; camera added to scene. FOV change: camera.fov → updateProjectionMatrix. Recoil application: pitchVel? Apply directly: pitch += kick; also recoilOffset for auto-recovery? CS doesn't recover. Keep direct, but add slight auto-recovery of 15% after 1s? Keep none; player pulls down. But add: aim smoothing: pitchTarget from mouse; recoil adds to pitch directly (mouse moves further). Mouse: movementX * sens (0.0022). Clamp pitch ±1.55. Grenade throw: pos = camera pos + forward*0.6, vel = forward*13.5 + up*3.5 + player vel*0.5. Projectile update: sub-step: p += v*dt; v.y -= 18*dt; collide: sample point: if isWall(p.x,p.z) or crate → bounce: reflect along normal *0.55, tangential *0.75, bounces++, if |v|<1.5: stop (v=0, resting). Ground y<=r: y=r, vy*=-0.5, vx,vz *=0.8. If bounces>4: fuse accelerates. Normal from collision: determine by comparing prev position cell vs new: if new cell is wall & prev not: axis = which coord changed cell. Simpler: test point ahead: px=p.x+v.x*dt... let me do sub-step with axis separation like player: ``` move x: if wallAt(nx,z) → nx=orig, vx*=-0.55... ``` wallAt checks grid cell + crate AABB at that point (point-in-AABB). Point check r 0.12 offset. Fuse: base 2.0s after throw? CS: ~1.9s total for HE. Let me do: fuse = 2.0 - (bounces>2?0.6:0)? Keep 2.0; flash 1.1; smoke: no explosion, on first bounce or after 1.5s: spawn cloud. Smoke spawn: at proj position (y ~1.2). Flash effect check on detonation: for each agent (player + bots): d = dist(det, eye); if d<22: dir to eye; agentForward dot dir > 0.35? And LOS clear (grid only): blind: player: flashT = 2.2+2.3*(dot^2); bots: blindUntil = now + 1.2 + 1.8*dot^2 * (12/d?). Keep: t = (2.5*(1-d/22)+0.5)*dot. Player flash overlay: div opacity = min(1, flashT/0.6)? White with blur. Also crosshair & HUD dim? Just overlay + hide crosshair while flashT>0.3. Bot blind: while blind: inaccuracy ×7, no auto-target acquisition (fight state maintained but misses), movement continues. OK — player also hears "bang" of flash. Bomb beep: during countdown: interval = 0.4 → 0.12 as t→0; play tick each interval. Explosion: light flash, particles, boom, red vignette, screen shake. Screen shake: shakeT, shakeAmp: camera rot offset random*amp. Landing/breathing? Skip. Sens setting: fixed 0.0022 + menu? Add simple sensitivity slider to menu. Nice touch: 3 presets. OK, and "most realistic physics": bullet penetration ✓, grenade bounce ✓, jump ✓, recoil ✓, falloff ✓. Let me write everything now. I'll be systematic. Also ensure no undefined references. DOM ids: gl, hud, timer, scoreT, scoreCT, roundNum, money, hp, ap (armor), wepName, ammoMag, ammoRes, radar, killfeed, msgMain, msgSub, crosshair (ch lines), dmgdir, channelbar, planthint, spectag, buyhint, buytime, flashfx, menu, buymenu, pause, endscr, statK, statD, statAcc, finalres. Let me write the weapon stat display in the buy menu from WEAPONS: damage (head/torso), fire rate (rps = 1/rate), magazine. Let me write the code — final answer coming. I'll keep functions tight. One more consideration: pointer lock inside iframe — works in sandbox if allowed; assume fine. Three r128 CDN: cdnjs has r128. Use that. Also add window resize handler. Bot model material shared per team (few materials) to save memory. Let me define materials: ``` matT1 (shirt dark green #5c6b3f), matT2 (pants #6b6450), skin (#c8a075) matCT1 (shirt #4a6b8a? CT blue-gray #55708c), matCT2 pants #5a6470, helmet #7c8894 Head skin shared. ``` Bot build: ``` g = Group Legs: L: Box(0.14,0.72,0.16) y 0.36, x ±0.09 (pivot at hip: offset geometry? For anim, create leg group at hip y .72, mesh child offset y -.36, rotate group.x) Torso: Box(0.42,0.5,0.22) y 1.0 Arms: group at shoulder (±0.26, 1.2): mesh Box(0.11,0.5,0.12) offset y -0.22; aim: rotate group x -1.2 (arm forward) Head: Box(0.22,0.24,0.22) y 1.52; helmet: Box(0.26,0.1,0.26) y 1.66 (CT) or cap (T): Box(0.24,0.08,0.24) y 1.65 + brim. Gun: Box(0.06,0.1,0.5) at (0.12,1.25,0.3) forward (local +z is bot's front? Group faces -z? I'll rotate bot group by yaw, forward = (sin?) — I'll define: forward vector = (Math.sin(yaw), 0, Math.cos(yaw))?? In three, yaw 0 → -z forward. So: forward = (−sin(yaw)? Let me define: yaw: 0 → forward (0,0,-1); yaw rotates around Y. forward = (−sin(yaw), 0, −cos(yaw)). So: standard: dir = (sin(yaw)*? ...). Use: yaw around Y with forward = (−sin(yaw),0,−cos(yaw)). At yaw=0 → (0,0,−1) ✓. At yaw=+90° (π/2) → (−1,0,0) → turning left (CS mouse left = yaw increase). Mouse: yaw += mx*sens. Forward (−sin,0,−cos): at yaw π/2: (−1,0,0) left ✓. So bot mesh: front is local -z: gun offset z -0.3 (forward is -z). Group.rotation.y = yaw. ``` Aim pose: lerp arm group rotation.x from 0 (down) to -1.35 (forward). Torso tilt? Skip. Walk anim: leg rotation.x = sin(phase)*0.55 alternating; arm swing small when not aiming. Head look: separate? Keep head in group; aim whole body to target (yaw = atan2 to target: yaw = atan2(-dx? forward (−sin,−cos) = normalize(target-pos): sin = -fx?? Solve: forward=(−sin y, 0, −cos y) = (fx,0,fz) → sin y = −fx, cos y = −fz → y = atan2(−fx, −fz). Player: camera: use Euler YXZ: camera.rotation.set(pitch, yaw, 0, 'YXZ'); forward = (−sin(yaw)cos(pitch), sin(pitch)?? Pitch positive = up: standard: forward = (−sin(yaw)*cos(pitch), sin(pitch), −cos(yaw)*cos(pitch)). Yes. Radar: player arrow rotation: yaw (forward -z = up on radar ✓ since radar z-down = down on screen, x right ✓). Radar draw: ctx: translate(75,75); scale(1.4): wall blit (pre-rendered 100px map with walls #3a4a30, floor transparent bg #232b20cc? Pre-render radar base: 100×100 px canvas: floor #2a3524, wall #55703f? CS radar: bg dark, walls lighter. Site paint with letter. Then per-frame: blit base, draw bomb (red), ally dots (team color: white ally? T ally #f0a030, CT #6db3f2 — draw all allies), player arrow white, and enemies: none (CS radar doesn't show enemies) — but show recent firing markers! Nice: gunfire creates radar ping (yellow dot fading 3s). Killfeed entry: `[T] Name [AK-47] [CT] Name` style: "Name [AK-47] Name", small weapon in middle; headshot icon: small "HS" tag. OK, time to write. I'll write the final HTML now, keeping the code organized. Careful about: - three r128 API: WebGLRenderer({canvas, antialias}); renderer.outputEncoding = THREE.sRGBEncoding; renderer.toneMapping = THREE.ACESFilmicToneMapping; shadowMap.type = THREE.PCFSoftShadowMap. MeshStandardMaterial. PointLight. SpriteMaterial. Points. All fine in r128. - texture: CanvasTexture, wrapS/T RepeatWrapping, encoding sRGB. View model group is a child of camera; camera added to scene. FOV change: camera.fov → updateProjectionMatrix. Recoil application: pitch += kick; keep direct (no recovery), but aimTime resets spread. AimTime: time since last movement (speed<1) & not jumping & not switching. ADS: lerp fov 75→ (awp 34, else 58), view model shift. OK, actually writing. Let me draft the whole file. Also don't forget: external library = three.js CDN script tag; everything else inline. Complete HTML in one code block. One concern: performance of shadow map over 100 units with many boxes: shadow camera ±70 → soft and blocky; fine. Map meshes: row runs → per-row wall boxes: merge consecutive wall cells → each a box mesh (w = runLen, h 4, d 1), plaster texture scaled (repeat w,1). Use a cloned shared texture with per-mesh repeat? Texture repeat is a texture property not mesh → need per-mesh texture clone for different repeat... Or set all runs to use same texture with repeat (4,1), accept slight stretch, or use one BoxGeometry per mesh with UVs scaled by geometry: clone geometry and scale uv. Simpler: one wall texture with repeat(6,2) baked into the texture tile (draw multiple bricks in canvas) → use same texture, size the UVs of each box with per-mesh geometry: create BoxGeometry(w,4,1), then scale uv attribute x by w/2. Write a helper boxMesh(w,h,d,mat,uvScale). Do this: geo = new BoxGeometry(w,h,d); const uv=geo.attributes.uv; for(i): uv.setXY(i, uv.getX(i)*sx, uv.getY(i)*sy). Nice. Floor: big plane with repeat 50,50 texture. Site decal: separate plane with "A"/"B" canvas (transparent). Crate: wood texture box 1.5; some 2-high stack (3.0)? Full 3 blocks sight? Let me stick 1.5 (eye 1.5+: bullet passes over if shot from standing to standing at y 1.5-1.62? Crate top 1.5: bullet y 1.6 > 1.5 → passes over crate → crate blocks movement only + low bullets. Hmm — that ruins cover. Let me make crates 1.65 tall → blocks standing eye (1.5, 1.62) but crouch (1.1) sees/shoots over. Let's do 1.65, blocks sight ✓, crouch can peek over (tactical ✓). Barrel: cylinder h 1.4 r 0.35 → top 1.4 < 1.5: see over, block bullets? At eye 1.5 > 1.4 → see over & shoot over: barrel = partial cover (blocks legs). Fine and realistic-ish. Bot eye y: 1.5; player eye 1.62 standing / 1.1 crouch. Bot vs crouch player: bot bullets at 1.5 pass over crouched player's head (1.05)?? Aim at target: bot aims at target head pos (knows crouch? Yes — use player's actual head y). OK, aim directly at player sphere → hits. Bot LOS to crouching player behind crate: LOS from 1.5 to 1.1: line at crate x: y ~1.3 < 1.65 → blocked ✓ correct. Player behind crate crouching vs bot: bot bullet aimed at player head (1.05): line at crate: ~1.3: crate blocks (ray 3D slab vs crate 0..1.65) ✓. Crate LOS for grid ray: my grid DDA is 2D only — for crate LOS I'll need to handle 3D in losClear: line segment vs crate box (2D slab for xz + y check: compute y at closest point? Line segment vs AABB 3D proper test (slab with y range 0..1.65). I'll write a segmentAABB3D. Player world raycast includes crate slab 3D ✓ (already planned). Bots also blocked by smoke: segment vs smoke sphere (2D distance from center < r & y within? smoke y 0..3: yes) → blocked. OK — write. Also add a small "objective" text at top: "Defend site" / "Plant the bomb", updated. Also handle: player is T and drops bomb (carrier death handled). Player throws? No drop. If player (T) dies before plant: nearest T bot gets bomb (teleport logically). Bomb on map: mesh at plant/drop position; LED blink: red light? Small emissive sphere, toggling. Let me define bomb state: {holder: agentRef or null (dropped at pos), planted: bool, pos: {x,z}, t: 40, channel: 0, planter/defuser...} Player channel: E hold: if plantable: channel += dt; else decay channel. UI bar. Bot plant: state machine: if carrier & in zone: if last 1s no visible enemy near site? Simplify: start channel immediately (3s), if enemy in LOS < 15m → interrupt (channel=0, back to moving). Bot defuse: 2 nearest CTs: state defuse: move to bomb; within 1.4: channel += dt; if enemy visible within 12 & not defusing priority... keep defusing (committed). Time to write. Generate final answer. Also include "click to lock pointer" overlay on game start? Menu click → request lock. I'll also write the player bot list unified `agents` array with player flag. Player agent: {team, name:'You', isPlayer:true,...} in agents for shared logic (LOS lists, kill credit). OK, code: Let me actually write it out now, in full, with attention. (Will write final file in answer.) Some numerical constants: - sens 0.0021 - FOV 75 - walk 4.6, sprint 5.6, crouch 2.6, air control - gravity 20, jump 7.4 Recoil kick: rifle: pitch kick ~0.011 rad? 0.6°/shot at 10rps → 6°/s upward — CS-like. AK 0.012, M4 0.009, pistol 0.006, AWP 0.05. Yaw random ±0.004 (AK drift pattern: add small sine pattern by shot count: patternY = sin(shotCount*0.9)*0.003). Spread values: current spread (rad): base: hipfire: weapon.spread; ADS: weapon.adsSpread. current = lerp by adsAmount + moveFactor: speed>0.5: (speed/maxRun)*weapon.moveSpread*(1-ads*0.5) + jump: 0.05 + bloom (decays 3.5/s? bloom *= exp(-6dt) plus subtract) + aimTime: if aimTime<0.35: (0.35-aimTime)*0.15 + bot strafe irrelevant for player. knife: 0. Crosshair px: H * spread / (2*tan(fov/2)) * (1/?) — screen angle: spread rad = angle; on screen at distance: px offset = spread * (H / (2*tan(fov/2)))? Because H px corresponds to 2*tan(fov/2) rad in height → px per rad = H/(2 tan(fov/2)). Gap px = spread * that. Clamp 2..120. Good. Aim time: increases when speed<0.6 & onGround & not switching; else 0. Bloom: per-shot += weapon.bloom; decay: bloom = max(0, bloom - dt*(weapon.bloom*4 + 0.01)). Player full-auto fire check in update: if mouseDown & cur auto & canShoot → shoot. canShoot: !reloading && switchT<=0 && cooldown<=0 && (mag>0 || (click → empty sound)). Reload: R: if mag0 & !reloading: reloading=true, t=dur. On complete: transfer. AWP bolt: on shot: nextCooldown = rate. Switch animation: switchT 0.3 → model y drops. OK, buy menu build: ``` items = [ {id:'mp9', cat:'rifles', ...} ] Render per side. On click: if freeze & money>=price & valid → purchase. Purchase logic: primary: set P.primary=id (ammo full), money-= secondary: set P.pistol armor: P.armor=100, helmet=false (keep?) price 650; armor+helmet: armor 100 helmet true 1000 (only if not owned? allow upgrade) defuse: P.kit=true grenades: P.gr[id]=1 (replace) ``` Bot buy per round (simulated): ``` function botBuy(b){ b.money... let p=null; if(b.money>= (side T?2700:3100) && Math.random()<0.9) p= side T?'ak':'m4'; else if(b.money>=1250&&Math.random()<0.8) p='mp9'; if(p==='ak'|'m4' && b.money>4600 && Math.random()<0.25) p='awp'; b.primary=p; b.pistol= side==='t'?'glock':'usp'; if(b.money>900) {armor 100; helmet 50%} kit: CT 30%. b.money -= cost (track for realism, keep cap). } ``` Bot default money 800 & carry. Round intro message: side-specific: "TERRORISTS: Plant the bomb" etc. Objective text update: T: if !planted "PLANT THE BOMB" (player holding? "YOU CARRY THE BOMB"), else "DEFEND THE BOMB"; CT: if !planted "DEFEND THE SITES" (defuse "DEFUSE THE BOMB" if planted). OK, write final. Also don't forget the user's note: include the full HTML in the same code block including script/link tags. Don't mention the iframe. Response language: English. Let me just write the whole thing now. I'll be careful to keep every referenced function defined. Sections and rough line budget (total probably ~2000 lines; that's fine). Let me start writing the final file text. ```html CS2 // BROWSER EDITION — de_dust_arena ``` Then HUD markup: ```html

``` Hmm, layout: timer big top center; score boxes both sides. ```

? No

...4 + dot + hitmark

PLANTING

100

$ 800

BUY TIME — PRESS B

AK-47

30 / 90

RELOAD [R]

SPECTATING

YOU ARE CARRYING THE BOMB

``` Crosshair: container 0x0 at center; lines positioned with transforms. Menu: ```html

(transparent, show 3D behind)

COUNTERSTRIKE2 // BROWSER EDITION

MAP de_dust_arena · 5v5 · FIRST TO 8

TERRORIST

Plant the C4 on A or B

$2 700 · AK-47

...

DIFFICULTY: 3 pills

SENSITIVITY: pills

grid of keys

big side art? Maybe stats teaser / big "8 ROUNDS" ... Maybe vertical side banner with rotating weapon? Keep: right column with "ROUND INFO" card: objectives per side, weapon loadout, economy rules. Fills nicely.

``` Menu background: render 3D scene behind (menu state: slow camera orbit) — nice "alive" feel. Dust particles visible. Buy menu: ```html ``` Tab switch with JS; item cards clickable (pointer-events auto while open; pointer lock released when buy open? Keep locked? Keep lock & just click with mouse... pointer locked → can't click. So buy menu navigated by mouse keys? CS:GO buy menu is mouse. With pointer lock, no cursor. Options: release pointer lock when opening buy (menu appears, cursor usable, game frozen). Do that: openBuy: document.exitPointerLock; pause input but keep game running? Freeze? CS: buying during freeze time keeps moving (bots frozen). Pause bots during buy open? They're frozen anyway (freeze time). So: open buy: unlock pointer, show; close: re-request lock. If player dies / round ends during buy: force close. Edge: exitPointerLock triggers pause overlay → suppress pause when buyOpen. Pause: ```html ``` End screen: ```html ``` OK, JS. I'll write it out now, section by section, final. ```js 'use strict'; /* ---------- utils ---------- */ const $=id=>document.getElementById(id); const clamp=(v,a,b)=>vb?b:v; const lerp=(a,b,t)=>a+(b-a)*t; const rand=(a=1,b)=>b===undefined?Math.random()*a:a+Math.random()*(b-a); const v3=(x=0,y=0,z=0)=>new THREE.Vector3(x,y,z); ``` Audio: ```js const AudioX={ ctx:null, master:null, noise:null, init(){ if(this.ctx) return; const C=window.AudioContext||window.webkitAudioContext; this.ctx=new C(); this.master=this.ctx.createGain(); this.master.gain.value=0.55; this.master.connect(this.ctx.destination); const len=this.ctx.sampleRate*1; const buf=this.ctx.createBuffer(1,len,this.ctx.sampleRate); const d=buf.getChannelData(0); for(let i=0;i1.4 → spawn smoke & remove. ``` solidAt(x,z,r): grid cell at (x±r) or crate (x,z) point in AABB (any y< h? projectile y max ~3 → if y < solid.h → blocked; else pass over? Crate 1.65: projectile above passes over ✓ correct). Explosion: ``` function heExplode(pos){ boom sfx; light flash (temp PointLight, fade .15s); spark burst 40; for each agent: d=dist(pos, eye); if(d<9.5): los = grid clear? if blocked: dmg*=0.3; dmg = 115*(1-d/9.5) (+ min 10 if d<2); damage agent (no armor? CS: HE ignores armor? Partially — apply normal pipeline, no part (body)) → treat as body. shake if player close. } ``` flashDetonate: ``` pop sfx; white flash at position (sprite flash 60ms). For each agent: d=dist(pos,eyePos); if d<20: dir = norm(eye−pos); dot = dir·agentForward; if dot>0.4 && gridLOS(pos,eye): amount = dot * (1 − d/20); player: P.flashT = max(P.flashT, 0.6+2.6*amount); bot: bot.blind = max(blind, 0.5+2.2*amount); ``` Smoke cloud: ``` smokes=[]; function spawnSmoke(pos){ group of 12 sprites (random in sphere r 4), scale anim t 0→1 (1.2s), life 18s, fade last 2.5s; smokes.push({x,z,r:6.5,t:18, mesh:group}) ; update: fade, remove (mesh remove) } ``` Sprite material: radial gradient white-gray texture, opacity .5, depthWrite false. Bots' LOS uses smokes. Player world raycast: ``` function castBullet(ox,oy,oz,dx,dy,dz, ignore){ // returns {t,x,y,z, nx,ny,nz, mat, target:{agent, part}, } let bestT=200, res=null; // grid const g=rayGrid(ox,oz,dx,dz,bestT); if(g && g.t0){ const ab=dmg*0.5; const am=Math.min(a.armor,ab); a.armor-=am; dmg-=am; } } dmg*=clamp(1 - 0.3*(dist/60), 0.7,1); a.health -= dmg; if(a.isPlayer){ damage indicator direction to attacker; } blood particles at hit point (for bot: hitpos param) if(a.health<=0) kill(a, attacker); } ``` kill(): ``` a.dead=true; a.deadAt=now; credit: attacker.stats? if attacker isPlayer: STATS.k++, money+300 (AWP 1000? use 300; keep +300), streak++ feed: `${attacker.name} [${weapon}] ${a.name}` (+HS tag) if(a.isPlayer): P dies → spectate setup, sfx death, streak=0, d++ if(a isBot): ragdoll anim if(bomb.holder===a): bomb drops at a's pos (bomb.holder=null, planted=false, x,z set); if T round: assign new holder (another T bot) after 0.5s? Actually CS: C4 goes to another T. Immediate assign to nearest T bot if any. if(a.team CT): reassign defuse roles. sound: distant gunshot for "body fall"? ``` Ragdoll: model.rotation.x → ±π/2 over 0.35s, pos y → 0.35? Keep body lying: rotate around z? Fall backward: rotate around local x axis: group.rotation.x = ±1.5; y stays 0 (geometry is bottomed at 0) → rotate around center makes legs clip through floor. Standard trick: shift group position up and rotate around feet? Set group's pivot at feet: children offset up (they already are, since group at feet y 0) → rotate group.x = -1.5 (fall back): head goes back and up? Rotate -90° around x (feet at origin): torso extends along -z direction lying on floor ✓ (top falls back if rotating backward around x). Random left/right lean (rotation.z small) & random yaw. Also sink after 12s: y -= dt. Fade: after 15s material opacity? Skip fade (map gets bodies — fine) — but remove mesh after 20s. Spectate: on player death: pick random alive teammate → cam mode 'spec': each frame: lerp camera pos to their head (x, 1.65, z), look to their yaw/pitch-ish (bot pitch 0). Show spectag name. If no teammates alive: slow orbit around bomb/death pos? Edge OK: use killer? Just stay at death pos. Bots update: ```js function updateBots(dt){ for(const b of bots){ if(b.dead){ ragdoll anim; continue; } b.blind=Math.max(0,b.blind-dt); // combat target search if(b.thinkT<=0){ b.thinkT=0.12+rand(0.18); think(b); } // movement followPath(b,dt); // separation // combat fire combatFire(b,dt); // animation botAnim(b,dt); } } ``` think(b): ``` if frozen: idle (still path? freeze: bots don't move) → return. // find visible enemy let best=null, bd=60; for(const e of enemies(b.team)){ if(e.dead) continue; const d=dist(b,e); if(d>55) continue; if(gridLOS(b.eye, e.eye) && !smokeBlocks) { if(d10: point = carrier pos (follow, capped) else anchor near carrier's site route (pick from mid/long/doors points) } else { anchor inside site } } else { // ct if(plant){ if(b.defuser) return {x:bomb.x,z:bomb.z}; else anchor site/mid } else { anchor from CT anchors (assigned at round start: mix of site defenders + mid) } } } ``` Assignments at round start: ``` T bots: carrier (if player not T): others: escort / anchor. CT: 4 anchors: 2 near A, 2 near B or mid: pick: ct anchors: A:2, B:2 (rotate per round: sometimes 1/1/2 mid). Defusers when plant: 2 nearest alive CTs get defuser flag (reassign on death). ``` Movement followPath: ``` if(b.path && b.pi4000 break; return points (cell center +0.5) } ``` 10k cells, fine. LOS: ```js function gridLOS(x1,z1,x2,z2){ const g=rayGrid2D(x1,z1,dir, dist); return !g || g.t>dist-0.1; } // 2D DDA function smokeBlocks(x1,z1,x2,z2){ for sm: segPointDist < r-0.5 → true } function fullLOS(a,b): grid + smoke + (crate? crate 1.65: only blocks if y line goes below 1.65 at xz point — line y from 1.5 to 1.5 (bot) always 1.5 <1.65 → crate blocks: include solid segment test with y=1.5 line) — include solids test: segment at y1,y2 against solid AABB. ``` Bot LOS: eye 1.5 (y both) → solids: y line 1.5: if y< s.h: blocked → all crates (1.65, 3.3) block, barrel (1.4) doesn't ✓. combatFire(b,dt): ``` const tgt=b.target; if(!tgt||tgt.dead){ b.burst=0; return; } const d=dist(b,tgt); const los=fullLOS(...) if(!los){ return; } b.aimAt(tgt) (yaw lerp fast: b.yaw = lerpAngle(b.yaw, yawTo, 1-exp(-12dt))) if(now0){b.reloadT-=dt; if<=0 {b.mag=w.magSize}} else b.reloadT=1.8+rand(); knife if d<2.2: b.knT-=dt... damage 40 } else { if(w.auto){ if(b.burstCd>0) b.burstCd-=dt; else { fire(); b.burst--; if(b.burst<=0){ b.burst=3+ (rand()*4|0); b.burstCd=0.18+rand(0.45);} } } else { if(b.burstCd>0)b.burstCd-=dt; else {fire(); b.burstCd=0.13+rand(0.08); if(rand()<0.3){b.burst=2; b.burstCd+=0.1;} } } } ``` fire(): compute inaccuracy: ``` let acc = diff.acc + d*0.015 + (b.moving?0.8:0) + (b.blind>0? 5:0); // degrees ang = rand*2π, m = acc*deg2rad target point: tgt head position (y: if player crouch: 1.1:1.6? use tgt.eyeY) + small random vertical. dir = norm(tgtPos - eye) + tangents*... Simpler: aimDir = norm(tgtPos-eye); add random perpendicular: aimDir += (up*randn + right*randn)*m; renormalize. raycast from eye with shooterTeam b.team. Apply damage with falloff & part & armor. Tracer from bot muzzle (eye - up? eye + forward*0.3 + right*0.15) to endpoint. Impact spark if wall hit. Sound at bot position (auto-attenuated) (dist to player computed). b.mag-- ``` Bot tracer: same system (points line) — from muzzle (b eye + fwd*0.25 + right*0.18) to hit point. Also bots occasionally use grenade? Add: if T bot has flash (gr) & d 12..30 & no LOS & LOS to corner point? Too complex; skip bot grenades (players have them; bots affected by player's). Actually, let's have bot occasionally throw flash before peek — skip. Fine. Bot money & loadout per round as planned. Bomb update (live state): ``` if(!bomb.planted){ // bot carrier behavior handled in think (carrier path to site) // bot plant: carrier & in site zone & no visible enemies within 20? → channel } else { bomb.t -= dt; beep scheduling; if t<=0 → explode: T wins. // bot defuse } Player channel (E) in player update. ``` Player: ``` E held & canPlant: P.channel+=dt else decay fast (channel=max(0,channel-dt*3)) canPlant = isT && bomb.holder===P && !bomb.planted && inSite(P) canDefuse = isCT && bomb.planted && dist(P,bomb)<2.2 channel target: plant 3s → bomb.planted=true, bomb.x/z=P pos, sfx, msg "BOMB PLANTED", money+300. defuse: 5s or kit 1.5 → CT win. Show plantbar with % & label. If move >0.5 → decay? CS: plant breaks if you move. Let me allow (channel pauses if moving fast: if speed>2, don't add). ``` Bot carrier plant: ``` if(b.holdsBomb && !planted && inSite(b) ){ if visible enemies within 18 → channel=0 (and maybe back off); else channel+=dt; if>=3 → planted } ``` Round check each frame (live): ``` const tAlive=aliveCount('t'), cAlive=aliveCount('ct'); if(tAlive===0 || cAlive===0){ endRound(cAlive===0 ? 't':'ct', 'ELIMINATION') } else if(RD.time<=0){ endRound(bomb.planted?'t':'ct', bomb.planted?'TIME':'TIME OUT') } Explosion → endRound('t','BOMB EXPLODED') Defuse → endRound('ct','DEFUSED') ``` endRound(winner, how): ``` RD.state='roundEnd'; RD.endT=4.5; RD.winner=winner; score++; payout: each alive? all agents: win? 3250:1400 (only for agents including player) msg: side win name + how; horn. After endT: if score >=8 → matchEnd screen, else startRound(). ``` startRound(): ``` RD.round++; RD.state='freeze'; RD.freeze=12; RD.time=115; bomb={holder:null,planted:false,t:40}; P reset: pos CT? T spawn (random), hp 100, armor 0 (reset), dead=false, channel 0, ammo mags refill (res persist), weapon keep, gr keep? grenades persist (CS: yes, grenades persist? I think grenades persist in CS:GO. Keep.) Bots: reposition (spawn points), hp 100, botBuy each, reset model, reset channel, reset path; assign roles: carrier: if P.team==='t' → P holds bomb; else random T bot. CT defusers: nearest-2 logic later when plant (compute on plant). msg: `ROUND ${n}` + objective; horn. ``` HUD objective text update per state. Timer display: freeze → show "BUY" + freeze seconds? CS shows freeze countdown? Show "0:12"? Display round time 1:55 and during freeze show "BUY TIME" pulsing. Timer shows RD.time (static 1:55 during freeze). Match end: show end screen: title "TERRORISTS WIN THE MATCH" etc; stats: K/D/ACC/HS%/best streak; button rematch (reset score & money 800, round 1) / menu. Radar update as planned. Killfeed: div per entry, add class, timeout 5s remove. Now view model build: ```js function buildViewModel(weaponId){ const g=new THREE.Group(); const mBody=matVM1 (#2b2e33 dark), mGrip(#3a352c), mMetal(#1c1e22), mWood? AK wood grip. rifle: body: Box(0.07,0.11,0.55) at (0,0,-0.15) barrel: Box(0.035,0.035,0.35) z -0.55 mag: Box(0.05,0.18,0.09) at (0,-0.12,-0.1) rotate x 0.4 (AK curved? straight) stock: Box(0.06,0.09,0.3) z 0.22 sight: Box(0.03,0.05,0.12) top y 0.09 awp: longer barrel + scope: Cylinder(0.035,0.035,0.3) rot x π/2 at y 0.11 + stock. pistol: body (0.05,0.09,0.28) + grip (0.05,0.14,0.07) tilt. knife: blade Box(0.012,0.04,0.4) silver + handle. grenade: sphere .07 + lever. glove: 2 boxes near bottom. } ``` Position: group at (0.28,-0.32,-0.5) relative to camera; ads: lerp to (0,-0.22,-0.45) & scale? Rifle ADS center (0,-0.24? sight center: (0,-0.26,-0.4)). AWP: (0,-0.27,-0.42). Muzzle position for tracer origin: compute: camera world pos + forward*1.0 + right*0.2 + down... approximate: muzzleWorld = camPos + f*0.9 + r*0.18 - up*0.15 (rifle) — enough. VM anim vars: vmRecoil (0..), vmBob phase, vmSwitch, vmReload progress (0..1 → dip sin curve), adsT (0..1). Per frame: ``` vm.position.x = base.x + sin(bob)*0.004 (when moving) vm.position.y = base.y - Math.abs(sin(bob))*0.006 + reloadDip + switchDrop vm.rotation.x = vmRecoil*0.35 + reloadRot lerp to ads position by adsT. ``` vmRecoil decays 10/s. Also slight roll on strafe: vm.rotation.z. Flash sprite at muzzle: sprite with radial texture, visible 35ms, random rotation & scale; light: 1 PointLight reused, intensity spike 6 → decay. Tracers: pool of Line objects: create BufferGeometry with 2 points; set positions; visible true; life 0.05s → hide. Additive material, color #ffd9a0, opacity by life. Particle system: ``` const PMAX=600; positions Float32Array, colors, life[], vel[], grav[], size? THREE.Points with PointsMaterial({size:0.07, vertexColors:true, transparent:true, opacity:0.9, blending:Additive, depthWrite:false}) spawn(pos, vel, color, life, count) update: integrate, life-=dt; dead → y=-999. ``` Blood: second Points, normal blending, color #8a1f14, size 0.06, grav stronger. Dust ambience: Points 350, slow drift, wrap in a 100 box, size 0.12, opacity 0.18, color #e8dcc0, additive? Normal. Muzzle light & explosion light: 2 pooled PointLights. OK — also "hit marker": DOM X shape at crosshair, shown 90ms (red on kill / headshot). Damage direction: div #dmgdir: full-screen: red arc: use conic-gradient mask? Simple: full-screen div, background: conic-gradient(from angle-40deg, transparent, rgba(200,0,0,.35) 60deg, transparent), set rotation on center? Implement: div positioned center, size 100vmax, background conic-gradient(transparent 0 30deg, rgba(180,20,20,.3) 30deg 110deg??, transparent), transform rotate(angle) scale by fade. OK. Screen vignette on low HP: red radial overlay, opacity by (1-hp/100)*0.5. Now buy menu JS: ``` function openBuy(){ if(RD.state!=='freeze') return; RD.buyOpen=true; document.exitPointerLock(); build grid; show. } closeBuy(){ RD.buyOpen=false; hide; re-request pointer lock (if in match & alive) } Item render: tab filter; card: name, price, stat mini bars (dmg, rate, mag) or desc for gear; on click → tryBuy. ``` tryBuy(id): check money & freeze; effect; sfx buy; money display; disable card if can't afford (grey). Also quick "default kit" for buy? Skip. Menu side selection: click card → selected class; playBtn starts match with side & difficulty & sens. matchStart(): ``` initAudio; reset score, money 800, round 0, stats; hide menu; show hud; create bots (5v5: 4 ally bots + 5 enemy bots); startRound(); requestPointerLock; ``` Bots count: allies 4 + player = 5 vs 5. Menu background: render scene with slow orbit camera (state 'menu'): camera pos rotates around (0,20,0) r 55 h 30 looking at center; bots? No (they exist during match only). Menu shows empty map + dust + fog — nice. After match ends → back to menu: remove bot meshes, keep map. Pause overlay: on pointerlockchange: if !locked && RD.state in (freeze,live) && !buyOpen && !menu → paused=true, show. Resume → click → requestPointerLock (locked event → paused=false). Also "Main Menu" → cleanup. Careful: requestPointerLock must be called from user gesture — click ✓. Pointer lock loss also on Esc — browser fires pointerlockchange. Also handle: user clicks canvas during live & unlocked (e.g., after pause) → resume (request lock, hide pause). Now, HUD update per frame (alive & hud shown): ``` timer text: fmt(RD.time) (or freeze show '1:55' & buytime overlay) money, hp, ap, ammo (current weapon), wepname, objective, carryhint (if P holds bomb), spectag, k/d text. crosshair: hide if: dead, flash>0.25, vm is knife? knife no crosshair (CS: none), AWP ADS → scope? Just show a dot. channel bar. ``` Ammo display: current weapon: if grenade slot: count; knife: "—". OK, writing. Also add a small "objective" text at top: "Defend site" / "Plant the bomb", updated. Also handle: player is T and drops bomb (carrier death handled). Player throws? No drop. If player (T) dies before plant: nearest T bot gets bomb (teleport logically). Bomb on map: mesh at plant/drop position; LED blink: red light? Small emissive sphere, toggling. Let me define bomb state: {holder: agentRef or null (dropped at pos), planted: bool, pos: {x,z}, t: 40, channel: 0, planter/defuser...} Player channel: E held: if in zone & (plant: has bomb & not planted; defuse: !teamT & planted & near bomb): channel += dt (must stay within 2m? CS: within zone); on release/interrupt: decay channel quickly. Complete → plant/defuse. Also knife required? CS requires knife out (for plant) — let me allow any weapon, simpler. Plant visual: bomb box at pos (small black box with red blinking LED) + progress; beep; planted: red LED accelerates. Also site paint: big floor decal with letter. Spectate: after death: spectateT; pick random alive teammate → camera lerp to head pos + look their yaw; show name tag. If all teammates dead? (team already lost?) Camera at own death pos looking at killer? Or slow orbit. Edge OK. Now, writing everything. I'll also add small "instructions" in menu. Performance target: fine. Edge: pointer lock & pause: on 'pointerlockchange' lost during live → paused=true show overlay. Resume button: requestPointerLock. Audio: resume ctx on user gesture (menu click). Now, actually write it. I'll be careful to keep every referenced function defined. Some numeric constants: - sens 0.0021 - FOV 75 - walk 4.6, sprint 5.6, crouch 2.6, air control - gravity 20, jump 7.4 Recoil kick: rifle: pitch kick ~0.011 rad? 0.6°/shot at 10rps → 6°/s upward — CS-like. AK 0.012, M4 0.009, pistol 0.006, AWP 0.05. Yaw random ±0.004 (AK drift pattern: add small sine pattern by shot count: patternY = sin(shotCount*0.9)*0.003). Spread values: current spread (rad): base: hipfire: weapon.spread; ADS: weapon.adsSpread. current = lerp by adsAmount + moveFactor: speed>0.5: (speed/maxRun)*weapon.moveSpread*(1-ads*0.5) + jump: 0.05 + bloom (decays 3.5/s? bloom *= exp(-6dt) plus subtract) + aimTime: if aimTime<0.35: (0.35-aimTime)*0.15 + bot strafe irrelevant for player. knife: 0. Crosshair px: H * spread / (2*tan(fov/2)) * (1/?) — screen angle: spread rad = angle; on screen at distance: px offset = spread * (H / (2*tan(fov/2)))? Because H px corresponds to 2*tan(fov/2) rad in height → px per rad = H/(2 tan(fov/2)). Gap px = spread * that. Clamp 2..120. Good. Aim time: increases when speed<0.6 & onGround & not switching; else 0. Bloom: per-shot += weapon.bloom; decay: bloom = max(0, bloom - dt*(weapon.bloom*4 + 0.01)). Player full-auto fire check in update: if mouseDown & cur auto & canShoot → shoot. canShoot: !reloading && switchT<=0 && cooldown<=0 && (mag>0 || (click → empty sound)). Reload: R: if mag0 & !reloading: reloading=true, t=dur. On complete: transfer. AWP bolt: after AWP shot: next shot requires 1.4s bolt anim: implement as shot delay (rate 1.5 covers). Weapon switch: 0.35s anim, no shoot during. OK buy menu build: ``` items = [ {id:'mp9', cat:'rifles', ...} ] Render per side. On click: if freeze & money>=price & valid → purchase. Purchase logic: primary: set P.primary=id (ammo full), money-= secondary: set P.pistol armor: P.armor=100, helmet=false (keep?) price 650; armor+helmet: armor 100 helmet true 1000 (only if not owned? allow upgrade) defuse: P.kit=true grenades: P.gr[id]=1 (replace) ``` Bot buy per round (simulated): ``` function botBuy(b){ b.money... let p=null; if(b.money>= (side T?2700:3100) && Math.random()<0.9) p= side T?'ak':'m4'; else if(b.money>=1250&&Math.random()<0.8) p='mp9'; if(p==='ak'|'m4' && b.money>4600 && Math.random()<0.25) p='awp'; b.primary=p; b.pistol= side==='t'?'glock':'usp'; if(b.money>900) {armor 100; helmet 50%} kit: CT 30%. b.money -= cost (track for realism, keep cap). } ``` Bot default money 800 & carry. Round intro message: side-specific: "TERRORISTS: Plant the bomb" etc. Objective text update: T: if !planted "PLANT THE BOMB" (player holding? "YOU CARRY THE BOMB"), else "DEFEND THE BOMB"; CT: if !planted "DEFEND THE SITES" (defuse "DEFUSE THE BOMB" if planted). OK, writing final. Also don't forget the user's note: include the full HTML in the same code block including script/link tags. Don't mention the iframe. Response language: English. Let me just write the whole thing now, being careful to keep every referenced function defined. Sections and rough line budget (total probably ~2000 lines; that's fine). Let me start writing the final file text. Some numerical constants: - sens 0.0021 - FOV 75 - walk 4.6, sprint 5.6, crouch 2.6, air control - gravity 20, jump 7.4 Recoil kick as before. Spread values as before. Crosshair px as before. Aim time as before. Bloom as before. Player full-auto fire as before. canShoot as before. Reload as before. AWP bolt as before. Switch as before. Buy menu build as before. Bot buy as before. Round intro as before. Objective text as before. OK, writing final. Also don't forget: include the full HTML in the same code block including script/link tags. Don't mention the iframe. Response language: English. Let me just write the whole thing now, being careful to keep every referenced function defined. One concern: performance of shadow map over 100 units with many boxes: shadow camera ±70 → soft and blocky; fine. Map meshes as before. Also add: subtle post: vignette div (radial-gradient) static, opacity 0.35 — cheap filmic. Also low HP red pulse. OK, let me write it. I'll generate the answer. Actually, one simplification for bot aim pitch: bot yaw to target; shooting direction computed in 3D (includes correct pitch) ✓ (we compute 3D dir to target sphere) — visual aim: set model arms up; enough. Bot strafe: while fighting: strafeT -=dt; if<0 {strafeDir*=−1; strafeT=0.8+rand(1.2)}; move perpendicular: dir = (−f.z? perpendicular = (−sin(yaw+π/2)...) use right vector r=(cos y,0,−sin y) * strafeDir * 2.0 speed; but maintain distance: if d>20: add approach 30% f; if d<6: back off. Combined desired vel; moveEntity circle. Also keep inside: A* path ignored while fighting — might strafe into wall: collision resolve handles (sliding) ✓. Player spread uses P.speedXZ. Player fire uses P.pitch/yaw for direction. Also: after kill, small zoom punch? Skip. Also "hit sound on hit" (hit sound to attacker = player): tick. Bot hit by player: blood + tick to player; kill: red tick. Player hit by bot: direction indicator + red flash vignette pulse + thud? Add small "impact" sound (low thump). Death: bigger sound + 1s red overlay. Now writing — final. (I'll also add a title bar comment at top of file.) When writing bot build meshes: create per team material; store references for fade? Skip. Also ensure agents array for cast: `const agents=[P]` plus push bots on match start; reset on new match: rebuild. allAlive(team) etc. Kill credit weapon: pass weapon name string. Let me write feed html: `

${att.name}${wep}${hs?' ⛨?':' '}${v.name}

` use "✕" icon? Use text "[AK-47]". HS: add 'HS' badge. Time to write. Careful to keep it a valid file. I'll also add a simple "aim assist"? No (realism). Final check on freeze: bots don't move & don't shoot; player can look & buy; message "BUY TIME"; after 12s: "GO". Round number & score shown top center. OK, write the file. (When writing, I'll define functions before use in execution order: everything defined before the final start loop; event handlers reference defined functions — script executes top to bottom; function declarations hoist ✓ use function declarations.) Let me write it. Here's a complete, from-scratch CS2 — `de_dust_arena` — in one file: full 5v5 rounds with bot AI (pathfinding, reactions, hearing, planting/defusing), an economy + buy menu, AK/M4/AWP/MP9/pistols with real recoil, spread bloom and wall penetration, HE/flash/smoke grenades with projectile physics, a plantable C4 with ticking, radar, kill feed, procedural audio, and a dust-themed lit map with shadows, fog and decals. ```html CS2 // BROWSER EDITION — de_dust_arena

BUY EQUIPMENT

Tyr