The web application is a classic Nonograms (Picross) puzzle game built with pure Vanilla JavaScript, without the use of third-party frameworks or libraries. All user interface elements are dynamically generated via JavaScript.
- Deployment: https://gary217.github.io/nonograms/
- HTML5 (dynamic DOM generation)
- SASS / SCSS (responsive layout, grid systems)
- Vanilla JavaScript (ES6+, modular structure, state management)
- Linting & Formatting: ESLint (Airbnb Base configuration layout)
- Grid Systems & Templates: Support for classic 5x5 (Easy), 10x10 (Medium), and 15x15 (Hard) matrices with at least 5 unique templates per difficulty layer.
- Dual Control Inputs:
- Left-click mouse action toggles cells to dark (black) color.
- Right-click marks potential blanks with an
Xflag (with custom context-menu suppression).
- Automated Validation: The board auto-locks and validates instantly once the user matches the hidden matrix template correctly, displaying a victory modal.
- Stopwatch Engine: Triggers an accurate
MM:SStimer on the first field click (left or right) and records the completion runtime upon winning.
- Advanced Game Controls: Dedicated buttons to Reset the board without reloading the page, or auto-reveal the puzzle using the Solution action.
- Algorithmic Randomizer: A "Random Game" selector that automatically picks an unpredictable matrix scale and layout pattern.
- Session Persistence: High-performance integration with
localStorageallowing players to Save/Continue their exact board snapshots (including flags and elapsed timer state). - Leaderboard Dashboard: A tracking matrix caching the top 5 fastest historical runs sorted dynamically by time and mapped by puzzle difficulty.
- Interactive Sound Design: Master audio wrapper triggering distinct SFX modules for sketching, flagging, erasing, and winning, equipped with a mute controller.
- Dynamic Theme Toggle: Full application skin switching between unified Dark and Light color palettes.
- The application is fully adaptive and responsive down to a width of
500px. - When resizing, all grid layers and wrappers adjust proportionally without abrupt switching, ensuring full functionality with no hidden or off-screen content.
- Zero-HTML Initial State: The
index.htmlfile contains an empty<body>tag (only the script tag is allowed). All game elements, layout structures, and wrappers are built programmatically at runtime. - Strict Vanilla Implementation: Built entirely without external frameworks, CSS libraries, or third-party utility scripts. No native alert, prompt, or confirm modals are used.
- Code Quality: Configured with strict ESLint rules (Airbnb Base configuration) to ensure clean, maintainable, and industry-standard code.
- Clone the repository:
git clone https://github.com/Gary217/nonograms.git
- Navigate to the project folder:
cd ./nonograms/ - Install dependencies (ESLint):
npm install
- Open the project:
- Open
index.htmlusing the Live Server extension in VS Code (or compile production-ready bundles if using a bundler).
- Open