{"slug": "cs-style-browser-fps", "title": "CS-style browser FPS", "summary": "A developer has created a fully playable, single-file browser-based tactical bomb-defusal first-person shooter using Three.js, complete with procedural textures, audio, and enemy AI. The game features a compact desert-town map called \"Dusttown,\" enemy bots with finite-state machine behavior including patrol, alert, engage, and hunt states, and a defuse game mode with a 90-second round timer. All assets—including textures, models, and sound effects—are generated procedurally within the script, with no external files required.", "body_md": "Copy everything below the line into a fresh Claude conversation.\n\nWrite a complete, production-ready, single-file HTML/JavaScript application implementing a playable, first-person **tactical bomb-defusal shooter mini-game** in the browser using Three.js — an original game inspired by classic tactical FPS gameplay (do NOT use any Counter-Strike names, maps, logos, or assets; invent original equivalents).\n\n- Do NOT use any external asset URLs (no external .gltf, .obj, .jpg, .png, or audio files) as they can break or fail CORS. All textures, models, and sound effects must be generated procedurally within the script (HTML Canvas for textures, mathematical geometry for meshes, Web Audio API oscillators/noise for gunshots, footsteps, and UI sounds).\n- Do NOT write placeholder comments, truncated code blocks, \"// TODO\" markers, or \"left as an exercise\" shorthand. Every function, class, and system must be written out in its entirety.\n- The output must be a single, copy-pasteable HTML file that runs perfectly immediately when opened in a browser.\n\n-\n**Libraries**: Load Three.js via a reliable CDN (cdnjs or unpkg). Implement PointerLock-style mouse look manually if PointerLockControls is unavailable in the chosen build. -\n**The Map — \"Dusttown\" (original layout)**:- A compact desert-town arena: a central courtyard, two flanking corridors, crates and low walls for cover, one bombsite marked with painted floor decals, and a spawn room for the player.\n- Procedural textures: sandstone walls (canvas noise + brick seams), concrete floor with grime, wooden crates with plank grain. Apply subtle roughness variation so surfaces don't look flat.\n- Represent the map as a tile/grid data structure so collision detection and AI navigation share the same source of truth.\n\n-\n**Enemy Bot AI — the centerpiece**:- Spawn 3–5 enemy bots with capsule/low-poly humanoid bodies in a distinct enemy color.\n- Finite-state machine per bot: PATROL (follow waypoint graph) → ALERT (heard gunfire, move toward sound) → ENGAGE (line-of-sight confirmed: strafe, shoot, take cover) → HUNT (lost sight: search last known position).\n- Line-of-sight via raycasting against map geometry. Bots must NOT see through walls.\n- Humanized imperfection: reaction delay (200–500 ms), aim spread that tightens over sustained fire, occasional repositioning. The bots should be challenging but clearly beatable.\n- Waypoint-graph pathfinding (A* over the waypoints) — bots must navigate around obstacles, never walk through crates or walls.\n\n-\n**Player Controller & Gunplay**:- WASD movement with acceleration/friction, Shift to walk quietly (reduces noise radius the bots can hear), Space to jump, mouse to aim, click to fire, R to reload.\n- One rifle: 30-round magazine, recoil pattern that climbs and drifts, tracer lines, procedural muzzle flash (sprite + point light flicker), hit markers, and damage falloff with distance.\n- Headshot multiplier using a simple head hitbox on each bot.\n\n-\n**Game Mode — Defuse**:- Objective: fight through the bots, reach the bombsite, hold E for 5 seconds to defuse before a 90-second round timer expires. Defusing is interrupted if the player takes damage.\n- Win state (bomb defused or all bots eliminated), lose states (player dies or timer expires), with a round-end screen showing time, accuracy, and kills, plus a restart button.\n\n-\n**Game Feel & HUD (this is what makes it feel real — do not skimp)**:- Screen shake on taking damage, subtle viewmodel sway and bob while moving, crosshair that expands with movement/fire, red directional damage indicators, low-health vignette.\n- HUD: health, ammo counter, round timer, kill feed, and objective text — all drawn with crisp DOM/CSS overlay, styled like a modern tactical shooter (clean monospace numerals, high contrast).\n- Procedural audio for every action: distinct gunshot per source, reload clicks, footsteps scaled to speed, defuse beeps accelerating as the timer runs down, and a satisfying win sting.\n\n-\n**Lighting & Atmosphere**:- Warm late-afternoon DirectionalLight with PCFSoftShadowMap shadows, a HemisphereLight for bounce, light fog for depth, and ACESFilmicToneMapping.\n\n-\n**Optimization & Robustness**:- Fixed-timestep game logic decoupled from rendering, delta-time movement, instanced or merged geometry for repeated props, flawless window-resize handling, and a stable 60 FPS on a standard laptop GPU.\n- A start screen explaining controls; the game only locks the pointer after the player clicks Play.\n\nGenerate the full, un-truncated, single-file HTML code now.", "url": "https://wpnews.pro/news/cs-style-browser-fps", "canonical_source": "https://gist.github.com/jemappellesami/29af98cb87ec7fe2a7cd4e21f43650ac", "published_at": "2026-06-11 17:32:04+00:00", "updated_at": "2026-06-12 04:43:44.653300+00:00", "lang": "en", "topics": ["artificial-intelligence", "machine-learning", "computer-vision", "neural-networks", "generative-ai"], "entities": ["Three.js", "Web Audio API", "HTML Canvas", "PointerLock"], "alternates": {"html": "https://wpnews.pro/news/cs-style-browser-fps", "markdown": "https://wpnews.pro/news/cs-style-browser-fps.md", "text": "https://wpnews.pro/news/cs-style-browser-fps.txt", "jsonld": "https://wpnews.pro/news/cs-style-browser-fps.jsonld"}}