Puzzles such as nonograms always entertain me, so I knew that developing a puzzle application of my own would be a fun experience. I wanted to use Javascript specifically because, prior to this hackathon, I had almost no experience whatsoever in Javascript. Recognizing the language's dominance in web applications, I am certain that learning Javascript will be useful for me.

What it does

The application generates a type of puzzle known as a nonogram (sometimes called a grid puzzle or griddler, among other names), whose invention is typically attributed to Non Ishida. A nonogram consists of a grid of squares, and numbers adjacent to rows and columns; these numbers indicate how many squares in a row/column should be filled. When the correct squares of the puzzle are filled, an image is revealed. The application randomly generates a puzzle, then presents the user with a grid and the corresponding numbers. The user is then able to click on squares in order to fill and clear them, until the solution is found.

How I built it

I began by designing and writing the algorithms necessary for the program, such as the one that generates the hint numbers (i.e. the numbers that appear adjacent to rows/columns) for a puzzle. This seemed a reasonable way to begin development since said formulas are critical for the application's efficiency, and I could write them without yet knowing the fundamentals of Javascript. After gaining some understanding of the language (thanks to the Intro to Web Development workshop), I proceeded to implement the internal representations of puzzle data, followed by the user interface. Since the application uses a minimalist UI, the majority of development was focused on implementing game mechanics.

Challenges I ran into

Undoubtedly the largest challenge was my lack of experience with Javascript (and HTML and CSS). Adding to this difficulty, the nonogram generator was the first program that I have written while switching back and forth between three different languages. Many of the run-time errors that I encountered were the result of using CSS syntax in Javascript or vice versa.

Accomplishments that I'm proud of

As I previously stated, I believe that learning Javascript will be highly useful. Thus, I am very glad that I have begun that process. And though the UI is simple, I appreciate the animation that plays when a tile is marked or cleared.

What I learned

Overall, developing this project has reinforced the lesson that knowing a diverse and versatile array of languages is an invaluable skill. Compared to Python, I was astounded by how easy it was to create efficient, fluent animations in Javascript and CSS. Despite the difficulty of developing the application while trying to learn a new language, this has been a useful introduction to Javascript.

What's next for Simple Nonogram Generator

I plan to rework the application so that instead of puzzles being generated randomly, the user has the ability to upload a photo, which is then pixelated and used to create a puzzle. The player will also able to download a file which contains the photo, but lightly encrypted; another player may then open that file in the application, so that they do not see the image until solving the puzzle. This was my intention from the beginning, though unfortunately I only had enough time to design an algorithm to produce the puzzle from pixels. I am looking forward to continuing the development of the nonogram generator.

Share this project: