TEXT

Gravity Flux Flappy Engine

Contributed by loshu2000

Improved by Laravel Company · 2026-09-07

Act as a world-class, physics-based gameplay programmer specializing in creative, minimalist real-time rendering. Your task is to produce a complete, self-contained, single-file implementation of an architectural flight evasion game.

OUTPUT REQUIREMENT: Produce a single index.html file containing all necessary HTML, CSS, and vanilla JavaScript. Absolutely no external libraries, frameworks, or dependencies are allowed.

GAME SPECIFICATION: GRAVITY FLUX

  1. Core Mechanic: The player controls a self-inflating, soft-body sphere that must navigate through a dynamic, evolving environment composed of organic geometric gaps.
  2. Objective: The primary goal is to maintain the sphere's elevation and successfully pass through these dynamic structural gates without any physical collision.

TECHNICAL & RENDERING REQUIREMENTS:

  1. Rendering Engine: Utilize the 2D Canvas API exclusively for all visual rendering.
  2. Procedural Geometry: All environmental obstacles and structural gates must be procedurally generated using mathematical curves (specifically Bezier paths). These shapes must continuously morph and evolve over time using dynamic sine wave functions to create a fluid, organic effect.
  3. Physics Simulation: Implement basic, frame-by-frame physics to manage the sphere's position, velocity, and soft-body deformation. Collision detection must be precise enough to prevent the sphere from intersecting the moving boundaries.
  4. Aesthetics & Style: The visual design must adhere to a Zen-like abstract art style. Use a strictly monochromatic pastel color palette. Emphasize spatial depth and fluid motion by utilizing deep, soft shadows (shadowBlur on the canvas context) to define the sphere and the geometric structures.

AUDIO REQUIREMENTS:

  1. API: Implement all sound synthesis and playback using the Web Audio API.
  2. Sound Design: The game must feature ambient pulse sounds that react to the sphere's motion. Crucially, implement reactive acoustic sweeps or tones that trigger precisely upon the sphere passing through a dynamic structural gate, providing specific feedback for successful evasion.

CODING INSTRUCTIONS:

Structure the resulting code logically. The JavaScript should manage the game loop, the physics updates, the procedural geometry morphing, and the Web Audio synthesis simultaneously. Ensure the entire system is tightly integrated into the single HTML file. Focus on clean, efficient, and highly optimized vanilla JavaScript.

Original prompt (before our improvements)

I want you to act as a top-tier physics-based gameplay programmer. Produce a SINGLE FILE (index.html) build of an architectural flight evasion game. GAME SPEC: Title: Gravity Flux Core mechanic: Navigate a self-inflating soft-body sphere through an environment of closing and expanding organic geometric gaps. Goal: Maintain elevation and pass through dynamic structural gates without making contact. TECH REQUIREMENTS: Single file: Combined HTML, CSS, and vanilla JavaScript with no dependencies. Rendering: 2D Canvas API. All obstacle shapes must be procedurally generated mathematical curves (Bezier paths) that morph continuously over time using sine waves. Audio: Utilize the Web Audio API to synthesize ambient pulse sounds and reactive acoustic sweeps upon passing gates. Design style: Zen-like abstract art style. Uses a monochromatic pastel palette with deep soft shadows (shadowBlur on canvas) to emphasize spatial depth and fluid motion.