Every game here was described, not coded

Every game here began as one sentence.

GameGates turns a plain-language description into a playable web game — real queue progress you can read, a shareable link, and a remix button on every game.

Act as a senior WebGL and Three.js game engine engineer. Provide a clean, robust, and performant architectural implementation for a stylized 3D cycling game set in Sicily, Italy, built with modern Three.js (r160+ using ES modules) and Rapier3D (WASM). ### 1. Game Concept & Aesthetic - Setting: Coastal Sicily (winding asphalt roads along cliffs, Mount Etna smoking in the background, olive groves, terracotta roofs, cobalt Mediterranean sea). - Art Style: Vibrant low-poly or stylized cell-shaded look, warm Mediterranean daylighting, volumetric fog, and soft shadow mapping. - Core Loop: The player rides a road bicycle along a scenic looped or chunked spline road, managing cadence/stamina, coasting downhill, carving turns, and passing scenic landmarks (e.g., Taormina, Valley of the Temples, Etna foothills). ### 2. Core Architecture & Modules Structure the code into modular ES6 classes or clean object-oriented managers: 1. `GameEngine` - Setup WebGLRenderer (toneMapping: ACESFilmicToneMapping, outputColorSpace: SRGBColorSpace, shadows enabled). - Dynamic window resize handling with fixed aspect ratio correction. - Core game loop (`requestAnimationFrame`) utilizing delta time (`THREE.Clock.getDelta()`) capped to prevent spiral-of-death tunneling. 2. `BicycleController` & Physics - Arcade-realistic hybrid physics: * Acceleration / Cadence (W/Up Arrow): Gradually increases forward velocity up to a gear-dependent max speed. * Braking / Reverse (S/Down Arrow): Applies friction and decelerates. * Steering (A/D or Left/Right Arrow): Rotates handlebars and induces visual bicycle banking/lean (Z-axis roll) proportional to speed and turn radius. * Freewheel / Coasting: Natural aerodynamic drag and rolling resistance slowing the bike when no keys are pressed. * Elevation adjustment: Bike pitches up/down smoothly matching road incline/gradient. - Collision detection using Rapier3D (or Raycasting down to the road mesh) to stick the wheels strictly to the road normal and elevation. 3. `CameraRig` - Smooth 3rd-person chase camera (Lerp dampening) following behind and slightly above the cyclist. - Dynamic FOV expansion when traveling at high speeds or descending steep hills. - Subtle camera shake on gravel/rough patches and look-ahead yaw matching steering direction. 4. `Track & World Generation` - Roadway: Procedural path generated using `THREE.CatmullRomCurve3` with `ExtrudeGeometry` or `TubeGeometry` shaped like an asphalt coastal road with road markings. - Terrain: Heightmapped or chunked low-poly mesh around the track, with blue water plane below cliff level (`MeshStandardMaterial` with subtle sine-wave vertex displacement). - Scenery Instancing: Use `THREE.InstancedMesh` for olive trees, cypress trees, stone walls, and street lamps along the roadside to ensure steady 60+ FPS. - Background Landmark: Distant low-poly Mount Etna with a rising particle-based smoke plume (`THREE.Points`). 5. `HUD & Audio Integration` - Minimalist DOM overlay (HTML/CSS): Speedometer (km/h), Incline Grade (%), Distance Traveled (km), and a Stamina meter. - Web Audio API / Synthesized sound: Ambient sea breeze & cicadas, bicycle chain ticking sound pitch-scaled to cadence, and wind noise tied to velocity. ### 3. Deliverable Requirements - Write clean, modular, and fully functional vanilla JavaScript/Three.js code. - Avoid deprecated APIs (e.g., do NOT use `THREE.Geometry`, use `THREE.BufferGeometry`). - Keep code self-contained or cleanly separated with exact ESM import URLs from `esm.sh` or `unpkg`. - Include key mathematical formulas (banking angle calculation, speed decay, and tangent alignment along the curve).Biking

One sentence in. A game out.

Type your own above, remix any of these into your version — or, when a shelf game matches, play it right now.

  • a ninja frog collecting ramen in zero gravity

  • a tiny lighthouse keeper fighting back the fog monsters

  • a delivery drone vs. a swarm of angry seagulls

  • a lazy cat whose only job is knocking things off tables

  1. 1. Describe it

    One plain sentence is enough. You get a queue slot, real phases and honest time ranges — you can walk away.

  2. 2. We build it

    AI plans the level and the pipeline ships it as a playable artifact. Progress you can actually read, not a spinner.

  3. 3. Play, remix, share

    Every game ends with a next step: play again, improve it with one more sentence, or send the link.

Popular

See all
Tetrisarcade

Tetris

Act as an expert frontend developer and game designer. Please create a fully fun…

Act as an expert frontend developer and game designer. Please create a fully functional, classic Tetris game contained in a single self-contained HTML file (combining HTML, CSS, and modern JavaScript). ### Requirements: 1. **Visual Design & Layout:** - Modern, clean, and retro-arcade aesthetic (dark theme preferred). - A centered game board using HTML5 Canvas with a standard 10x20 grid. - A modern sidebar displaying: - Next piece preview - Current Score - Cleared Lines - Current Level - Clear "Start / Pause / Restart" buttons and a "Game Over" overlay. 2. **Core Game Mechanics:** - **7 Standard Tetrominoes (I, J, L, O, S, T, Z):** Each with its official standard color. - **Random Piece Generator:** Implement the standard "7-bag" randomizer to prevent long droughts. - **Movement & Controls:** - Left/Right Arrows (or A/D): Move horizontally. - Down Arrow (or S): Soft drop. - Up Arrow (or W): Rotate piece clockwise. - Spacebar: Hard drop (instantly drop and lock). - P / Esc: Pause/Resume game. - **Collision Detection & Wall Kicks:** Pieces must not clip through walls or locked blocks. Implement basic wall kicks so rotation near boundaries feels smooth. - **Line Clears & Scoring:** - Clear completed rows, animate or flash cleared lines briefly, and drop blocks above. - Award points based on single, double, triple, or "Tetris" (4 lines) clears. - **Progression:** Increase game speed/drop rate as the player's level increases (e.g., every 10 cleared lines). 3. **Code Quality:** - Clean, modular, well-commented JavaScript. - Smooth `requestAnimationFrame` or delta-time based game loop. - Mobile-friendly / responsive layout, or at least optimized for desktop keyboard play with on-screen button support. Please output the complete, copy-paste-ready HTML code without truncating or leaving placeholders.

by Chris Liu
Monopolyarcade

Monopoly

Create a responsive, single-page web-based **Monopoly game** using modern HTML5,…

Create a responsive, single-page web-based **Monopoly game** using modern HTML5, CSS3 (or Tailwind CSS), and vanilla JavaScript (or React/TypeScript). The game should deliver a clean, modern tabletop aesthetic with smooth piece animations, clear turn-based flow, and robust rule enforcement. --- ### Core Architecture & State Management * **Game State:** Track `players` (name, cash balance, board index, owned properties, in-jail status, turns in jail), `currentPlayerIndex`, `diceRoll` (two 6-sided dice), `deckStates` (Chance, Community Chest), and `gamePhase` (`ROLL`, `ACTION`, `END_TURN`). * **Board Layout:** Build a standard 40-tile square board using CSS Grid/Flexbox. Each tile must contain properties like `name`, `type` (`property`, `railroad`, `utility`, `corner`, `tax`, `card`), `cost`, `rentTiers` (base, houses 1–4, hotel), and owner indicators. * **Turn Lifecycle:** 1. Roll dice (detect doubles; 3 consecutive doubles send player to Jail). 2. Animate token movement tile-by-tile. 3. Resolve tile action (purchase unowned property, pay rent, draw card, go to jail). 4. Allow optional management actions (trade, build houses, mortgage). 5. End turn and transfer control to the next active player. --- ### Key Mechanics to Implement * **Property Transactions:** Unowned tiles display a modal with "Buy" or "Pass" (triggers an auction among players if passed). * **Rent Calculation:** Implement full color-group rent doubling, graduated house/hotel multipliers, railroad scaling ($25/$50/$100/$200), and utility dice multipliers ($4\times$ or $10\times$). * **Jail Logic:** 3 ways out: roll doubles, pay $50 fine, or use a "Get Out of Jail Free" card. Max 3 turns before mandatory payout. * **Bankruptcy Engine:** If a player cannot cover debts after liquidating assets (mortgaging, selling buildings at 50% cost), declare bankruptcy and transfer remaining assets to the creditor or bank. --- ### UI & UX Requirements * **Center Control Hub:** The board interior hosts the dice roller, interactive action buttons, a scrolling action log (e.g., *"Player 1 paid $50 rent to Player 2"*), and active trade prompts. * **Player Dashboards:** Display color-coded player cards showing net worth, cash, and property cards grouped by color. * **Visual Polish:** Highlight active tiles, display house/hotel tokens directly on tile borders, and show pawn markers with distinct CSS badges or SVG icons. Deliver the code in modular files (`index.html`, `styles.css`, `game.js`) with clean separation between the state logic, rendering engine, and event handlers.

by Chris Liu
Bikingarcade

Biking

Act as a senior WebGL and Three.js game engine engineer. Provide a clean, robust…

Act as a senior WebGL and Three.js game engine engineer. Provide a clean, robust, and performant architectural implementation for a stylized 3D cycling game set in Sicily, Italy, built with modern Three.js (r160+ using ES modules) and Rapier3D (WASM). ### 1. Game Concept & Aesthetic - Setting: Coastal Sicily (winding asphalt roads along cliffs, Mount Etna smoking in the background, olive groves, terracotta roofs, cobalt Mediterranean sea). - Art Style: Vibrant low-poly or stylized cell-shaded look, warm Mediterranean daylighting, volumetric fog, and soft shadow mapping. - Core Loop: The player rides a road bicycle along a scenic looped or chunked spline road, managing cadence/stamina, coasting downhill, carving turns, and passing scenic landmarks (e.g., Taormina, Valley of the Temples, Etna foothills). ### 2. Core Architecture & Modules Structure the code into modular ES6 classes or clean object-oriented managers: 1. `GameEngine` - Setup WebGLRenderer (toneMapping: ACESFilmicToneMapping, outputColorSpace: SRGBColorSpace, shadows enabled). - Dynamic window resize handling with fixed aspect ratio correction. - Core game loop (`requestAnimationFrame`) utilizing delta time (`THREE.Clock.getDelta()`) capped to prevent spiral-of-death tunneling. 2. `BicycleController` & Physics - Arcade-realistic hybrid physics: * Acceleration / Cadence (W/Up Arrow): Gradually increases forward velocity up to a gear-dependent max speed. * Braking / Reverse (S/Down Arrow): Applies friction and decelerates. * Steering (A/D or Left/Right Arrow): Rotates handlebars and induces visual bicycle banking/lean (Z-axis roll) proportional to speed and turn radius. * Freewheel / Coasting: Natural aerodynamic drag and rolling resistance slowing the bike when no keys are pressed. * Elevation adjustment: Bike pitches up/down smoothly matching road incline/gradient. - Collision detection using Rapier3D (or Raycasting down to the road mesh) to stick the wheels strictly to the road normal and elevation. 3. `CameraRig` - Smooth 3rd-person chase camera (Lerp dampening) following behind and slightly above the cyclist. - Dynamic FOV expansion when traveling at high speeds or descending steep hills. - Subtle camera shake on gravel/rough patches and look-ahead yaw matching steering direction. 4. `Track & World Generation` - Roadway: Procedural path generated using `THREE.CatmullRomCurve3` with `ExtrudeGeometry` or `TubeGeometry` shaped like an asphalt coastal road with road markings. - Terrain: Heightmapped or chunked low-poly mesh around the track, with blue water plane below cliff level (`MeshStandardMaterial` with subtle sine-wave vertex displacement). - Scenery Instancing: Use `THREE.InstancedMesh` for olive trees, cypress trees, stone walls, and street lamps along the roadside to ensure steady 60+ FPS. - Background Landmark: Distant low-poly Mount Etna with a rising particle-based smoke plume (`THREE.Points`). 5. `HUD & Audio Integration` - Minimalist DOM overlay (HTML/CSS): Speedometer (km/h), Incline Grade (%), Distance Traveled (km), and a Stamina meter. - Web Audio API / Synthesized sound: Ambient sea breeze & cicadas, bicycle chain ticking sound pitch-scaled to cadence, and wind noise tied to velocity. ### 3. Deliverable Requirements - Write clean, modular, and fully functional vanilla JavaScript/Three.js code. - Avoid deprecated APIs (e.g., do NOT use `THREE.Geometry`, use `THREE.BufferGeometry`). - Keep code self-contained or cleanly separated with exact ESM import URLs from `esm.sh` or `unpkg`. - Include key mathematical formulas (banking angle calculation, speed decay, and tangent alignment along the curve).

by Chris Liu

arcade

Bikingarcade

Biking

Act as a senior WebGL and Three.js game engine engineer. Provide a clean, robust…

Act as a senior WebGL and Three.js game engine engineer. Provide a clean, robust, and performant architectural implementation for a stylized 3D cycling game set in Sicily, Italy, built with modern Three.js (r160+ using ES modules) and Rapier3D (WASM). ### 1. Game Concept & Aesthetic - Setting: Coastal Sicily (winding asphalt roads along cliffs, Mount Etna smoking in the background, olive groves, terracotta roofs, cobalt Mediterranean sea). - Art Style: Vibrant low-poly or stylized cell-shaded look, warm Mediterranean daylighting, volumetric fog, and soft shadow mapping. - Core Loop: The player rides a road bicycle along a scenic looped or chunked spline road, managing cadence/stamina, coasting downhill, carving turns, and passing scenic landmarks (e.g., Taormina, Valley of the Temples, Etna foothills). ### 2. Core Architecture & Modules Structure the code into modular ES6 classes or clean object-oriented managers: 1. `GameEngine` - Setup WebGLRenderer (toneMapping: ACESFilmicToneMapping, outputColorSpace: SRGBColorSpace, shadows enabled). - Dynamic window resize handling with fixed aspect ratio correction. - Core game loop (`requestAnimationFrame`) utilizing delta time (`THREE.Clock.getDelta()`) capped to prevent spiral-of-death tunneling. 2. `BicycleController` & Physics - Arcade-realistic hybrid physics: * Acceleration / Cadence (W/Up Arrow): Gradually increases forward velocity up to a gear-dependent max speed. * Braking / Reverse (S/Down Arrow): Applies friction and decelerates. * Steering (A/D or Left/Right Arrow): Rotates handlebars and induces visual bicycle banking/lean (Z-axis roll) proportional to speed and turn radius. * Freewheel / Coasting: Natural aerodynamic drag and rolling resistance slowing the bike when no keys are pressed. * Elevation adjustment: Bike pitches up/down smoothly matching road incline/gradient. - Collision detection using Rapier3D (or Raycasting down to the road mesh) to stick the wheels strictly to the road normal and elevation. 3. `CameraRig` - Smooth 3rd-person chase camera (Lerp dampening) following behind and slightly above the cyclist. - Dynamic FOV expansion when traveling at high speeds or descending steep hills. - Subtle camera shake on gravel/rough patches and look-ahead yaw matching steering direction. 4. `Track & World Generation` - Roadway: Procedural path generated using `THREE.CatmullRomCurve3` with `ExtrudeGeometry` or `TubeGeometry` shaped like an asphalt coastal road with road markings. - Terrain: Heightmapped or chunked low-poly mesh around the track, with blue water plane below cliff level (`MeshStandardMaterial` with subtle sine-wave vertex displacement). - Scenery Instancing: Use `THREE.InstancedMesh` for olive trees, cypress trees, stone walls, and street lamps along the roadside to ensure steady 60+ FPS. - Background Landmark: Distant low-poly Mount Etna with a rising particle-based smoke plume (`THREE.Points`). 5. `HUD & Audio Integration` - Minimalist DOM overlay (HTML/CSS): Speedometer (km/h), Incline Grade (%), Distance Traveled (km), and a Stamina meter. - Web Audio API / Synthesized sound: Ambient sea breeze & cicadas, bicycle chain ticking sound pitch-scaled to cadence, and wind noise tied to velocity. ### 3. Deliverable Requirements - Write clean, modular, and fully functional vanilla JavaScript/Three.js code. - Avoid deprecated APIs (e.g., do NOT use `THREE.Geometry`, use `THREE.BufferGeometry`). - Keep code self-contained or cleanly separated with exact ESM import URLs from `esm.sh` or `unpkg`. - Include key mathematical formulas (banking angle calculation, speed decay, and tangent alignment along the curve).

by Chris Liu
Tetrisarcade

Tetris

Act as an expert frontend developer and game designer. Please create a fully fun…

Act as an expert frontend developer and game designer. Please create a fully functional, classic Tetris game contained in a single self-contained HTML file (combining HTML, CSS, and modern JavaScript). ### Requirements: 1. **Visual Design & Layout:** - Modern, clean, and retro-arcade aesthetic (dark theme preferred). - A centered game board using HTML5 Canvas with a standard 10x20 grid. - A modern sidebar displaying: - Next piece preview - Current Score - Cleared Lines - Current Level - Clear "Start / Pause / Restart" buttons and a "Game Over" overlay. 2. **Core Game Mechanics:** - **7 Standard Tetrominoes (I, J, L, O, S, T, Z):** Each with its official standard color. - **Random Piece Generator:** Implement the standard "7-bag" randomizer to prevent long droughts. - **Movement & Controls:** - Left/Right Arrows (or A/D): Move horizontally. - Down Arrow (or S): Soft drop. - Up Arrow (or W): Rotate piece clockwise. - Spacebar: Hard drop (instantly drop and lock). - P / Esc: Pause/Resume game. - **Collision Detection & Wall Kicks:** Pieces must not clip through walls or locked blocks. Implement basic wall kicks so rotation near boundaries feels smooth. - **Line Clears & Scoring:** - Clear completed rows, animate or flash cleared lines briefly, and drop blocks above. - Award points based on single, double, triple, or "Tetris" (4 lines) clears. - **Progression:** Increase game speed/drop rate as the player's level increases (e.g., every 10 cleared lines). 3. **Code Quality:** - Clean, modular, well-commented JavaScript. - Smooth `requestAnimationFrame` or delta-time based game loop. - Mobile-friendly / responsive layout, or at least optimized for desktop keyboard play with on-screen button support. Please output the complete, copy-paste-ready HTML code without truncating or leaving placeholders.

by Chris Liu
Monopolyarcade

Monopoly

Create a responsive, single-page web-based **Monopoly game** using modern HTML5,…

Create a responsive, single-page web-based **Monopoly game** using modern HTML5, CSS3 (or Tailwind CSS), and vanilla JavaScript (or React/TypeScript). The game should deliver a clean, modern tabletop aesthetic with smooth piece animations, clear turn-based flow, and robust rule enforcement. --- ### Core Architecture & State Management * **Game State:** Track `players` (name, cash balance, board index, owned properties, in-jail status, turns in jail), `currentPlayerIndex`, `diceRoll` (two 6-sided dice), `deckStates` (Chance, Community Chest), and `gamePhase` (`ROLL`, `ACTION`, `END_TURN`). * **Board Layout:** Build a standard 40-tile square board using CSS Grid/Flexbox. Each tile must contain properties like `name`, `type` (`property`, `railroad`, `utility`, `corner`, `tax`, `card`), `cost`, `rentTiers` (base, houses 1–4, hotel), and owner indicators. * **Turn Lifecycle:** 1. Roll dice (detect doubles; 3 consecutive doubles send player to Jail). 2. Animate token movement tile-by-tile. 3. Resolve tile action (purchase unowned property, pay rent, draw card, go to jail). 4. Allow optional management actions (trade, build houses, mortgage). 5. End turn and transfer control to the next active player. --- ### Key Mechanics to Implement * **Property Transactions:** Unowned tiles display a modal with "Buy" or "Pass" (triggers an auction among players if passed). * **Rent Calculation:** Implement full color-group rent doubling, graduated house/hotel multipliers, railroad scaling ($25/$50/$100/$200), and utility dice multipliers ($4\times$ or $10\times$). * **Jail Logic:** 3 ways out: roll doubles, pay $50 fine, or use a "Get Out of Jail Free" card. Max 3 turns before mandatory payout. * **Bankruptcy Engine:** If a player cannot cover debts after liquidating assets (mortgaging, selling buildings at 50% cost), declare bankruptcy and transfer remaining assets to the creditor or bank. --- ### UI & UX Requirements * **Center Control Hub:** The board interior hosts the dice roller, interactive action buttons, a scrolling action log (e.g., *"Player 1 paid $50 rent to Player 2"*), and active trade prompts. * **Player Dashboards:** Display color-coded player cards showing net worth, cash, and property cards grouped by color. * **Visual Polish:** Highlight active tiles, display house/hotel tokens directly on tile borders, and show pawn markers with distinct CSS badges or SVG icons. Deliver the code in modular files (`index.html`, `styles.css`, `game.js`) with clean separation between the state logic, rendering engine, and event handlers.

by Chris Liu

Latest

See all
Bikingarcade

Biking

Act as a senior WebGL and Three.js game engine engineer. Provide a clean, robust…

Act as a senior WebGL and Three.js game engine engineer. Provide a clean, robust, and performant architectural implementation for a stylized 3D cycling game set in Sicily, Italy, built with modern Three.js (r160+ using ES modules) and Rapier3D (WASM). ### 1. Game Concept & Aesthetic - Setting: Coastal Sicily (winding asphalt roads along cliffs, Mount Etna smoking in the background, olive groves, terracotta roofs, cobalt Mediterranean sea). - Art Style: Vibrant low-poly or stylized cell-shaded look, warm Mediterranean daylighting, volumetric fog, and soft shadow mapping. - Core Loop: The player rides a road bicycle along a scenic looped or chunked spline road, managing cadence/stamina, coasting downhill, carving turns, and passing scenic landmarks (e.g., Taormina, Valley of the Temples, Etna foothills). ### 2. Core Architecture & Modules Structure the code into modular ES6 classes or clean object-oriented managers: 1. `GameEngine` - Setup WebGLRenderer (toneMapping: ACESFilmicToneMapping, outputColorSpace: SRGBColorSpace, shadows enabled). - Dynamic window resize handling with fixed aspect ratio correction. - Core game loop (`requestAnimationFrame`) utilizing delta time (`THREE.Clock.getDelta()`) capped to prevent spiral-of-death tunneling. 2. `BicycleController` & Physics - Arcade-realistic hybrid physics: * Acceleration / Cadence (W/Up Arrow): Gradually increases forward velocity up to a gear-dependent max speed. * Braking / Reverse (S/Down Arrow): Applies friction and decelerates. * Steering (A/D or Left/Right Arrow): Rotates handlebars and induces visual bicycle banking/lean (Z-axis roll) proportional to speed and turn radius. * Freewheel / Coasting: Natural aerodynamic drag and rolling resistance slowing the bike when no keys are pressed. * Elevation adjustment: Bike pitches up/down smoothly matching road incline/gradient. - Collision detection using Rapier3D (or Raycasting down to the road mesh) to stick the wheels strictly to the road normal and elevation. 3. `CameraRig` - Smooth 3rd-person chase camera (Lerp dampening) following behind and slightly above the cyclist. - Dynamic FOV expansion when traveling at high speeds or descending steep hills. - Subtle camera shake on gravel/rough patches and look-ahead yaw matching steering direction. 4. `Track & World Generation` - Roadway: Procedural path generated using `THREE.CatmullRomCurve3` with `ExtrudeGeometry` or `TubeGeometry` shaped like an asphalt coastal road with road markings. - Terrain: Heightmapped or chunked low-poly mesh around the track, with blue water plane below cliff level (`MeshStandardMaterial` with subtle sine-wave vertex displacement). - Scenery Instancing: Use `THREE.InstancedMesh` for olive trees, cypress trees, stone walls, and street lamps along the roadside to ensure steady 60+ FPS. - Background Landmark: Distant low-poly Mount Etna with a rising particle-based smoke plume (`THREE.Points`). 5. `HUD & Audio Integration` - Minimalist DOM overlay (HTML/CSS): Speedometer (km/h), Incline Grade (%), Distance Traveled (km), and a Stamina meter. - Web Audio API / Synthesized sound: Ambient sea breeze & cicadas, bicycle chain ticking sound pitch-scaled to cadence, and wind noise tied to velocity. ### 3. Deliverable Requirements - Write clean, modular, and fully functional vanilla JavaScript/Three.js code. - Avoid deprecated APIs (e.g., do NOT use `THREE.Geometry`, use `THREE.BufferGeometry`). - Keep code self-contained or cleanly separated with exact ESM import URLs from `esm.sh` or `unpkg`. - Include key mathematical formulas (banking angle calculation, speed decay, and tangent alignment along the curve).

by Chris Liu
Tetrisarcade

Tetris

Act as an expert frontend developer and game designer. Please create a fully fun…

Act as an expert frontend developer and game designer. Please create a fully functional, classic Tetris game contained in a single self-contained HTML file (combining HTML, CSS, and modern JavaScript). ### Requirements: 1. **Visual Design & Layout:** - Modern, clean, and retro-arcade aesthetic (dark theme preferred). - A centered game board using HTML5 Canvas with a standard 10x20 grid. - A modern sidebar displaying: - Next piece preview - Current Score - Cleared Lines - Current Level - Clear "Start / Pause / Restart" buttons and a "Game Over" overlay. 2. **Core Game Mechanics:** - **7 Standard Tetrominoes (I, J, L, O, S, T, Z):** Each with its official standard color. - **Random Piece Generator:** Implement the standard "7-bag" randomizer to prevent long droughts. - **Movement & Controls:** - Left/Right Arrows (or A/D): Move horizontally. - Down Arrow (or S): Soft drop. - Up Arrow (or W): Rotate piece clockwise. - Spacebar: Hard drop (instantly drop and lock). - P / Esc: Pause/Resume game. - **Collision Detection & Wall Kicks:** Pieces must not clip through walls or locked blocks. Implement basic wall kicks so rotation near boundaries feels smooth. - **Line Clears & Scoring:** - Clear completed rows, animate or flash cleared lines briefly, and drop blocks above. - Award points based on single, double, triple, or "Tetris" (4 lines) clears. - **Progression:** Increase game speed/drop rate as the player's level increases (e.g., every 10 cleared lines). 3. **Code Quality:** - Clean, modular, well-commented JavaScript. - Smooth `requestAnimationFrame` or delta-time based game loop. - Mobile-friendly / responsive layout, or at least optimized for desktop keyboard play with on-screen button support. Please output the complete, copy-paste-ready HTML code without truncating or leaving placeholders.

by Chris Liu
Monopolyarcade

Monopoly

Create a responsive, single-page web-based **Monopoly game** using modern HTML5,…

Create a responsive, single-page web-based **Monopoly game** using modern HTML5, CSS3 (or Tailwind CSS), and vanilla JavaScript (or React/TypeScript). The game should deliver a clean, modern tabletop aesthetic with smooth piece animations, clear turn-based flow, and robust rule enforcement. --- ### Core Architecture & State Management * **Game State:** Track `players` (name, cash balance, board index, owned properties, in-jail status, turns in jail), `currentPlayerIndex`, `diceRoll` (two 6-sided dice), `deckStates` (Chance, Community Chest), and `gamePhase` (`ROLL`, `ACTION`, `END_TURN`). * **Board Layout:** Build a standard 40-tile square board using CSS Grid/Flexbox. Each tile must contain properties like `name`, `type` (`property`, `railroad`, `utility`, `corner`, `tax`, `card`), `cost`, `rentTiers` (base, houses 1–4, hotel), and owner indicators. * **Turn Lifecycle:** 1. Roll dice (detect doubles; 3 consecutive doubles send player to Jail). 2. Animate token movement tile-by-tile. 3. Resolve tile action (purchase unowned property, pay rent, draw card, go to jail). 4. Allow optional management actions (trade, build houses, mortgage). 5. End turn and transfer control to the next active player. --- ### Key Mechanics to Implement * **Property Transactions:** Unowned tiles display a modal with "Buy" or "Pass" (triggers an auction among players if passed). * **Rent Calculation:** Implement full color-group rent doubling, graduated house/hotel multipliers, railroad scaling ($25/$50/$100/$200), and utility dice multipliers ($4\times$ or $10\times$). * **Jail Logic:** 3 ways out: roll doubles, pay $50 fine, or use a "Get Out of Jail Free" card. Max 3 turns before mandatory payout. * **Bankruptcy Engine:** If a player cannot cover debts after liquidating assets (mortgaging, selling buildings at 50% cost), declare bankruptcy and transfer remaining assets to the creditor or bank. --- ### UI & UX Requirements * **Center Control Hub:** The board interior hosts the dice roller, interactive action buttons, a scrolling action log (e.g., *"Player 1 paid $50 rent to Player 2"*), and active trade prompts. * **Player Dashboards:** Display color-coded player cards showing net worth, cash, and property cards grouped by color. * **Visual Polish:** Highlight active tiles, display house/hotel tokens directly on tile borders, and show pawn markers with distinct CSS badges or SVG icons. Deliver the code in modular files (`index.html`, `styles.css`, `game.js`) with clean separation between the state logic, rendering engine, and event handlers.

by Chris Liu
4 games on the shelf All made from player sentences
Act as a senior WebGL and Three.js game engine engineer. Provide a clean, robust, and performant architectural implementation for a stylized 3D cycling game set in Sicily, Italy, built with modern Three.js (r160+ using ES modules) and Rapier3D (WASM). ### 1. Game Concept & Aesthetic - Setting: Coastal Sicily (winding asphalt roads along cliffs, Mount Etna smoking in the background, olive groves, terracotta roofs, cobalt Mediterranean sea). - Art Style: Vibrant low-poly or stylized cell-shaded look, warm Mediterranean daylighting, volumetric fog, and soft shadow mapping. - Core Loop: The player rides a road bicycle along a scenic looped or chunked spline road, managing cadence/stamina, coasting downhill, carving turns, and passing scenic landmarks (e.g., Taormina, Valley of the Temples, Etna foothills). ### 2. Core Architecture & Modules Structure the code into modular ES6 classes or clean object-oriented managers: 1. `GameEngine` - Setup WebGLRenderer (toneMapping: ACESFilmicToneMapping, outputColorSpace: SRGBColorSpace, shadows enabled). - Dynamic window resize handling with fixed aspect ratio correction. - Core game loop (`requestAnimationFrame`) utilizing delta time (`THREE.Clock.getDelta()`) capped to prevent spiral-of-death tunneling. 2. `BicycleController` & Physics - Arcade-realistic hybrid physics: * Acceleration / Cadence (W/Up Arrow): Gradually increases forward velocity up to a gear-dependent max speed. * Braking / Reverse (S/Down Arrow): Applies friction and decelerates. * Steering (A/D or Left/Right Arrow): Rotates handlebars and induces visual bicycle banking/lean (Z-axis roll) proportional to speed and turn radius. * Freewheel / Coasting: Natural aerodynamic drag and rolling resistance slowing the bike when no keys are pressed. * Elevation adjustment: Bike pitches up/down smoothly matching road incline/gradient. - Collision detection using Rapier3D (or Raycasting down to the road mesh) to stick the wheels strictly to the road normal and elevation. 3. `CameraRig` - Smooth 3rd-person chase camera (Lerp dampening) following behind and slightly above the cyclist. - Dynamic FOV expansion when traveling at high speeds or descending steep hills. - Subtle camera shake on gravel/rough patches and look-ahead yaw matching steering direction. 4. `Track & World Generation` - Roadway: Procedural path generated using `THREE.CatmullRomCurve3` with `ExtrudeGeometry` or `TubeGeometry` shaped like an asphalt coastal road with road markings. - Terrain: Heightmapped or chunked low-poly mesh around the track, with blue water plane below cliff level (`MeshStandardMaterial` with subtle sine-wave vertex displacement). - Scenery Instancing: Use `THREE.InstancedMesh` for olive trees, cypress trees, stone walls, and street lamps along the roadside to ensure steady 60+ FPS. - Background Landmark: Distant low-poly Mount Etna with a rising particle-based smoke plume (`THREE.Points`). 5. `HUD & Audio Integration` - Minimalist DOM overlay (HTML/CSS): Speedometer (km/h), Incline Grade (%), Distance Traveled (km), and a Stamina meter. - Web Audio API / Synthesized sound: Ambient sea breeze & cicadas, bicycle chain ticking sound pitch-scaled to cadence, and wind noise tied to velocity. ### 3. Deliverable Requirements - Write clean, modular, and fully functional vanilla JavaScript/Three.js code. - Avoid deprecated APIs (e.g., do NOT use `THREE.Geometry`, use `THREE.BufferGeometry`). - Keep code self-contained or cleanly separated with exact ESM import URLs from `esm.sh` or `unpkg`. - Include key mathematical formulas (banking angle calculation, speed decay, and tangent alignment along the curve).BikingAct as an expert frontend developer and game designer. Please create a fully functional, classic Tetris game contained in a single self-contained HTML file (combining HTML, CSS, and modern JavaScript). ### Requirements: 1. **Visual Design & Layout:** - Modern, clean, and retro-arcade aesthetic (dark theme preferred). - A centered game board using HTML5 Canvas with a standard 10x20 grid. - A modern sidebar displaying: - Next piece preview - Current Score - Cleared Lines - Current Level - Clear "Start / Pause / Restart" buttons and a "Game Over" overlay. 2. **Core Game Mechanics:** - **7 Standard Tetrominoes (I, J, L, O, S, T, Z):** Each with its official standard color. - **Random Piece Generator:** Implement the standard "7-bag" randomizer to prevent long droughts. - **Movement & Controls:** - Left/Right Arrows (or A/D): Move horizontally. - Down Arrow (or S): Soft drop. - Up Arrow (or W): Rotate piece clockwise. - Spacebar: Hard drop (instantly drop and lock). - P / Esc: Pause/Resume game. - **Collision Detection & Wall Kicks:** Pieces must not clip through walls or locked blocks. Implement basic wall kicks so rotation near boundaries feels smooth. - **Line Clears & Scoring:** - Clear completed rows, animate or flash cleared lines briefly, and drop blocks above. - Award points based on single, double, triple, or "Tetris" (4 lines) clears. - **Progression:** Increase game speed/drop rate as the player's level increases (e.g., every 10 cleared lines). 3. **Code Quality:** - Clean, modular, well-commented JavaScript. - Smooth `requestAnimationFrame` or delta-time based game loop. - Mobile-friendly / responsive layout, or at least optimized for desktop keyboard play with on-screen button support. Please output the complete, copy-paste-ready HTML code without truncating or leaving placeholders.TetrisCreate a responsive, single-page web-based **Monopoly game** using modern HTML5, CSS3 (or Tailwind CSS), and vanilla JavaScript (or React/TypeScript). The game should deliver a clean, modern tabletop aesthetic with smooth piece animations, clear turn-based flow, and robust rule enforcement. --- ### Core Architecture & State Management * **Game State:** Track `players` (name, cash balance, board index, owned properties, in-jail status, turns in jail), `currentPlayerIndex`, `diceRoll` (two 6-sided dice), `deckStates` (Chance, Community Chest), and `gamePhase` (`ROLL`, `ACTION`, `END_TURN`). * **Board Layout:** Build a standard 40-tile square board using CSS Grid/Flexbox. Each tile must contain properties like `name`, `type` (`property`, `railroad`, `utility`, `corner`, `tax`, `card`), `cost`, `rentTiers` (base, houses 1–4, hotel), and owner indicators. * **Turn Lifecycle:** 1. Roll dice (detect doubles; 3 consecutive doubles send player to Jail). 2. Animate token movement tile-by-tile. 3. Resolve tile action (purchase unowned property, pay rent, draw card, go to jail). 4. Allow optional management actions (trade, build houses, mortgage). 5. End turn and transfer control to the next active player. --- ### Key Mechanics to Implement * **Property Transactions:** Unowned tiles display a modal with "Buy" or "Pass" (triggers an auction among players if passed). * **Rent Calculation:** Implement full color-group rent doubling, graduated house/hotel multipliers, railroad scaling ($25/$50/$100/$200), and utility dice multipliers ($4\times$ or $10\times$). * **Jail Logic:** 3 ways out: roll doubles, pay $50 fine, or use a "Get Out of Jail Free" card. Max 3 turns before mandatory payout. * **Bankruptcy Engine:** If a player cannot cover debts after liquidating assets (mortgaging, selling buildings at 50% cost), declare bankruptcy and transfer remaining assets to the creditor or bank. --- ### UI & UX Requirements * **Center Control Hub:** The board interior hosts the dice roller, interactive action buttons, a scrolling action log (e.g., *"Player 1 paid $50 rent to Player 2"*), and active trade prompts. * **Player Dashboards:** Display color-coded player cards showing net worth, cash, and property cards grouped by color. * **Visual Polish:** Highlight active tiles, display house/hotel tokens directly on tile borders, and show pawn markers with distinct CSS badges or SVG icons. Deliver the code in modular files (`index.html`, `styles.css`, `game.js`) with clean separation between the state logic, rendering engine, and event handlers.Monopoly1942 Sky Fortress