Draw Line - Creative Puzzle Drawing Game

Seele01-Flash
By
Draw Line is an innovative puzzle game that combines creative drawing with physics-based problem solving. Guide your red stickman hero to the castle by drawing strategic paths while avoiding obstacles.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "Draw Line". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style**: 3D Low-poly cartoon aesthetic with high color saturation. The scene should look clean and inviting, similar to "Hyper-casual" mobile games. * **Character**: A red 3D Stickman (Ragdoll) consisting of simple geometric shapes (sphere head, cylindrical limbs). The character must hold a "handlebar" or "hook" mechanism intended to slide along lines. * **The Line (Core Asset)**: Dynamic 3D mesh generation. When the player draws, generate a `TubeGeometry` along a `CatmullRomCurve3` to represent a rope or wooden rail. Texture it with a wood or rope pattern. * **Environment**: * **Goal**: A stylized medieval stone tower with a waving red flag (cloth simulation or simple animation) on top. * **Background**: A soothing Cyan-to-Blue vertical gradient skybox to contrast with the red character. * **Obstacles**: Floating platforms, spinning saw blades, or spike traps that must be avoided. * **Mobile Optimization**: Use `InstancedMesh` for repeating environment blocks (like castle bricks). Limit dynamic lights to one Directional Light (casting shadows) and one Ambient Light to ensure 60FPS on mobile devices. ### 2. Audio Requirements * **BGM**: A lighthearted, looping "pizzicato strings and marimba" track typical of casual puzzle games. It should be unobtrusive. * **Sound Effects (SFX)**: * **Drawing**: A "scribbling" or "chalk on board" sound that loops while the user is dragging their finger. * **Action**: A "zip-line" sliding sound (whirring) when the character moves down the line. * **Impact**: A comical "thud" or "boing" if the ragdoll hits an obstacle. * **Victory**: A bright fanfare or "ding" sound when touching the castle flag. * **UI**: Soft "pop" sounds for button clicks. ### 3. Gameplay Loop * **Phase 1: Planning/Drawing**: The game starts frozen or in "Edit Mode". The physics simulation is paused. The player views the start point (Hero) and the end point (Castle). * **Phase 2: Execution**: * The player draws a continuous line on the screen. The line has a maximum length (displayed as an "Ink Meter"). * Upon releasing the finger, physics activates. The Hero (attached to the handlebar) drops onto the drawn line. * **Physics Mechanics**: Use a physics engine (like Cannon.js or Ammo.js). The handlebar should have a constraint ensuring it slides along the drawn mesh but can fall off if the angle is too steep or upside down. The Stickman should dangle physically (ragdoll). * **Win Condition**: The Hero successfully slides down the line and collides with the "Flag" trigger zone at the castle. * **Fail Condition**: The Hero falls into the void, hits a "Spike" obstacle, or gets stuck and stops moving for >3 seconds. * **Scoring**: 3-Star system based on "Ink Used" (shorter lines = more stars) and avoiding non-lethal obstacles. ### 4. Mobile Controls & Interaction * **Touch Input**: * **Drawing**: Map 2D touch coordinates (`touchstart`, `touchmove`) to a 3D plane (using Raycaster) positioned at the character's depth ($z=0$). * **Smoothing**: Apply a smoothing algorithm to the raw touch input points before generating the `TubeGeometry` to prevent jagged lines. * **Screen Orientation**: Portrait Mode (Vertical) preferred to allow for vertical level designs (dropping down to the castle). * **UI Layout**: * **Top**: "Level" indicator and "Ink Meter" bar. * **Top-Right**: "Retry" button (icon: circular arrow), minimum touch target 44x44px. * **Victory Screen**: A modal pop-up with animated stars and a "Next Level" button. * **Haptic Feedback**: Trigger a light vibration (using `navigator.vibrate`) when the character hits an obstacle or reaches the goal. Trigger a heavy vibration if the player fails. 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 an addictive puzzle game that challenges your creativity and strategic thinking. In this engaging physics-based adventure, you control a charming red stickman character who needs your help to reach a medieval castle. The game's unique mechanic allows you to literally draw the path to victory, making each level a canvas for your problem-solving skills.

The game features intuitive drawing controls where you simply drag your mouse to create lines that serve as ziplines or paths for your hero. With its colorful 3D graphics and smooth physics engine, Draw Line offers a satisfying blend of creativity and logical thinking that keeps players coming back for more.

Core Features

Creative Drawing Mechanics

The heart of Draw Line lies in its innovative drawing system. You have complete freedom to draw any path you imagine, whether it's a straight line, curved route, or complex zigzag pattern. The physics engine responds realistically to your creations, making each drawn line feel natural and responsive.

Three-Star Rating System

Each level can be completed with varying degrees of success. While touching the castle flag with your hero (still holding the bar) completes the level, achieving a perfect run without hitting obstacles earns you three stars. This system encourages multiple playthroughs and strategic optimization.

Progressive Challenge Design

What starts as simple point-to-point drawing evolves into complex obstacle courses. Later levels introduce moving barriers, dangerous spikes, and tricky terrain that require careful planning and precise drawing skills.

Speed-Based Strategy

Drawing speed matters! Quick, decisive lines often work better than overthinking your approach. The game rewards both planning and instinctive reactions, creating a perfect balance between strategy and action.

Cross-Platform Accessibility

Play seamlessly on desktop computers or mobile devices through any modern web browser. No downloads required – just open and start drawing your way to victory.

Gameplay Guide

The objective is straightforward but engaging: draw a line from your red stickman hero to the castle flag. Your character will grab onto the line and slide along it like a zipline. Success requires reaching the castle while still holding the bar, even if you encounter some obstacles along the way.

Strategic Elements

  • Path Planning : Analyze each level's layout before drawing
  • Obstacle Navigation : Design routes that minimize contact with dangerous elements
  • Physics Consideration : Account for gravity and momentum in your line placement
  • Star Collection : Aim for perfect runs to earn maximum stars

Operation Guide

Mouse Control : Simply drag the left mouse button to draw lines. Start from your hero and draw toward the castle flag. The line becomes interactive immediately upon completion.

Touch Control : On mobile devices, use your finger to draw paths directly on the screen.

Tips for Success : - Draw smooth, continuous lines for better character control - Consider the angle of your line – steep angles create faster slides - Plan your route to avoid obstacles while maintaining momentum - Don't hesitate – sometimes quick drawing works better than overthinking

Why Play Draw Line

Draw Line stands out in the puzzle genre by combining artistic expression with logical problem-solving. It's perfect for players who enjoy creative challenges and physics-based gameplay. The game offers:

  • Instant Accessibility : No registration or downloads required
  • Endless Creativity : Each level can be solved in multiple ways
  • Stress Relief : Simple mechanics make it perfect for quick breaks
  • Skill Development : Improves spatial reasoning and planning abilities
  • Universal Appeal : Suitable for all ages and skill levels

Whether you're looking for a quick mental break or an engaging puzzle challenge, Draw Line delivers satisfying gameplay that grows with your abilities.

Frequently Asked Questions (FAQ)