Nonogram Game
In the fall of 2019, I had found a really lame version of “Picross” on the Windows Store. Yeah, that Windows Store.
Inspired by the new-to-me game, I played it for a little bit, but I wanted to be able to play it on my school computer, which was a Chromebook. With ChromeOS, the only real option was to make a website. Lucky for me, that was all I had experience in making at that age.
With a little research, I discovered that PWAs were a thing. I googled how to make them, and somehow ended up using Google’s Firebase hosting because they pre-made the manifest.json file for you.
Don’t do this. A manifest.json for a Progressive Web App is insanely easy to do. Offline capability is not that difficult.
I made the whole thing locally first, and then figured out how to upload the whole shebang into Firebase. You had to use a CLI to do it, and I believe this is the first time I actually used the Windows Command Prompt for anything real. I now use macOS, and I do not like typing dir
. Unix-style shells are better, and I will not elaborate.
The upload-to-firebase process is lame, and I have lost the original files for this website at least twice. As the owner of the firebase instance, you would think that it would be easy enough to get your raw code back. Wrong. There are like 5 different Github projects devoted to trying to get your original files back from a firebase hosting system. I think I have a good copy on a backup hard-drive, but Firebase has always been a mess. The only “good” thing about it is that it comes pre-rolled with Google Analytics. For all 5 of my yearly vistors.
Long story short, the game worked decently well! I included some 15-odd pre-made levels, automatic cookie-based progress saving, randomly generated multi-size boards, the ability to create your own boards and share them with friends, and most importantly, the ability to change the theme of the game at any time. The “export” works well, I “invented” a data format for the game boards. The import is broken for board sizes > 10 at the moment, and it lets you input an arbitrary board size, which is not intended behavior. Always something to fix.
I didn’t manage to do everything I planned, however. I wanted the hints on the side of the board to “light up” when you completed them, because I realized that this led to users believing that because the numbers faded out, that the row’s permutation was finished and done. However, it is very often possible to satisfy one row in a way that makes the rest of the board incompletable. If I made the system check if the row created would be good for a correct board permutation, it would really just be giving the player an ability to check the solution the puzzle piecemeal, which felt lame given that most of these were not terribly hard puzzles to complete.
It’s a game with a relatively gentle difficulty curve - and once you finished the first “tutorial levels”, you could replay random “mediums” (7x7 boards) for a pretty long time before getting bored.
As much as an exercise that this was in Javascript & hosting on Firebase, this was an exploratory process of game design, difficulty judgement, and personal choices. Until I get a better grasp at game loops, these turn-based games like Mastermind & Solitaire are still of great interest to me as projects I intend to finish. There’s nothing like being able to use something that you unquestionably made from top-to-bottom - and it can be anything, anything at all. I can’t wait until I make a car.
Of course, the most important result of making this? I could play it at school, which I most definitely did. I even got a few of my friends hooked on playing! That was probably the best part, being able to put a smile on someone else’s face, that they managed to have some fun because you did something neat.
Maybe you’ll find it neat!
You can visit it at nonogram-game.firebaseapp.com.
If it’s a little too easy or boring, remember, I made this when I was 15 or so. Pick on someone your own size.