Interactive Sliding Grid Puzzle Game

This is an Interactive Sliding Grid Puzzle Game. It structures a multi-level spatial logic challenge entirely within the DOM. Its function is to demonstrate complex 2D state management, collision detection, and procedural grid generation without relying on the HTML Canvas API, utilizing standard HTML elements for interactive entertainment.

Specs

• Weight: ~12 KB. Zero external dependencies.
• Performance: High. The rendering engine offloads movement interpolation to the CSS transition engine via CSS custom properties, preventing JavaScript-induced layout thrashing.
• Theming / Customization: Centralized SCSS variables control the color palette ($green, $yellow, $pink, etc.). Level design is strictly string-based matrix arrays, allowing infinite scalability.
• Responsiveness: Fluid. Relies on vh, vw, and rem units to scale the entire grid and UI proportionally to the viewport orientation.
• Web APIs: Fullscreen API.
• [!] Graceful Degradation: Fails completely without JavaScript. The game logic, level rendering, and player movement are strictly bound to the script execution.

Anatomy

The architecture separates the visual styling from the mathematical grid logic.

• HTML (The Skeleton): A flat container (#game) augmented with UI overlays (#controls, #timer, #title-screen). The grid cells are dynamically injected empty <div> nodes.
• CSS (The Skin): SCSS compiles into a responsive layout. The player’s position is dictated entirely by inline CSS variables (--positionLeft, --positionTop) multiplied by the calculated cell size (--cell).
• JS (The Nervous System): A state machine. It parses string arrays into coordinates, listens to keyboard/click events, calculates the trajectory until an obstacle is hit, updates the CSS variables, and evaluates win/loss conditions.

Logic

The core mechanism is “Axis-Aligned Collision Raycasting”:

const relevantRocks = rocks
  .filter((rock) => rock[axis] === position[axis]) 
  .filter((rock) =>
    movingForward
      ? rock[perpendicularAxis] > position[perpendicularAxis]
      : rock[perpendicularAxis] < position[perpendicularAxis]
  ); 

const minmax = movingForward
  ? Math.min(...relevantRocks.map((rock) => rock[perpendicularAxis]))
  : Math.max(...relevantRocks.map((rock) => rock[perpendicularAxis]));

Instead of stepping through the grid cell-by-cell every frame, the engine calculates the exact final destination instantly. By filtering the obstacle array (rocks) to only those sharing the player’s current axis, and then finding the closest one in the direction of travel (Math.min or Math.max), the script determines the exact stopping coordinate. The CSS transition simply connects the start and end points smoothly.

Feel

Frictionless and absolute. The player block doesn’t just move; it glides instantly and snaps perfectly against boundaries with rigid mathematical precision. The lack of deceleration emphasizes the puzzle nature of the interface — every input yields a strict, calculated spatial outcome.