Let’s Make a Game

This tutorial series will show you how to make a game.  The game will be:

• A version of Snake
• Cross platform (Windows, Mac, Linux)
• Written in Ruby

Please remember to visit this article on our site rather than in your feed reader to get the code examples.

Cross Platform Games

There aren’t many ways to easily write cross platform GUI applications, let alone games.  Rather than use Adobe Air or a similar web-based technology, let’s use Shoes.

Shoes provides a rich toolkit for developing graphical software for Windows, Mac OS and Linux.  I’ll be working in Mac OS, but I’ll keep the code simple and portable.

Getting Started

Download Shoes for your platform from the Shoes download page.  Unpack the application and double-click it to run.  Click Help, then Console to open the console.  This is where error messages are displayed.

Here’s what you should see:

Typical Workflow in Shoes

When I write software with Shoes I go through the following steps:

• Sketch a basic interface
• Look at the Shoes Manual for ideas about how to implement the interface (there’s a lot of built-in functionality)
• Think about the classes my code will need
• Create a basic script and load it in the Shoes app (File, Open)
• Display the console (Help, Console)
• Work on the code, and re-open the file each time

Snake’s Interface

Snake is a game of squares: each square has a property.  Some make the snake longer, and some make it crash.  The movement of the snake is interesting: the head moves along and each block takes the position of the next block along the snake.

User input is received through keyboard commands: up, down, left and right.  We’ll use the arrow keys to make this easy.

Our game will need:

• A “game item” class to represent the blocks in the game.  This will have an x and y position and some graphical attributes.
• The snake itself: we’ll need to know where the snake is, how long it is and how many segments it has.
• A snake segment class: this will probably be similar to the block class.
• A main loop where input can be received and drawing operations fired off

Basic Layout

The previous requirements suggest the following structure:

That looks simple enough, but if your Ruby is a little bit rusty (or if you haven’t learned it), just follow along and try experimenting with the final example at the end.

Keyboard Input in Shoes

Shoes lets you receive keyboard commands in keypress blocks.  It also gives friendly names for many keys, so arrow keys are just up, down, left and right:

Main Loop and Animation

When handling the main loop’s animation, we can’t just use a loop.  This will cause Shoes to hang.  Instead, use a call to animate with the number of frames per second.

Combine this with the instructions for moving the snake and you get:

Snake Movement

The snake’s direction changes when the player presses the keyboard.  Direction can be modelled with a positive or negative value for X and Y:

Notice that this ties in with the names for the keyboard directions very neatly.

Each segment of the snake must be moved: the snake never stops.  That means for each frame of animation we need to:

• Loop through each segment
• Move the first segment on according to the current direction
• Move the last segment to the next segment’s position, and repeat for each segment

In Ruby this algorithm can be written as follows:

The segments of the snake are reversed, looped through, and each segment’s position is updated to the next segment’s position, except the first.  The first is updated based on the current direction.

Shoes App Blocks

By adding some basic drawing commands and sensible defaults to each class’s initialize method, a basic snake game is almost ready.  The only thing missing from this picture is the application object.

As I explained earlier, Shoes apps are created inside Shoes.app blocks.  This allows you to say “rect” to simply draw a rectangle: you don’t need to say Shoes::App.rect like a typical API.  This means that to access rect within your Snake class you need to pass around a reference to it.

In my final example, look for references to the app object: it’s initially passed to the Snake class by using self (because it’s passed from within the Shoes.app block).

Final Example (for Part 1!)

Create a file called snake.rb and load it from Shoes on your Mac or PC.  The result will let you move a snake around, and it will look like this: