TEXT

Gyroscopic Maze Run

Contributed by loshu2000

Improved by Laravel Company · 2026-09-07

Act as a Master Game Designer and Senior Frontend Developer specializing in creating highly optimized, physics-based mobile experiences.

Your task is to design and generate the complete, runnable source code for a single-file, interactive 2D maze game.

OUTPUT REQUIREMENT: Generate a single file named index.html containing all necessary HTML, CSS, and JavaScript. No external libraries or frameworks are permitted; the implementation must rely purely on native web technologies (Canvas API, CSS, and vanilla JavaScript).

GAME SPECIFICATION: Axial Drift

1. Core Concept:
The game simulates the physical movement of a marble within a complex geometric maze where the player manipulates the global gravity vector to guide the marble.

2. Game Mechanics:

  • Player Input (Gravity Control): The player must be able to dynamically shift the global gravity vector along the X and Y axes. This control must be implemented via:
    • Desktop: Mouse click-and-drag interaction.
    • Mobile: Integration with the DeviceOrientationEvent API (simulating tilt/orientation changes) or touch gestures.
  • Physics Simulation: Implement a robust 2D rigid-body physics system for the marble. This system must include:
    • Rigid-body friction.
    • Angular velocity and momentum calculation.
    • Damping mechanics to ensure smooth, realistic deceleration.
  • Goal: The primary objective is to maneuver the marble to reach the central vector vortex while actively dodging dynamic, kinetic trapdoors that move across the maze.

3. Visual & Aesthetic Requirements (Bauhaus Style):

  • Design Philosophy: Implement a strict Bauhaus architectural aesthetic.
  • Color Palette: Use high-contrast, bold solid primary color blocks for the maze walls and elements.
  • Line Work: Employ heavy, stark black stroke lines to define all geometric boundaries.
  • Shading: Utilize real-time drop shadows to give depth to the solid blocks.
  • Rendering: Use the HTML Canvas element for all rendering. Ensure the visualization is pixel-perfectly scaled and optimized for both mobile portrait and desktop landscape viewports.

4. Technical Constraints & Implementation Details:

  • Stack: Pure HTML5, CSS3, and Vanilla JavaScript.
  • Rendering: All game state and visuals must be drawn on a 2D Canvas.
  • Optimization: The code must be highly performant, prioritizing smooth physics updates (e.g., using requestAnimationFrame).
  • Structure: The final output must be a single, self-contained index.html file.

Begin generation of the complete, runnable index.html file now.

Original prompt (before our improvements)

I want you to act as a master game designer specializing in mobile-responsive physics simulation. Create a SINGLE FILE (index.html) interactive maze game. GAME SPEC: Title: Axial Drift Core mechanic: A marble rolls inside a complex geometric maze. The player shifts the global gravity vector (X and Y axes) to guide the marble. Goal: Maneuver the marble to the center vector vortex while dodging dynamic kinetic trapdoors. TECH REQUIREMENTS: Single file: Pure web technology stack (<!doctype html>, CSS, JS) without heavy engine frameworks. Rendering: 2D Canvas optimized for mobile and desktop viewports, scaling pixel-perfectly. Mechanics: Accept desktop mouse click-drags or mobile device orientation API (DeviceOrientationEvent) to tilt the maze physics grid. Implement rigid-body friction, angular velocity, and momentum damping for the marble. Design style: Bauhaus architectural aesthetics. High contrast bold solid primary color blocks, heavy black stroke lines, and real-time drop shadows.