🐍 Snakey - Escape The Matrix

A modern twist on the classic Snake game, built with React 19, Vite, Tailwind CSS, and Phaser 3.

What starts as a simple, confined 800x600 arcade game quickly turns into an interactive web-breaking experience where the snake breaks out of its canvas and consumes the actual DOM elements of the website.

✨ Features

• Classic Gameplay: A polished retro snake experience with smooth grid-based movement and responsive controls.
• Escape Mode: Upon reaching a score of 100, the mysterious Red Pill appears. Eating it shatters the boundaries of the canvas, allowing the snake to roam freely across the entire webpage.
• Universal DOM Eating Sandbox: Fully decoupled from local stylesheets and static class configurations. The snake can crawl on any website (e.g., Wikipedia, Google, blogs) and physically consume HTML elements (text, dropdowns, inputs, progress indicators, media, and cards) with dynamic visual card background extraction.
• Dynamic Content Support: Relies on a reactive observer that immediately adapts when new elements are injected or loaded dynamically (e.g. lazy-loaded content, scrolls).
• Cinematic Viewport Finale: Once you're done eating elements, crash the snake into any edge of the browser viewport to trigger a dramatic end-game sequence where the website collapses, folds, and falls off the screen, leaving a pitch-black void before resetting.

🧠 The DOM Destruction Engine (Architecture)

The heart of Snakey is its custom DOM parser and rendering pipeline, built to bridge the gap between Phaser's WebGL/Canvas game loops and the browser's Document Object Model (DOM).

                 [ Phaser Game Loop ]
                          │
            Detects head coordinate overlap
                          │
                          ▼
                    [ DomManager ]
             Orchestrates & tracks state
             │            │            │
      Scans dynamic       │      Triggers anims
      DOM updates         │      upon chomps
             │            │            │
             ▼            ▼            ▼
       [ DomScanner ]  [ Physics ]  [ DomAnimator ]
      Recurses shadow  Synchronizes  Applies tag-specific
       DOM / elements   rect bounds  CSS & pseudo transitions

🔍 1. DomScanner (The Parser)

The DomScanner acts as the parser. It crawls the webpage DOM and generates target coordinate bodies for Phaser.

• Recursive Tree Walking: Walks the DOM tree node-by-node. If it finds text nodes, it safely splits them character-by-character and wraps them inside individual .edible-char spans to allow letter-by-letter consumption.
• Shadow DOM Traversal: Recursively traverses shadow roots (shadowRoot), unlocking the ability to scan inside custom Web Components and embedded widgets.
• Computed Visibility Filtering: Checks computed style values (window.getComputedStyle) to ignore elements hidden via display: none, visibility: hidden, or opacity: 0.
• Phaser Canvas Excluder: Automatically identifies the Phaser game canvas and prevents the snake from eating the container rendering the game.
• Multi-Element Mapping: Targets a wide array of tags: img, svg, video, input, textarea, button, a, select, progress, meter, canvas, hr, iframe, and audio.
• Universal Card Detection: Dynamically identifies card-like block layouts on any webpage using style-based heuristics (backgrounds, borders, shadows, and dimensions) rather than static class name checks.

⚙️ 2. DomManager (The Orchestrator)

The DomManager acts as the main bridge keeping state and listening to browser viewport changes.

• Dynamic Mutation Observer: Integrates a MutationObserver to watch for dynamically added elements (lazy-loaded elements, infinite scrolling) and triggers rescans safely by temporarily disconnecting/connecting to prevent infinite loops.
• Viewport Scroll-Aware Bounds: Keeps snake movement bound within the current viewport (window.scrollX / window.scrollY limits), allowing the snake to feel like it scrolls dynamically with the page.
• Collision Syncing: Compares Phaser's head coordinates to domBodies coordinates (updated dynamically on resize/scroll) and flags them in memory.
• Canvas Lifecycle Restoration: When the game restarts, it completely restores the Phaser canvas back to its original layout container (#game-container-shell), strips off full-screen fixed styling, resets the scale resolution back to 800x600, and cleans up observers.

🎨 3. DomAnimator (The Animator)

The DomAnimator triggers specific transitions on HTML elements when eaten by the snake:

• select (Dropdown): Dynamically expands the dropdown option list (select.size) for 300ms, simulating a visual dropdown click, before chomping and shrinking.
• hr (Horizontal Line): Scales horizontally down (scaleX(0)) to center before fading.
• progress / meter: Animates the value bar draining down to 0 over 200ms before scaling to 0.
• input[type=checkbox] / input[type=radio]: Triggers a rapid click toggle (6 times at 50ms interval) to simulate click madness before disappearing.
• input / textarea: Shakes horizontally (vibration effect) for 400ms before spinning and shrinking.
• audio / video: Instantly speeds up playback rate to 3.0x and fades out audio volume to 0 (if playing) before pausing and shrinking.
• Universal Card Chomping: Lazily clones any card's computed styles (shadow, border, background, border-radius) onto an absolutely positioned dynamic background wrapper div (.dynamic-card-bg), hides the original card background, and scales the wrapper to 0. This allows card backgrounds to crumble on any website while keeping inner text intact and edible.
• Descendant Cleanup: Automatically marks all children of eaten elements as eaten to avoid leaving "ghost" collider blocks.

🚀 Getting Started

Prerequisites

Make sure you have Node.js installed on your machine.

Installation

1. Clone the repository

   git clone https://github.com/andreyyste/snakey.git
   cd snakey
   

2. Install dependencies

   npm install
   

3. Start the development server

   npm run dev
   

4. Play! Open http://localhost:5173 in your browser. Use the Arrow Keys or WASD to control the snake.

🛠️ Built With

• React 19
• Vite 8
• Phaser 3
• Tailwind CSS 4
• TypeScript

📜 License

This project is open-source and available under the MIT License.