Zig-Zag Lines

Seele01-Flash
By
Zig-Zag Lines is a mesmerizing free avoider game where you guide a laser beam through colorful obstacles. Match colors to score points in this endless, fast-paced challenge that's perfect for quick gaming sessions.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "Zig-Zag Lines". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style:** Cyberpunk/Neon Arcade aesthetic. Deep black background `#000000` with faint, semi-transparent geometric patterns (triangles, circles) floating in the distance to provide depth. * **Player Character:** A glowing "Laser Head" (small cube or sphere) that leaves a persistent ribbon trail (using `Three.js` trail renderer logic or simple mesh extrusion). The player color must be dynamic, emitting a strong neon glow (using `UnrealBloomPass`). * **Targets/Obstacles:** 3D Cubes rotated 45 degrees (diamond shape) floating in the path. They must be brightly colored (Neon Pink, Cyan, Yellow, Purple). Each cube must have a floating white number (1-9) billboarded above or textured onto it. * **Lighting:** No directional shadows needed to save performance. Use Ambient Light and high Emissive properties on materials to create a "glow in the dark" look. * **Camera:** Top-down Orthographic camera, slightly tilted to show the 3D depth of the cubes. The camera must follow the player's forward movement smoothly. ### 2. Audio Requirements * **BGM:** A fast-paced, driving Synthwave/Retro-wave electronic track to maintain adrenaline. * **SFX:** * **Tap:** A subtle "whoosh" or digital click when changing direction. * **Score/Collect:** A high-pitched digital chime or "ding" when hitting a matching color box. * **Game Over:** A "glitch" sound effect or shattering glass sound when hitting a wrong color or wall. ### 3. Gameplay Loop * **Start:** The player starts with a random color. * **Movement:** The player moves forward (Z-axis) at a constant speed. The player *always* moves diagonally (X-axis velocity is never 0). * **Mechanic:** * **Zig-Zag:** Tapping the screen instantly toggles the X-axis direction (Left <-> Right), creating a zig-zag movement pattern. * **Color Matching:** The path is filled with colored cubes. * If Player hits a **Same Colored Cube**: The cube disappears (particle explosion), the player gains points equal to the number on the cube, and the Player's color instantly changes to a new random color. * If Player hits a **Different Colored Cube**: Game Over immediately. * **Boundaries:** There are neon vertical lines on the far left and right. Hitting the visual edge of the screen/arena results in a Game Over. * **Progression:** The game is endless. The speed slowly increases over time. ### 4. Mobile Controls & Interaction * **Input:** Single-touch input. Tap anywhere on the screen to switch direction (Toggle Left/Right). * **Orientation:** Portrait mode (Vertical) is preferred for one-handed play. * **Feedback:** * **Visual:** Screen shake (camera shake) upon impact/death. Flash the screen white when scoring. * **Haptic:** Trigger a short vibration (10ms) on direction switch and a heavy vibration (200ms) on death (using `navigator.vibrate`). * **UI:** Minimalist HUD. Current Score displayed large at the top center. "Tap to Start" overlay before the game begins. "Restart" button (min size 44x44px) appears on Game Over. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About the Game

Zig-Zag Lines is a captivating free avoider game that combines fast reflexes with strategic color matching. Rated 3.73/5 by players, this vibrant HTML5 game transforms simple controls into an addictive endless challenge. Navigate your laser beam through a mesmerizing world of glowing colors and dynamic obstacles, where every move counts and split-second decisions determine your survival.

The game features stunning visual effects with radiant beams and captivating hues that create an immersive gaming experience. As an endless game, there's no finish line - only your skill and reflexes determine how far you'll go.

Core Features

Endless Color-Matching Challenge

The core gameplay revolves around guiding your laser beam through a maze of colored cubes. You must intercept boxes that match your current beam color while avoiding different-colored obstacles. Each successful match scores points, with different boxes offering varying point values.

Dynamic Color System

After hitting a matching colored box, your laser beam randomly changes to a new color, keeping you constantly alert and adapting your strategy. This mechanic ensures no two gameplay sessions are identical.

Multi-Platform Compatibility

  • Completely Free : No payment required, play instantly
  • HTML5 Technology : Runs smoothly in any modern web browser
  • Cross-Platform : Perfect performance on desktop and mobile devices
  • Instant Play : No downloads or installations needed
  • Mobile Optimized : Touch-friendly controls for smartphones and tablets

Immersive Visual Experience

The game features a dark background with vibrant, glowing elements that create a futuristic atmosphere. The laser effects and particle systems provide smooth, engaging visuals that enhance the gameplay experience.

Gameplay Mechanics

Zig-Zag Lines challenges players with multiple hazard types:

Color-Coded Obstacles : The primary challenge involves navigating through colored cubes. Success requires matching your laser beam's current color with the target boxes.

Dynamic Boundaries : The left and right edges of the game arena randomly change colors. Touching a boundary when it doesn't match your beam color results in game over.

Scoring System : Each colored box displays a numerical value. Collecting matching boxes adds those points to your total score, encouraging players to target high-value boxes while managing risk.

Progressive Difficulty : As an endless game, the challenge gradually increases, requiring faster reflexes and better decision-making as you progress.

Operation Guide

Desktop Controls

  • Mouse : Point and click to guide your laser beam
  • Direction : Move your mouse to control beam movement
  • Precision : Click timing determines your path through obstacles

Mobile Controls

  • Touch : Tap and drag with your finger
  • Gesture Control : Swipe to guide the laser beam direction
  • Responsive : Optimized touch sensitivity for precise control

Strategic Tips

  • Monitor your current beam color constantly
  • Plan your path to collect high-value boxes safely
  • Watch the arena boundaries - they're as dangerous as wrong-colored boxes
  • Practice smooth, controlled movements rather than erratic gestures
  • Focus on survival over high scores when starting out

Why Play Zig-Zag Lines

This game excels as a perfect casual gaming experience that's easy to learn but challenging to master. The combination of simple controls with strategic depth makes it ideal for both quick gaming sessions and extended play periods.

The free-to-play model with no hidden costs means you can enjoy the complete experience immediately. The HTML5 technology ensures smooth performance across all devices without consuming device storage space.

For fans of avoider games, physics-based challenges, and color-matching puzzles, Zig-Zag Lines offers a unique blend that keeps players engaged. The endless nature means there's always a new high score to chase, providing excellent replay value.

Whether you're looking for a brief mental break or an engaging challenge to test your reflexes, Zig-Zag Lines delivers an polished gaming experience that's accessible anywhere with an internet connection.

Frequently Asked Questions (FAQ)