Nonogram - Picture Cross Puzzle Game

Seele01-Flash
By
Nonogram is a captivating picture cross puzzle game where you fill grid squares with color to reveal stunning hidden images. Use logic and number clues to solve each puzzle in this brain-training experience.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "Nonogram Logic Puzzle". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style:** A "Cozy" and clean aesthetic using an Orthographic Camera to maintain a perfect grid perspective without distortion. * **Grid Design:** The game board should be a 10x10 grid of 3D tiles (slightly extruded cubes with beveled edges). * **State - Empty:** White or light grey matte material. * **State - Filled:** Dark obsidian or deep blue glossy material (animates with a slight "pop" or rotation when filled). * **State - Crossed Out:** A red "X" texture or geometry overlaid on the tile. * **Background:** A soothing, slowly rotating gradient background (e.g., Deep Sky Blue to Purple) or a starry sky particle system to match the reference image's "night/dream" vibe. * **Performance:** Use `InstancedMesh` for the grid tiles to ensure 60FPS on mobile devices. Use simple geometries for the "X" markers. ### 2. Audio Requirements * **BGM:** A relaxing, lo-fi, or acoustic guitar track that loops seamlessly to aid concentration (Cozy Game style). * **Sound Effects (SFX):** * **Tap/Fill:** A satisfying "bubble pop" or "soft wood block" click. * **Marking X:** A quick "pencil scratch" sound. * **Error:** A dull "thud" or subtle buzzer (not too harsh). * **Row/Col Completion:** A harmonious chime or glissando. * **Level Complete:** A short, celebratory fanfare. ### 3. Gameplay Loop * **Level Generation:** Create a logic to accept a 10x10 binary array (representing the hidden image). The code must dynamically calculate the "Hint Numbers" for each row and column based on this data. * **Core Mechanics:** * **Clues:** Display numbers above columns and to the left of rows (e.g., "2 5" means 2 filled blocks, a gap, then 5 filled blocks). * **Action:** The player deduces which cells to fill and which to mark as empty (X). * **Validation System:** * If the player taps a cell that *should* be filled: The cell turns dark/filled. * If the player taps a cell that *should* be empty: The move is rejected, the cell flashes red briefly, an "X" is auto-placed, and one "Life" (Heart) is deducted. * **Win Condition:** All required "Filled" cells are correctly activated. The grid then transforms into the full-color pixel art image. * **Lose Condition:** The player loses 3 lives. ### 4. Mobile Controls & Interaction * **Touch Input (Raycasting):** Implement precise Raycasting for touch events. * **Control Toggle (Crucial for Mobile):** Since mobile lacks right-click, implement a large, thumb-accessible **Toggle Switch UI** at the bottom of the screen: * **Mode A (Pencil/Fill):** Tapping a tile attempts to fill it. * **Mode B (Cross/Mark):** Tapping a tile marks it with an "X" (safe move, logic helper). * **Camera Controls:** Allow "Pinch to Zoom" and "Two-finger Drag" to pan around the board, as 10x10 grids can be small on phones. * **Haptic Feedback:** Trigger `navigator.vibrate(50)` on errors or level completion for tactile feedback. * **UI Layout:** * Hint numbers must be rendered via an HTML/CSS overlay layer (positioned absolutely over the canvas) to ensure text remains crisp on high-DPI mobile screens. * Buttons should have a minimum touch target of 48x48px. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About Nonogram

Nonogram is an engaging picture cross puzzle game that challenges your logical thinking and pattern recognition skills. Also known as Picross or Paint by Numbers, this puzzle game requires you to fill specific squares in a grid with color to gradually reveal beautiful hidden images. Each puzzle presents a unique challenge where numerical clues guide you toward the solution.

The game combines the satisfaction of solving puzzles with the joy of creating pixel art. As you progress through each level, you'll uncover intricate designs ranging from simple objects to complex artwork, all while exercising your brain and improving your logical reasoning abilities.

Core Features

Brain Training Gameplay

Nonogram offers an excellent mental workout that enhances your logical thinking, pattern recognition, and problem-solving skills. Each puzzle requires careful analysis of numerical clues and strategic planning to avoid mistakes.

Beautiful Hidden Images

Discover stunning pixel art creations as you solve each puzzle. From animals and objects to abstract designs, every completed nonogram reveals a satisfying visual reward that makes your effort worthwhile.

Hint System and Life Recovery

Get stuck on a challenging puzzle? Use the built-in hint system to get back on track. The game also features a life recovery system, so mistakes won't end your puzzle-solving journey permanently.

Cross-Platform Compatibility

Enjoy seamless gameplay across all your devices. Whether you're on desktop, tablet, or mobile phone, Nonogram adapts perfectly to your screen size and input method.

Completely Free Experience

Access all puzzle content without any payment barriers. No subscriptions, no premium features - just pure puzzle-solving entertainment available to everyone.

Game Mechanics

Understanding the Number Clues

The numbers displayed above columns and to the left of rows indicate how many consecutive squares you need to fill in that specific line. For example, a "5" means you must fill five consecutive squares, while "2 3" means two consecutive squares, followed by at least one empty space, then three consecutive squares.

Strategic Solving Approach

Successful nonogram solving relies on logical deduction rather than guessing. Start with rows and columns that have the most restrictive clues, then use the process of elimination to determine which squares must be filled or marked empty.

Operation Guide

Desktop Controls

  • Left Mouse Button : Fill squares with color
  • Right Mouse Button : Mark squares as empty with an "X"
  • Mouse Drag : Fill or mark multiple squares quickly
  • Scroll : Zoom in/out for better precision on larger puzzles

Mobile Controls

  • Single Tap : Fill squares with color
  • Double Tap : Mark squares as empty
  • Pinch Gesture : Zoom in/out for detailed work
  • Swipe : Pan around larger puzzle grids

Solving Tips

  • Always start with the most constrained rows and columns
  • Use the "X" marker to indicate squares that must remain empty
  • Look for overlapping possibilities when clues are ambiguous
  • Take advantage of edge squares for easier deduction

Why Play Nonogram?

Mental Health Benefits

Nonogram puzzles provide excellent cognitive exercise, improving concentration, logical reasoning, and attention to detail. Regular puzzle solving can help maintain mental sharpness and provide stress relief through focused, meditative gameplay.

Perfect for All Skill Levels

Whether you're new to logic puzzles or an experienced solver, Nonogram offers puzzles that scale with your abilities. Start with smaller grids and work your way up to more complex challenges as your skills develop.

Relaxing Yet Engaging

The game strikes the perfect balance between mental challenge and relaxation. The methodical process of filling squares creates a zen-like experience while keeping your mind actively engaged.

No Time Pressure

Solve puzzles at your own pace without any time limits or pressure. This makes Nonogram perfect for both quick mental breaks and extended puzzle-solving sessions.

Instantly Accessible

No downloads, installations, or registrations required. Simply open your web browser and start solving puzzles immediately. Your progress saves automatically, so you can return anytime to continue where you left off.

Frequently Asked Questions (FAQ)