Nonogram - Logic Puzzle Game

Seele01-Flash
By
Nonogram is a captivating logic puzzle game where you solve numerical grids to reveal beautiful pixel art images. Use deductive reasoning and number clues to fill in the correct squares and create stunning pictures.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "3D Voxel Nonogram". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style**: A clean, "Zen" aesthetic combining low-poly 3D elements with a flat UI. The game board should be a 3D grid floating in the center of the screen. * **Grid Cells**: Use `THREE.InstancedMesh` for the grid cells to ensure high performance on mobile devices (60FPS target). * **Cell States**: * *Empty*: A flat, slightly recessed plane (light grey). * *Filled*: A 3D cube that animates (scales up) when activated (Dark Blue/Black to match the "Headphones" reference). * *Crossed (X)*: A flat plane with a distinct "X" texture or red color overlay. * **Background**: A soothing, dynamic radial gradient shader (Light Blue to Cyan, mimicking the sunburst effect in the screenshot but softer/slower). * **Camera**: Use an `OrthographicCamera` to keep the grid lines parallel and readable. Position it at a slight angle or directly top-down (user togglable). * **Victory Model**: When the puzzle is solved, the grid should transform or merge into a single solid Voxel model (e.g., the Headphones) and rotate slowly. ### 2. Audio Requirements * **BGM**: A loop of relaxing, low-tempo "Lo-fi" or ambient electronic music to aid concentration. * **Sound Effects (SFX)**: * **Tap/Fill**: A satisfying, soft "wooden block" click or "bubble pop". * **Mark (X)**: A subtle "pencil scratch" or paper sound. * **Row/Col Complete**: A soft "ding" or highlight sound when the user satisfies a row's numbers. * **Win**: A short, uplifting chiptune fanfare. * **Error**: A gentle, low-pitched thud (non-punishing). ### 3. Gameplay Loop * **Initialization**: Load a 10x10 or 15x15 logical grid (hardcoded array representing the "Headphones" image). Dynamically calculate the hint numbers (Run-length encoding) for each row and column based on this target array. * **Core Mechanics**: * The player reads the numbers on the Top and Left edges. * Player interacts with cells to toggle state: **Empty -> Filled -> Crossed -> Empty**. * **Lives System**: (Optional) If the user makes a mistake (fills a cell that should be empty), play an error animation and deduct a "heart" (limit 3 lives). * **Win Condition**: Check grid state against the solution array after every move. If they match, trigger the "Victory Animation" (confetti particles, model spin). ### 4. Mobile Controls & Interaction * **Screen Orientation**: Portrait mode preferred (better for one-handed play). * **Touch Input (Raycasting)**: * **Primary Action**: Tap a cell to apply the current tool. * **Drag Support**: Allow the user to touch and drag across a row/column to fill multiple cells quickly (essential for mobile flow). * **UI/UX (The "Tool Toggle" Approach)**: * Since mobile lacks "Right Click", provide a large, thumb-friendly Toggle Button at the bottom of the screen to switch modes: * **Fill Mode (Default)**: Tapping places a cube. * **Cross Mode**: Tapping places an 'X'. * **Feedback**: * **Haptic**: Trigger `navigator.vibrate(10)` on every valid cell interaction. * **Visual**: Highlight the row and column of the currently selected cell to help the player track their position. Fade out hint numbers when their requirements are met. 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 a fascinating logic puzzle game that combines mathematical thinking with artistic creativity. Also known as Paint by Numbers or Picross, this game challenges players to fill in grid squares based on numerical clues to reveal hidden pixel art images. The game offers an engaging mental workout that appeals to puzzle enthusiasts of all skill levels.

The beauty of Nonogram lies in its simple concept yet deep strategic gameplay. Each puzzle presents a blank grid with numbers along the rows and columns that serve as your only clues. These numbers indicate how many consecutive squares should be filled in each line, but the exact positioning requires careful deduction and logical thinking.

Core Features

Pure Logic-Based Gameplay

Nonogram relies entirely on logical deduction rather than guesswork. Every move can be determined through careful analysis of the number clues and the current grid state. This makes each solved puzzle feel like a genuine intellectual achievement.

Progressive Difficulty System

The game starts with simple grids that help you understand the basic mechanics, then gradually introduces more complex puzzles with larger grids and intricate patterns. This progression ensures both beginners and experienced players find appropriate challenges.

Hint System Support

When you encounter particularly challenging puzzles, the game provides up to 3 hints per puzzle. These hints can help you overcome difficult sections without completely solving the puzzle for you, maintaining the satisfaction of personal achievement.

Pixel Art Revelation

Each completed puzzle reveals a charming pixel art image. These can range from simple objects like fruits and animals to more complex scenes and characters. The anticipation of discovering what image you're creating adds an extra layer of motivation.

Cross-Platform Compatibility

The game runs smoothly on both desktop computers and mobile devices through web browsers, requiring no downloads or installations. This accessibility means you can enjoy Nonogram puzzles anywhere, anytime.

Game Mechanics

Understanding Number Clues

The numbers displayed along each row and column indicate groups of consecutive filled squares. For example, "3 1" means there's a group of 3 filled squares, followed by at least one empty square, then a single filled square.

Strategic Elimination Process

Successful Nonogram solving involves using information from both rows and columns simultaneously. When you determine that a row or column has all required squares filled, you can mark the remaining squares as definitely empty, which then provides valuable information for intersecting lines.

Visual Pattern Recognition

As you progress through puzzles, you'll develop pattern recognition skills that help you quickly identify common configurations and make faster, more confident moves.

Operation Guide

Basic Controls

  • Left-click : Fill in a grid square (mark it as part of the image)
  • Right-click : Switch fill type or mark squares as definitely empty
  • Mouse movement : Navigate across the grid to select different squares

Solving Strategy Tips

  1. Start with obvious clues : Look for rows or columns where the numbers add up to nearly the full length
  2. Use process of elimination : When one line is complete, use that information to solve intersecting lines
  3. Work systematically : Don't jump randomly around the grid - focus on areas where you can make definitive progress
  4. Double-check your work : Before making major assumptions, verify that your current fills don't contradict any number clues

Why Play Nonogram

Mental Exercise and Relaxation

Nonogram provides an excellent brain workout that improves logical thinking and pattern recognition skills. Despite being mentally challenging, many players find the systematic nature of solving these puzzles deeply relaxing and meditative.

No Time Pressure

Unlike many puzzle games, Nonogram doesn't impose time limits. You can take as long as you need to think through each move, making it perfect for both quick breaks and extended problem-solving sessions.

Artistic Satisfaction

The combination of logical problem-solving with artistic revelation creates a unique satisfaction. Each completed puzzle provides both the intellectual reward of solving a complex logic problem and the visual pleasure of revealing beautiful pixel art.

Progressive Skill Development

As you solve more puzzles, you'll naturally develop faster recognition of patterns and more efficient solving strategies. This progression provides a genuine sense of skill improvement and mastery.

Educational Value

Nonogram puzzles enhance various cognitive skills including spatial reasoning, logical deduction, patience, and attention to detail. These skills transfer beneficially to other areas of problem-solving and analytical thinking.

Frequently Asked Questions (FAQ)