Shape Fold - Interactive Puzzle Game

Seele01-Flash
By
Shape Fold is an innovative folding puzzle game that revolutionizes the traditional jigsaw experience. Drag connected puzzle pieces to assemble beautiful objects from history, nature, and culture.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "**Shape Fold - Kinetic Physics Puzzle**". Please read the following detailed game design requirements first, and then generate the code accordingly. Note that since Three.js is a 3D library, but this game operates on a 2D plane, you must lock physics constraints to simulate a flat surface. ### 1. Assets & Environment * **Visual Style:** "Digital Blueprint" aesthetic. Use an **Orthographic Camera** to create a strictly flat, 2D look despite using 3D meshes. * **The Object (Level Design):** Create a segmented "Greek Temple" structure (columns and a roof pediment) broken into hinged segments. * **Meshes:** Low-poly, flat extruded geometries representing the puzzle shards. * **Colors:** Muted earth tones (beige, sandstone) for the pieces, with thick dark outlines (using `LineSegments` or a Toon Shader) to separate segments clearly. * **Joints:** Visually represent the "hinges" or pivot points as small white circles with dark outlines where pieces connect. * **Background:** A paper-textured off-white background with a subtle, regular dot grid (bullet journal style) to guide alignment. * **Mobile Optimization:** Use simple materials (`MeshBasicMaterial` or `MeshToonMaterial`) to maintain high FPS. Avoid complex lighting; use ambient light to keep everything bright and legible. ### 2. Audio Requirements * **BGM:** A calm, "Zen" Lo-fi track or acoustic guitar loop. It should be unobtrusive and aid concentration. * **Sound Effects (SFX):** * **Click/Clack:** A wooden toy sound when rigid bodies collide. * **Squeak:** A very subtle mechanical friction sound when a hinge rotates rapidly. * **Snap/Chime:** A satisfying "lock-in" sound when the puzzle is successfully solved. * **Touch:** A soft "pop" sound when the player grabs a piece. ### 3. Gameplay Loop * **Physics Engine Integration:** Use **Cannon.js** (or enable a simple physics simulation). It is critical that all pieces are RigidBodies connected by **HingeConstraints**. * **Constraint Logic:** The Z-axis position and X/Y rotation must be locked. Pieces can only move on the X/Y plane and rotate around the Z-axis (at the hinge points). * **Mechanic:** The puzzle starts "unfolded" or crumpled. The player drags specific pieces. Because they are linked by hinges, dragging one piece pulls or rotates the others. * **Collision:** Pieces should collide with each other physically, preventing them from passing through one another (unless the specific puzzle design allows layering—for this MVP, assume rigid collision). * **Win Condition:** The player must manipulate the hinged chain until it matches a faint, background "Target Silhouette" of the completed temple. Once aligned (within a margin of error), the pieces freeze, turn a solid gold color, and a victory particle effect plays. ### 4. Mobile Controls & Interaction * **Touch Input:** Implement Raycasting for touch events (`touchstart`, `touchmove`, `touchend`). * **Drag Mechanism:** The user drags a piece, but they are actually applying a physics force or a mouse-joint constraint to that specific rigid body. * **Orientation:** **Portrait Mode** preferred (to allow vertical folding chains). * **Visual Feedback:** * When a piece is touched, slightly brighten its color to indicate selection. * If using vibration API, trigger a tiny haptic pulse (10ms) when pieces collide hard. * **UX Safety:** Prevent the default browser scroll/zoom behavior (`touch-action: none` in CSS) so the canvas handles all input. Ensure the hit-boxes for the "hinges" and pieces are generous enough for fat-finger interaction. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About Shape Fold

Shape Fold is a revolutionary puzzle game that brings a fresh twist to the classic jigsaw puzzle format. Unlike traditional puzzles where pieces are separate, Shape Fold features interconnected pieces that physically interact with each other, creating a unique folding and assembly experience. This innovative mechanic makes some puzzles surprisingly easier while others become delightfully challenging.

The game presents aesthetically pleasing levels featuring diverse objects from history, culture, nature, animals, and many other fascinating categories. Each puzzle reveals a beautiful illustration once completed, making every solution rewarding and visually satisfying.

Core Features

Revolutionary Connected Piece System

Shape Fold's standout feature is its interconnected puzzle pieces. Every piece remains physically connected to others, creating a web-like structure that you can manipulate and fold. This unique system:

  • Creates dynamic interactions between pieces as you move them
  • Adds realistic physics to puzzle solving
  • Generates multiple solution paths for creative problem-solving
  • Eliminates lost pieces since everything stays connected

Diverse and Beautiful Content

Explore a rich variety of puzzle themes including:

  • Historical landmarks and architectural wonders
  • Cultural artifacts and traditional symbols
  • Natural phenomena and landscapes
  • Animal kingdom creatures and wildlife
  • Everyday objects with artistic flair

Brain Training Benefits

Shape Fold serves as an excellent brain training tool that enhances:

  • Spatial reasoning and visual perception
  • Problem-solving skills through creative thinking
  • Pattern recognition and logical deduction
  • Hand-eye coordination through precise movements
  • Patience and focus during complex assemblies

Gameplay Mechanics

The core gameplay revolves around manipulating connected puzzle pieces to reveal the underlying object. Players must:

  1. Analyze the shape structure to understand piece relationships
  2. Experiment with different configurations by dragging pieces
  3. Observe how pieces interact when moved or rotated
  4. Find the perfect arrangement that reveals the complete image
  5. Enjoy the satisfaction of watching the object come together

Operation Guide

Desktop Controls: - Mouse cursor : Click and drag to move puzzle pieces - Left click : Select and manipulate individual pieces - Drag movement : Pull pieces to explore different positions

Mobile Controls: - Touch and drag : Use your finger to move pieces around - Tap : Select specific pieces for manipulation - Swipe : Smoothly reposition pieces across the screen

The intuitive control system makes Shape Fold accessible to players of all ages and skill levels.

Why Play Shape Fold

Perfect for All Ages

Shape Fold appeals to a broad audience: - Children develop spatial skills and problem-solving abilities - Adults enjoy relaxing brain exercise and stress relief - Seniors maintain cognitive function through engaging challenges - Puzzle enthusiasts discover a fresh take on familiar mechanics

Educational Value

Beyond entertainment, Shape Fold offers educational benefits: - Improves geometric understanding through shape manipulation - Enhances logical thinking via cause-and-effect relationships - Develops patience and persistence through challenging puzzles - Encourages creative exploration of multiple solution approaches

Accessibility and Convenience

  • Completely free with no hidden costs or premium content
  • No downloads required - play instantly in your browser
  • Cross-platform compatibility works on computers, tablets, and smartphones
  • Quick sessions perfect for short breaks or extended play
  • Progressive difficulty accommodates beginners to experts

Relaxing Yet Stimulating

Shape Fold strikes the perfect balance between relaxation and mental stimulation. The beautiful visuals and smooth interactions create a meditative experience, while the puzzle-solving challenges keep your mind actively engaged.

Whether you're looking for a quick brain teaser during a coffee break or an extended puzzle-solving session, Shape Fold delivers the most exciting folding experience available on the web.

Frequently Asked Questions (FAQ)