Nonogram - Picture Cross Logic Puzzle Game

Seele01-Flash
By
Nonogram is a captivating logic puzzle game where you fill grid squares with colors to reveal hidden pictures. Use number clues to solve each puzzle through logical deduction and enjoy hours of brain-training fun.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "Nonogram 3D: Cozy Logic". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style:** A "Cozy Voxel" aesthetic. Instead of a flat 2D grid, the game board should be a floating platform in 3D space. * **Grid Elements:** * The grid cells should be slightly rounded cubes. * **Unfilled State:** White/Light Grey matte material. * **Filled State:** Dark Blue or Black glossy material (matches the screenshot style). When filled, the cube should slightly "pop" up or scale up with a bounce animation (using GSAP or similar tweening). * **"X" State:** A red or grey cross texture applied to the top face of the cube. * **Background:** A soothing, animated gradient background (Deep Blue to Light Blue) with slowly drifting, low-poly white stars, referencing the screenshot's atmosphere. * **Performance:** Use `THREE.InstancedMesh` for the grid cubes to ensure 60FPS on mobile devices, as grids can get large (e.g., 10x10 or 15x15). * **Lighting:** Soft ambient lighting combined with a directional light to cast soft shadows, giving depth to the filled blocks. ### 2. Audio Requirements * **BGM:** A relaxing, lo-fi or soft acoustic piano track that loops seamlessly. It should be quiet and non-intrusive to aid concentration. * **Sound Effects (SFX):** * **Tap/Select:** A satisfying wooden "thock" or bubble "pop" sound. * **Marking "X":** A distinct "pencil scratch" or paper sound. * **Error:** A gentle, low-pitched "thud" or soft buzzer (not jarring). * **Win:** A cheerful, ascending chime arpeggio. ### 3. Gameplay Loop * **Level Generation:** Initialize a 10x10 grid with a pre-defined pattern (e.g., a simple "Heart" or "Smiley Face" shape) hidden from the player. * **Clue Calculation:** Automatically calculate and display the numbers for each Row and Column based on the hidden pattern. (e.g., "3 1" means 3 filled blocks, at least one space, then 1 filled block). * **Interaction Logic:** * The player starts with 3 Lives (Hearts). * Clicking a cell checks against the hidden pattern. * **Correct:** The cell turns dark/filled. * **Incorrect:** The player loses a life, the cell is automatically marked with an "X", and the screen shakes slightly. * **Win Condition:** All correct cells are filled. Upon winning, the grid spins, and confetti particles explode. * **Lose Condition:** Lives reach 0. A "Game Over" modal appears with a "Try Again" button. ### 4. Mobile Controls & Interaction * **Camera:** Use an Orthographic Camera or a Perspective Camera with a fixed, slight isometric angle to ensure the grid is perfectly readable on small screens. * **Touch Input:** * Implement Raycaster for touch detection. * Support **Drag-to-Fill**: Allow the user to touch one cell and drag across a row/column to fill multiple cells quickly. * **UI / HUD:** * **Mode Toggle:** A large, thumb-friendly toggle switch at the bottom of the screen to switch between "Pencil Mode" (Fill) and "X Mode" (Mark Empty). * **Clue Visibility:** The row/column numbers must be large enough to read on a phone screen. Align them strictly to the grid mesh. * **Zoom/Pan:** If the grid is large, allow two-finger pinch to zoom and one-finger drag to pan the camera (only if the grid exceeds screen width). * **Feedback:** * **Haptics:** Trigger `window.navigator.vibrate(50)` on every successful tap or toggle for tactile feedback. * **Visual Cues:** Highlight the currently selected row and column (e.g., a subtle glow) to help the player track where they are looking. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About the Game

Nonogram is a beloved logic puzzle game that combines mathematical thinking with artistic revelation. Also known as Picture Cross or Picross, this engaging puzzle challenges players to fill grid squares with colors based on numerical clues, gradually revealing beautiful hidden images. The game offers a perfect blend of logical reasoning and visual satisfaction, making it an ideal choice for puzzle enthusiasts and casual gamers alike.

With its clean interface and intuitive gameplay mechanics, Nonogram provides endless hours of brain-stimulating entertainment. Each puzzle presents a unique challenge that requires careful analysis of number patterns and strategic thinking to solve.

Core Features

Nonogram delivers an exceptional puzzle experience with several standout features:

  • Completely Free : Play unlimited puzzles without any cost or subscription requirements
  • Cross-Platform Gaming : Seamlessly play on desktop computers, tablets, and smartphones
  • Intuitive Controls : Simple tap or click mechanics make the game accessible to all ages
  • Progressive Difficulty : Start with easy puzzles and gradually advance to more complex challenges
  • Hint System : Get helpful guidance when you're stuck on particularly challenging sections
  • Life Recovery : Bounce back from mistakes with the built-in life recovery feature
  • Visual Satisfaction : Watch beautiful images emerge as you solve each puzzle

Logic-Based Gameplay

Unlike guessing games, Nonogram requires pure logical thinking. Every solution can be determined through careful analysis of the number clues, making it a truly satisfying mental exercise that rewards patience and systematic thinking.

Beautiful Hidden Images

Each completed puzzle reveals a stunning picture, from simple objects to complex artistic designs. The joy of discovery adds an extra layer of motivation to keep solving puzzles.

Game Mechanics

Nonogram follows classic picture cross rules that are easy to learn but challenging to master:

Number Clues : Each row and column displays numbers indicating how many consecutive squares must be filled. For example, "5" means exactly five connected filled squares in that row or column.

Logical Deduction : Use the intersection of row and column clues to determine which squares must be filled or marked empty with an "X".

Sequential Logic : Numbers represent groups of filled squares separated by at least one empty square. Multiple numbers (like "2 3") indicate separate groups with gaps between them.

Error Prevention : The game encourages logical thinking over guessing, helping players develop systematic problem-solving skills.

Operation Guide

Playing Nonogram is straightforward with simple controls:

  • Fill Squares : Tap on mobile devices or left-click on desktop to fill a square with color
  • Mark Empty : Use right-click or long press to place an "X" marking squares that must remain empty
  • Navigate Grid : Scroll or drag to move around larger puzzle grids
  • Use Hints : Access the hint system when you need guidance on your next logical step
  • Undo Actions : Easily correct mistakes with the undo feature

Strategic Tips

  1. Start with Obvious Lines : Look for rows or columns with large numbers that have limited placement options
  2. Work from Edges : Often edge constraints provide the clearest starting points
  3. Cross-Reference : Always check how row clues interact with column clues
  4. Mark Empty Spaces : Using "X" marks helps visualize the puzzle structure
  5. Take Breaks : Fresh eyes often spot patterns you might have missed

Why Play This Game

Nonogram offers unique benefits that set it apart from other puzzle games:

Mental Exercise : Regular play improves logical reasoning, pattern recognition, and concentration skills. The game provides excellent brain training without feeling like work.

Stress Relief : The methodical, meditative nature of solving nonogram puzzles helps reduce stress and provides a peaceful gaming experience.

Sense of Achievement : Each completed puzzle delivers a satisfying "eureka" moment as the hidden image emerges, providing genuine accomplishment.

No Time Pressure : Play at your own pace without rushing, making it perfect for relaxation or focused problem-solving sessions.

Educational Value : Develops mathematical thinking and spatial reasoning skills while being thoroughly entertaining.

Accessible Learning Curve : Simple rules make it easy for beginners to start, while complex puzzles provide ongoing challenges for experienced players.

Whether you're looking for a quick mental break or an extended puzzle-solving session, Nonogram delivers engaging gameplay that grows with your skills and keeps you coming back for more.

Frequently Asked Questions (FAQ)