A Whack-a-Carrot Game in an hour

This is a story about how we got a Whack-a-Carrot game up and running in an hour. Last Friday at 6.30pm, I suddenly decided to find a way to make a simple Whack-a-mole game with vegetables in the house and the Makey Makey, before people were to arrive at 8PM at our house for a going-away party.

It so happened that I bought a Makey Makey the other day. What is Makey Makey? Its a simple board that lets you plug things to become controllers for your computer. You can easily connect crocodile clips to it to make objects like vegetables and playdoh controllers for things on your computer - easily accessible keys include arrows, spacebar, standard directional keys for games (WASD), right mouse click, left mouse click. Objects you can use include anything with slightly conductive properties. That means most vegetables and fruits will work, but try not to use something too squishy/mushy/wet otherwise it will be a complete mess (unless that is the point of the thing you're trying to make...).

A few months ago I also signed up for a free licence for Loom game engine - attracted by its description of being similar to Actionscript 3; however I had never gotten around to investigating it further, besides looking inside its example folder, which had a Whack-a-mole example. So I reinstalled Loom on my mac (which was very small, the download was 8.1MB). By that point I also googled for WHACK-A-MOLE and MAKEY-MAKEY and interestingly someone had already made it! In fact extremely recently!! The whole thing was already on Github by a user called johnbatty - featuring a small modification on the Whack-a-mole example to use the A S D keys which are easily accessible on the Makey-Makey.

Makey Makey: http://www.makeymakey.com/
Loom Game Engine: http://theengine.co/loom
Github: https://github.com/johnbatty/WhackAPotato

Nevertheless in the interest of understanding what is going on and to see what Loomscript is like, I opened up the code (.ls) to make sure that I at least understood what was going on before utilising it. Loomscript does look almost exactly like Actionscript! The main modification here that makes it easy to use with Makey-Makey is that instead of a TouchEvent its been replaced with a KeyboardEvent which (surprise surprise) looks exactly like a KeyboardEvent in AS3.

ORIGINAL EXAMPLE:

mole1.addEventListener( TouchEvent.TOUCH, function(e:TouchEvent) { 
                if (e.getTouch(mole1, TouchPhase.BEGAN)) {                    
                    whackMole(e, mole1) 
                } } );   

JOHNBATTY'S MODIFIED EXAMPLE:

protected function keyDownHandler(event:KeyboardEvent):void
        {   
            var keycode = event.keyCode;

            if (keycode == LoomKey.A) {
                whackMole(null, moles[0]);
            }
            
            if (keycode == LoomKey.S) {
                whackMole(null, moles[1]);            
            }
            
            if (keycode == LoomKey.D) {
                whackMole(null, moles[2]);            
            }

            // etc etc etc
        }

Looks just like AS3 doesn't it? I can imagine people familiar with AS3 should have no problems doing Loomscript.

Next we needed a willing.... face. A victim was quickly found in the kitchen.



The very sporting Star of the Whack-A-Kent... oops I mean Whack-a-Carrot
And within less than an hour of first taking the Makey-Makey out of the box, installing Loom, looking inside the examples, downloading the modified code from the user johnbatty (thanks!), and photoshopping some pics, we already managed to have a Whack-a-carrot game with Kent's face on it. The interesting thing is that Loom also has live reload so we could just swop in new pictures along the way....


Here is Kent playing with his own Whack-a-Carrot game.







More happy participants:







I also swopped in a lemon at some point to prove that other vegetables worked too. Also, the reason I used carrots was because I only had carrots left in the house after having boiled all my potatoes to make mash earlier in the day.