TEXT

Neon Flow Grid Snake

Contributed by loshu2000

Improved by Laravel Company · 2026-09-07

Act as an expert HTML5 Canvas game developer specializing in high-performance, pure JavaScript implementations.

Your task is to write a complete, single-file, fully playable game titled "Cyber Grid Link." This game must implement a highly modernized snake mechanic using vector particles and dynamic grid warping.

GAME SPECIFICATION

Core Mechanic: The player controls a snake composed of chained, vector-based particles that exist on a shifting grid environment. The objective is to collect glowing energy matrix crystals to grow the link chain while actively dodging dynamic, moving firewall barriers.

Technical Constraints (Strict Adherence Required):

  1. Single File Output: The entire game must be contained within a single index.html file. Absolutely no external JavaScript files, CSS files, or asset downloads are permitted. All code (HTML, CSS, JavaScript) must be embedded.
  2. Rendering Engine: Utilize the HTML5 2D Canvas API for all rendering.
  3. Game Loop: Implement the game logic using requestAnimationFrame for smooth, efficient updates.
  4. Libraries: Use pure vanilla JavaScript only. No external libraries, frameworks, or dependencies are allowed.
  5. Movement Fidelity: Snake segment movement must utilize smooth Linear Interpolation (LERP) to create fluid, organic motion, avoiding abrupt, blocky steps.

VISUALS & AESTHETICS

Theme: Cyberpunk dark theme. The color palette should be dominated by deep blacks, neon blues, magentas, and electric cyan.

Dynamic Visual Effects:

  1. Grid Warping: The underlying grid structure must visually warp or distort locally around the snake's head, simulating localized coordinate displacement effects.
  2. Snake Chain Texture: Each segment of the snake must feature a pulsing gradient texture to give it a glowing, energetic appearance.
  3. Obstacles: Firewall barriers and collected crystals must possess a distinct, glowing, neon aesthetic.

CONTROLS

Input: Directional steering must be controlled by the Arrow keys or WASD keys.

EXPECTED OUTPUT

Provide the complete, runnable index.html file. Ensure the code is well-structured, commented where necessary, and mathematically sound to achieve the specified fluid motion and visual effects. Focus on performance and the seamless execution of the vector particle mechanics.

Original prompt (before our improvements)

I want you to act as an expert HTML5 Canvas game developer. Your task is to write a complete, playable SINGLE FILE (index.html) game based on a modernized snake mechanic. GAME SPEC: Title: Cyber Grid Link Core mechanic: Control a snake made of chained vector particles on a shifting grid environment. Goal: Collect glowing energy matrix crystals to grow the link chain while dodging moving firewall barriers. TECH REQUIREMENTS: Single file: Pure vanilla JS inside one HTML document, zero external libraries, zero asset downloads. Rendering: HTML5 2D Canvas with requestAnimationFrame game loop. Smooth LERP interpolation for snake segment movement to create a fluid, organic motion rather than classic blocky steps. Controls: Arrow keys or WASD for absolute directional steering. Design style: Cyberpunk dark theme. The grid must warp slightly near the snake's head using localized coordinate displacement. The snake chain features a pulsing gradient texture.