Hello again, 10 years ago I coded some simple games for my son to show and tell and explain how fun and simple coding can be. These were not heavy duty coding I delve into as part of my work, rather to demonstrate logic and how to code, design basic interactions with users. I used MIT’s open source platform called Scratch. That was 10 years ago, and I’m thrilled to see that they’re still around. So, I dusted up one of my programs and republished it with explanation (code and live demo) here in this blog.
Setup:
You can create a new project online via the browser. No installation required. Alternatively, you can download a desktop version (without internet connection requirement) from: https://scratch.mit.edu/download
Game Play:
Here’s a quick video clip of what it’s like to play it. The game is about playing an electronic piano by pressing keys which individually create a note from A to G, and C2. The quality of the recording isn’t great, but you’ll get to see the actual game in action in a minute.
A screenshot of the actual browser output:
Explanation:
The game uses two sprites: 1) Keyboard 2) Ballerina. None of them are necessary but added for visuals and more interest. The keyboard has 2 images…one for normal state, another to show a key got pressed and it’s “alive”. The ballerina has 4 different images in it indicating different poses for fun.
The core is processing the key strokes and calling the audio functions accordingly. The sound, and graphics are all open source and used from MIT’s library.
There are a couple of interesting things on top of that: a) The background can be changed via a keystroke (I’ll leave it up to you to discover which key that is) 🙂 and a custom list on screen shows exactly which notes are being played by you. User can save that list, or move the notes around to replay later.
Here are the sprites:
Code:
The beautiful thing about Scratch is that you never have to worry about syntax…that most languages get hung up on. Instead, you focus on the logic. Computer takes your logic and executes it. That’s how all high-level programming should be, but in the real-world there’s so much customization required that it’s virtually impossible for one platform to cater to all needs. However, you may want to check out more complex gaming platform (with syntax but with some logic blocks on my blog…search for gaming) called Construct. Anyway, back to Scratch. This is how an excerpt looks like. You can see the full source at https://scratch.mit.edu/projects/279520554/
The thing to focus on is the different shapes and colors. Scratch color-codes and shape-codes them by categories…e.g. Events, Visuals (Look), Operations, Variables, etc. As you can see from the snippet of code above is repetitive for each key stroke because they’re independent events! Each keystroke. So, no need to tie them together in any logic. I just process them as the keypress event happens independently. Within each block, it’s doing a few things:
- Check if it’s a valid keypress and if so, which one
- Set a variable (“flag”)*
- Insert a text moniker (note name) into the list
- Change the sprite of the piano to show it came “alive”
- Play the appropriate sound associated with the key
- Change the sprite of the piano back to normal after playing
- Clear the variable (“flag”)*
*I’ll explain the purpose of this flag below.
That’s basically it. The images within the sprite is called “costume” in Scratch.
The purpose of the flag is for the ballerina. I want her to make a pose for each note played. Because I have 4 “costumes” within the sprite, I cycle through them. The code is not shown here for brevity but you’d use the same statement as above:”switch costume to (<something>)” and that <something> value can be “random” or “next” or “previous” depending on the sprite image.
There are many ways to implement the dancing ballerina. The easiest (and most efficient) way I figured is to simply react when a valid key is pressed (the check which is done above anyway, so why do it again?). Note, that in Scratch all logic is associated with individual sprites! So, you cannot mix they keyboard sprite code with the ballerina’s directly. It makes for easier coding but also inflexibility in some cases. But I digress. So, instead of repeating the same keyboard checks for any keypress on the keyboard (which are MANY! Take a look at your keyboard characters.), I only process those that I’m interested in, and set a flag called “ValidKey”…you can call it whatever, it’s your custom defined variable. I set it from keyboard sprite code globally, so ballerina code know when it’s set (=1) and not (=0). Then in ballerina code, I only make her change pose when it’s set. Changing pose is done again by changing the “costume” as explained above. Simple!
The final result is a simple, fun, easy way to play and learn coding logic. Have fun with it especially if you have kids or new-learners.
Now Go Play:
You can play it here for free. Try it. You can also see the full code in there. NOTICE: This will not work on devices without keyboard since it’s looking for key strokes. Scratch does NOT support touchscreen or even buttons yet, so I AM working on some sample code to simulate buttons that’ll work with touch-screen (e.g. smartphones, tablets) as well as with mouse (e.g. desktops, laptops).
Stay tuned for that version. Meanwhile, enjoy this on devices where you have a keyboard (hard or soft).
