/wall-jump-parkour-with-map-editor
Open Player
prompt.txt
01You are an expert web-app developer. Your task is to generate a single, self‑contained HTML file that implements a first‑person 3D game plus a simple map editor with the mechanics described below. The code must work in a modern browser (Chrome, Firefox, Edge) without any external server or build step. Use Three.js (via CDN) for rendering, and implement all logic in plain JavaScript. 02Core Features 031. Two Modes – Game & Editor 04Toggle between modes with a button or key (e.g., E or M). 05Game Mode – First‑person view, movement, wall‑jumping, chaining speed (see section 2). 06Editor Mode – Top‑down orthographic camera view of the empty flat plane (the floor). 07The player can draw rectangles on the plane – those rectangles become walls in Game Mode. 08Walls are saved immediately; you can switch back to Game Mode to test them. 092. Game Mode (First‑Person with Wall Riding & Chaining) 10First‑Person Perspective 11Camera attached to a player body. 12Movement: WASD (forward/left/back/right). Mouse to look around. Space to jump. 13Map with Walls 14The arena is a flat plane. 15Walls are solid obstacles – the player cannot walk through them. 16Initially, there are no walls (empty plane). The player must create walls in Editor Mode first. 17Walls are axis‑aligned boxes with a configurable height (e.g., 2 units) and depth (e.g., 1 unit). Width and position are set by drawing. 18Wall Riding / Wall Jump Mechanic 19The player can perform a wall jump when in the air and very close to a wall (colliding or within close range). 20Pressing Space triggers a wall jump: 21Push away from the wall (direction = surface normal). 22Add upward velocity. 23Chaining: Each consecutive wall jump without touching the ground increases a chain counter. 24Touching ground resets chain to 0. 25Speed formula: currentSpeed = baseSpeed * (1 + chain * 0.15) with a cap (e.g., 5×). 26Display speed multiplier and chain count as an HUD. 27Physics & Collision 28Gravity, ground collision, player bounding box or sphere. 29Collision against all walls created in Editor Mode. 303. Editor Mode (Top‑Down Wall Drawing) 31Camera 32Orthographic camera looking straight down at the floor plane (e.g., camera.position.set(0, 20, 0), looking down). 33The view shows the empty flat plane (a grid helper is useful). 34No player movement – just mouse interaction. 35Drawing Rectangles 36Click and drag on the plane to define a rectangle. 37While dragging, show a preview (semi‑transparent rectangle). 38On mouse release, create a wall (a 3D box) at that rectangle position. 39The wall height is fixed (e.g., 2 units), depth is fixed (e.g., 0.5 units), but the rectangle defines its X and Z extents (width and length). 40Walls are stored in an array and persist after switching modes. 41Optional: ability to delete walls (e.g., right‑click or a delete button). 42Visual Feedback 43Highlight the rectangle being drawn. 44Show existing walls in Editor Mode as outlines or solid colours. 454. Toggle & Data Sharing 46Pressing M (or a visible UI button) toggles between Game Mode and Editor Mode. 47When toggling: 48From Editor → Game: Switch to first‑person camera, restore player position (or reset to start). 49From Game → Editor: Switch to orthographic top‑down camera, keep the same walls. 50Walls must be shared between modes – no data loss. 515. Performance & Styling 52Use Three.js for rendering. 53Simple floor with a grid or checkerboard. 54Walls: distinct colour or semi‑transparent in Editor Mode, solid in Game Mode. 55HUD: show current mode, instructions, chain, speed multiplier. 56Game must run at stable 60 FPS, 30 FPS are also okay. 57Implementation Notes 58All code in one HTML file – <style> and <script> tags. 59Use requestAnimationFrame for the game loop. 60Collision detection: axis‑aligned bounding boxes for walls. 61For wall‑jump detection, you need the wall’s surface normal. 62No external assets – use primitives and generated textures. 63The editor should be intuitive: click‑and‑drag to create walls, show preview rectangle.