AcornArtwork Blog

Personal Project: Create a Griddler game

Most Norwegians spend their Easter somewhere up a mountain in a cabin, skiing, and eating oranges and “Kvikk Lunsj”. I’m spending my Easter holiday nerding, scripting, occasionally shouting out frustration moans, tweaking and Googling by my computer in my apartment in the middle of Oslo city. (Yes, I’m a nerd and proud of it!) More specifically, I’m diving into old skills of programming, aiming to create a software or platform where you can solve Griddler puzzles. What is Griddler, you ask? I’ll explain.

Solving a Picross puzzle at picross-time.net

Griddler is a logic puzzle game that has many aliases, such as “Nonograms”, “Paint by Numbers” or maybe more familiar for the Nintendo DS fans, Picross. Griddler is very similar to the popular Sudoku puzzle game; they both consist of a grid where you have to logically figure out what and where to put in stuff inside the cells. Whereas Sudoku requires you to fill in numbers, Griddler requires you to fill the cells entirely and leave some blank according to the numbers in the leftmost and topmost rows and columns. The goal is to fill the whole grid according to the clues given and reveal a hidden picture.

Griddler is my favourite puzzle game, and is great for killing time on the bus or so. I have been solving Griddler puzzles for many years, on paper, in my Nintendo DS and lately at picross-time.net, a Flash-based website that has more than a thousand puzzles available, created by other players. So if I have all these places to solve puzzles available, why do I want to create my own?

The main reason is because I want a Griddler game on my cell phone, a device I always bring with me anywhere I go. I currently own a mobile with Windows Mobile OS, and I haven’t found any working Griddler game for this platform. But I have recently fell in love with the open-source Android platform, and wish to learn to program applications (or “apps”) for it. I plan to get myself an Android-based cell phone very soon, and figured I could kill two birds with one stone by learning to develop Android apps while finally be able to play Griddler on my phone. I have seen Griddler apps for Iphone and at least one for Android, but as I’ve spent so much time solving Griddler puzzles I have certain requirements for in-game features in order to have a good time. The website picross-time.net lacks some of these important features and the puzzles and numbers are too tiny to have a relaxed experience. If I create my own, I can customize it just the way I want it to work. Another reason is, because I want to!

Getting started

My first try at a HTML and JavaScript-based Griddler

I figured I’d start off by creating a Griddler game in a language I know very well. I haven’t even started to look at Android software development, and I don’t have a phone to try it on yet, so a web-based game seems like a good place to start. So far I’ve created a PHP file which reads a file in a specific format and automatically generate a HTML table for the playing grid, and fills in the clues on the top and left sides of the grid. I use JavaScript to change the cell’s background image to filled or empty as the player clicks it, and if the Ctrl key is pressed down as the player clicks, a dot or a cross (representing a square you know must be blank) is placed instead. I’m off to a good start already, but as I try to add more advanced features, such as striking out clues as their corresponding cells are being placed or storing the solution, I meet more obstacles than I started with. Cross-browser compability is also a problem. Hence the loud frustration moans and the occasional stuffed bunny abuse.

But I’m not giving up. I’ll continue trying to develop my modest Griddler game using PHP and JavaScript, and maybe Flash if that seems like a better solution. (Hopefully) it won’t be long until I buy an Android-phone, and when I start creating an Android-based Griddler, I may stand somewhat wiser and experienced. Stay tuned for updates!

6 Comments

  1. Cool project, havent heard about griddler before, need to check that out!

    I hope you use jQuery for the javascript part :) Or you’ll hurt yourself writing too much for too little ;)

  2. Hmm, hadn’t thought of jQuery. :-) Doesn’t know it very well, but worth looking into if you think that may be easier?

  3. Yes.. jQuery lets you work with the DOM like CSS.. So for example, changing the color of all elements with class=”something” would be as simple as:
    $(‘.something’).css(‘color’, ‘red’);

    or hide an element with an id:
    $(‘#theid’).hide(’slow’);

    Etc. Read up on jquery, it’ll change the way you look at javascript for ever. ;)

  4. Wow, thank you for the jQuery tip!

    I spent all day yesterday fiddling with jQuery, and it’s so much easier than JavaScript! My Griddler code was shortened down to 1/5 and also works much much better. :-)

    I owe you one! ;-)

  5. [...] within that field. At the moment I have several projects going to keep my brain busy, for example creating a Griddler game using PHP, JavaScript and [...]

  6. [...] Easter I started a personal project on creating a Griddler game (read the post here). The ultimate goal is to develop an Android-based Griddler game, but as for now I want to begin [...]

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>