You Win!!

Instructions

The game is simple, to win you must fill the grid with dark squares that fit the number patterns at the top and left of the grid.

To toggle a square simply press it and it will toggle between on or off, or click and drag over squares to toggle multiple squares. I have also implemented a flag system that can be used to mark tiles that are confirmed to not be selected, much like the flags in minesweeper. To apply a flag right click on one of the tiles and again to deflag it, or click on one of the clue tiles at the top or left to flag a whole row but keep the current selections. The flags are unrelated to the final solution so there it is not necessary to use them.

Javascipt Code

The code for this nonogram game is writen in vanilla JS with no plugins. The source is a lightweight file, it consist of about 25 functions, the reason being that I have come to prefer functional programming from programming clojure. The code features various adjustable values including: tilesize, width between tiles, grid dimension and several others.

The way the game works is a basic principle. Each rectangle tile has the attribute solution applied randomly with a bias that can be varied. It produced either a 1 or 0, the solution value is applied to each tile as an attribute. In this way the adjustments and settings are easily changeable and can be saved in array form. This is the same action taken for the current state of tiles, saved as current value, and flags are saved as flag values, as the flags arent needed for solving they are not needed as an array. To check for a win all that is needed is to check that the two arrays as strings are a match.

The most complex part of the game is the function that checks "islands", however basic in solution. To start each element on the same y position is sent into the function and it checks the solution value for each element if it's 1 it will increment n, else it will push the current value of n to an array and reset n. This is repeated for each row and column, and the returned array is pushed to the text of the end tiles.

I have not implemented a multiple solution check, as I have not thought of a way to check or fix it yet. Whether or not I will fix this is undecided and it is not a major issue. It is also not a huge problem as it is not often the case that there are multiple outcomes that are possible, that being said if the grid is smaller such as a 5x5 grid it can become an noticeable issue, but not game ruining.

This is most of the major points of the game however the code is available at the GitHub Repository. If you do check out the code be sure to play around with settings and colours. Any and all feedback is welcome.