SVG Path Zuma Marble Shooter

This is an SVG Path Zuma Marble Shooter. It replicates the classic ball-matching arcade mechanic using a combination of SVG geometric data and a custom DOM-based rendering engine. Its function is to provide a complete, interactive game loop where players fire colored marbles to create matches of three or more along a complex, winding track defined by an invisible SVG path.

Specs

• Weight: ~15 KB (Logic only). No heavy external physics engines.
• Performance: High. It uses requestAnimationFrame for synchronization and offloads spatial positioning to CSS transforms.
• Theming / Customization: Easily adaptable via the DefaultColorList array in TypeScript and the SVG path string in the constructor.
• Responsiveness: Scales via transform: scale() applied to the main .container, allowing the game coordinates to remain consistent while fitting different screen sizes.
• Graceful Degradation: Completely script-dependent. Fails to a static background if JavaScript is disabled.

Anatomy

The component is engineered as a hierarchy of classes managing physical entities.

• HTML (The Skeleton): A root container housing the game world, scoring HUD, and state popups (Start, Pause, Game Over).
• CSS (Кожа): Uses SCSS to create a jungle atmosphere with swaying leaves (animated via @keyframes) and a noise-textured vignette for depth.
• JS/TS (The Nervous System):
  • Marble: Individual units with ID-based tracking and overlap math.
  • Player: The central frog shooter that follows the mouse (lookAt) and calculates fire vectors.
  • Zuma: The core engine that manages the chain of marbles, collision logic, and the game loop.

Logic

The standout technical feature is “Path Length Percentile Mapping.” This is the Glyph-logic of the snippet:

const pos = this.Path.getPointAtLength(marbleData.percent * this.PathLength);
marbleData.marble.setPosition(pos.x, pos.y);

Instead of using a standard XY coordinate grid for the marble chain, the engine treats the entire track as a floating-point progress bar (0 to 1). By utilizing the getPointAtLength Web API, the code translates a simple “percentage of completion” into exact 2D coordinates on a complex curve. This allows the game to support any arbitrary SVG path shape (spirals, zig-zags) without changing a single line of collision or movement logic.

Feel

Smooth and mechanical. The marbles move with a viscous momentum, and the “snap” when a fired marble joins the chain feels physically grounded. The swaying background foliage and the subtle noise filter remove the “flatness” of standard DOM games, creating a surprisingly immersive arcade experience.