Draw Line - Drawing Puzzle Adventure

Seele01-Flash
By
Draw Line is an engaging puzzle game that combines creativity with strategy. Guide your stickman hero to the castle by drawing the perfect path while avoiding obstacles and collecting stars.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "Draw Line Physics Puzzle". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style**: Use a bright, vibrant, "Hyper-casual" aesthetic. * **Background**: A simple solid color or subtle gradient sky blue (#87CEEB) to keep focus on gameplay. * **Character**: A red, 3D low-poly "Stickman" or "Ragdoll" figure. The character must have physical joints (Using simple geometries like spheres for joints and cylinders for limbs) to support ragdoll physics. The character should be hanging from a horizontal bar (black cylinder) by their hands. * **Goal**: A stylized, low-poly medieval castle tower with a waving red flag on top. The texture should look like grey stone bricks. * **The "Line"**: The drawn line should be a 3D tube geometry or a thick line mesh with a wood or rope texture, appearing dynamically as the user draws. It needs to look solid enough to support the character's weight. * **Optimization**: Ensure low polygon counts for all models. Use basic materials (MeshLambertMaterial or MeshToonMaterial) for performance on mobile devices. Shadows should be soft and minimal (e.g., a single directional light). ### 2. Audio Requirements * **BGM**: A lighthearted, pizzicato-string or marimba-based track that loops seamlessly. It should feel "thinking-time" but playful. * **SFX**: * **Drawing**: A "scribbling" or "chalk on board" sound loop that plays only while the finger is moving on the screen. * **Physics Impact**: A comical "thud" or "clunk" when the character or the line hits an obstacle. * **Win**: A triumphant brass fanfare or chime glissando when touching the flag. * **Fail**: A funny "wah-wah-wah" or slide whistle sound if the character falls off screen or hits a fatal trap. * **Voice**: A funny "Whoa!" or grunt from the stickman when swinging violently. ### 3. Gameplay Loop * **Phase 1: Planning/Drawing**: The game starts frozen or in slow-motion. The player traces a line on the screen. This line instantly converts into a physical 3D object (a static collider or a kinematic body depending on level design). The line must connect from the character's start point towards the goal. * **Phase 2: Action**: Once the player lifts their finger (or hits a "Play" button), physics activates. The character (who is holding a sliding handle or hook) slides down the line due to gravity. * **Physics Constraints**: * The character must behave like a ragdoll but keep hands attached to the specific "handle" object that slides on the line. * The line acts as a rail. * **Win Condition**: The character successfully slides down the drawn path and collides with the Castle/Flag hitbox. * **Fail Condition**: The character falls off the line, gets stuck and stops moving, or hits a "spike" obstacle. * **Scoring**: Based on the amount of "ink" (line length) used. Less ink = 3 stars. ### 4. Mobile Controls & Interaction * **Touch Controls**: * **Drawing**: Implement a robust raycaster that maps 2D touch coordinates to the 3D world plane (Z=0). * The line drawing should be smooth. Use linear interpolation between touch points to prevent jagged lines if the frame rate drops. * **Orientation**: Portrait mode (Vertical) is preferred for one-handed play. * **UI Elements**: * A prominent "Retry" button (icon: circular arrow) in the top right (min 44x44px touch target). * An "Ink Meter" bar showing how much drawing limit remains. * **Feedback**: * **Visual**: A particle poof effect when the line is finished drawing. * **Haptic**: A very light vibration tick as the user draws (if supported), and a heavier vibration upon winning or hitting an obstacle. ### 5. Code Structure * Use `Cannon.js` or `Ammo.js` for the physics engine simulation (essential for the ragdoll and sliding mechanics). * Create a clean `GameManager` class to handle state transitions (Drawing -> Simulating -> Win/Lose). * Ensure the camera is an OrthographicCamera to make drawing intuition easier for the player. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About the Game

Draw Line is a captivating puzzle adventure that challenges your creativity and strategic thinking. In this addictive drawing game, you become the architect of your hero's destiny, sketching paths through increasingly complex levels. Your mission is simple yet engaging: help a brave stickman reach the majestic castle while overcoming various obstacles along the way.

The game features charming 3D graphics with a vibrant, cartoonish art style that appeals to players of all ages. Each level presents unique challenges that require both quick thinking and precise drawing skills to master.

Core Features

Creative Problem Solving

Every level in Draw Line presents a unique puzzle that requires creative thinking. You'll need to consider physics, timing, and obstacle placement as you sketch the perfect route for your hero.

Progressive Difficulty System

Start with simple paths and gradually face more complex challenges. The game introduces new obstacles and mechanics as you progress, keeping the experience fresh and engaging.

Star Rating System

Each level can be completed with up to three stars based on your performance. Achieve perfect runs by avoiding all obstacles and reaching the castle efficiently to earn maximum stars.

Intuitive Drawing Controls

The game features smooth, responsive drawing mechanics that make sketching paths feel natural and satisfying. Your creativity is the only limit to the solutions you can create.

Cross-Platform Compatibility

Enjoy seamless gameplay across desktop and mobile browsers without any downloads or installations required.

Gameplay Mechanics

Path Drawing Strategy

Success in Draw Line requires more than just connecting two points. You must consider: - Physics simulation : Your drawn lines affect how the stickman moves - Obstacle avoidance : Plan routes that minimize contact with hazards - Timing considerations : Drawing speed impacts your hero's momentum - Multiple solutions : Most levels offer various creative approaches

Challenge Elements

As you progress through the castle adventure, you'll encounter: - Moving obstacles that require precise timing - Complex terrain that demands creative routing - Limited drawing space that tests your efficiency - Bonus objectives that reward skillful play

Controls Guide

Mouse Controls (Desktop) : - Left Click + Drag : Draw lines and paths for your hero - Mouse Movement : Navigate menus and plan your route

Touch Controls (Mobile) : - Touch + Drag : Draw paths with your finger - Tap : Interact with menu options

The controls are designed to be intuitive, allowing players to focus on creativity rather than complex button combinations.

Why Play Draw Line

Perfect for Casual Gaming : With its easy-to-learn mechanics and short level format, Draw Line is ideal for quick gaming sessions during breaks or commutes.

Stimulates Creativity : Unlike traditional puzzle games with predetermined solutions, Draw Line encourages creative problem-solving and artistic expression.

Family-Friendly Entertainment : The charming visuals and non-violent gameplay make it suitable for players of all ages, from children to adults.

No Commitment Required : As a free browser game, you can start playing immediately without downloads, subscriptions, or lengthy tutorials.

Endless Replayability : The star system and multiple solution approaches mean you can revisit levels to improve your performance and discover new strategies.

Whether you're looking for a quick mental challenge or a relaxing creative outlet, Draw Line delivers an entertaining experience that combines the satisfaction of puzzle-solving with the joy of artistic creation.

Frequently Asked Questions (FAQ)