A random Picross generator application!
Click here for a live version.
Features | About | Layout | Technologies | Running Locally | License
-
Generate random picross games: You can generate games from 5x5 up to 30x30 with random values, you are totally free to match any number between 5 and 30.
For example: You can create a 12x24 game. -
Clear Picross Values: Clear all the marked squares and try again from scratch.
-
Auto fill completed lines: If the option is checked, lines that have the requirements completed, will be automatic filled with crossed squares, making things easy to see.
-
PWA: This project has progressive web app support, so you can install it on your phone and computer, this will allow you to launch it from your home screen. If you wish to install it, just click on the third button on the left (the one with the downside arrow).
-
Responsive layout: Even thought the game was first made to be played on a computer's screen, the layout was optimized for mobile users. It will be a little harder to play bigger size games on a small screen because there will be a lot of squares to take note of, but it is still totally viable.
Picross, also know as Nonograms, are picture logic puzzles in which cells in a grid must be colored or left blank according to numbers at the side of the grid to reveal a hidden picture. In this puzzle type, the numbers are a form of discrete tomography that measures how many unbroken lines of filled-in squares there are in any given row or column. For example, a clue of "4 8 3" would mean there are sets of four, eight, and three filled squares, in that order, with at least one blank square between successive sets - Wikipedia
I really wanted to do something that could be challenging and could help me improve my logic and JS/CSS skills, so I decided to recreate a game that would use a bunch of logic and that would put me out of my comfort zone. I always loved puzzle and logic related games like Sudoku and Sokoban, but by far my favorite one is Picross, and also, Picross needs a lot of mouse interactions, wihch is something that I didn't had a lot of experience doing.
I created the base layout using Figma.
You can click here to see the layout on Figma.
You can duplicate this layout to own Figma account and use it as you wish by clicking here. Just remember you must have a Figma account and be logged in.
Technologies:
- HTML, CSS and JS
- Yarn
- Parcel Bundler
- Sass
Tools:
For the confetti animation on the winning screen, I used the confetti.js created by mathusummut.
You must have Git, Node and Yarn installed.
On your favorite terminal, run the following commands:
# Clone the repository
$ git clone https://github.com/LuanSergio/PicrossUniverse.git
# Navigate to the repository
$ cd PicrossUniverse
# Install dependencies
$ yarn install
# Run the application locally
$ yarn start
# Build the application for production
$ yarn build
This project is under the MIT license. Click here for more information.