Bookmark this on Hatena Bookmark
Hatena Bookmark - shi3z Game Programming #1 How to Become a Game Programmer in 72 Hours
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed

Greetings! shi3z here.

The other day I had fun as both a guest and a participant at the Pacific Rim Mini Game Development Olympics, but I felt a bit bad about winning the Grand Prize. I’ve got lots of experience, and knew what to do, and next time I think it best that I not take part.

But I had a lot of fun, both with the event and the mini games themselves.

I hope to do it again.

However, most of my programmers had reached the limits of their energy, and I was left with only two.

In a fix, I decided to take it upon myself to teach Hidemy…who had zero experience in game programming…the basics in three days and send her to participate in the contest. Would this work?

Continued below:

In fact, the “Super Easy Programming” guides were originally put together so that Hidemy would be able to learn the basics.

Truth be told, I wasn’t sure how quickly an English Literature major like her could pick it up.

Last night, after we had all eaten, I said, “After you’ve read Alan’s guide, make a program of your own and send it in.”

This was 8 o’clock.

Then, to my amazement, at 12 o’clock…just 4 hours later…Hidemy sent the following in:

function flower(){
if( i<10 ){
}if( i>170 ){

function onLoad(){

She sent in two others as well:

I was stunned at the speed with which she absorbed this information.

I thought to myself, “This just might work.”

With that in mind, I decided to start the guide to game programming.

Alan’s guide is easy to understand but takes a while to get through, so I’ve gather below a .zip file of everything you need to make a game.

Please download the file below.

Game Basics: (

It’s similar to the files that Alan came up with.

The only real difference is the presence of a file called “game.js” and an “img” folder.

First, open main.js in the text editor.

For those of you who’d rather use a browser, here’s a link:

Our first program is to display a game character.

function onLoad() {
banana = new Image('img/banana.png'); // The character appears here

The key point of this program is “new Image.”

This command creates a new image and inserts the variable “banana.”

This “Image” is a new program I defined specifically for the purpose of teaching game programming. In JavaScript, you can call up clusters of programs from within another.

We call these clusters of programs “classes” or “libraries.” Actually, classes and libraries are in truth something slightly different, but for the moment we won’t worry about that. If you’re interesting you can look it up, or wait for Alan to discuss it in his series.

Game development is filled with dull and troublesome tasks. With that in mind, I’ve put together this group of the minimum ingredients necessary to create a game. If this were food, it would be a shrink-wrapped instant meal. We can’t call it gourmet, but anyone can make it and be satisfied. Think of it that way.

This sort of class contains all the experiences of the programmer who determined the classes. This Image class is one of those.

Think of it as the secret sauce.

Now then, see what happens when you execute this program!

Take notice. Game programs are quite intense. That’s why once you hit “Execute Game,” if you want to stop it or rewrite the source code, you’ll have to reload once.

Even if you reload, your code won’t disappear, so don’t get too anxious.

Let’s take a look at those strange characters that come after “new Image.”

new Image(‘img/banana.png’);

This, as you may have guessed, is the “File name.” “img” points to the file name, and “” becomes the file name. The folder and file name are connected by “/”. You’re probably pretty familiar with all this.

In “banana.png” there’s a picture of a banana. It may not look like a banana, but just have faith in me here. In this zip file, I’ve prepared basic images necessary for creating a game.

There’s a lot more besides bananas in there, so please take a peak inside. Next, let’s make our character move. A moving banana’s kind of creepy, so let’s change it to a spaceship. Give the following program a shot.

function onLoad() {
ship = new Image('img/starship.png'); //A
ship.tick = function(){ //B
this.x = this.x + 1;//C Here we define the movement of the spaceship
gameStart(); //D

A few new commands have shown up.

If line A sets the “Image” as a ship, what does line B do?

As it turns out, JavaScript variables are all object variables, and you can insert not just numbers but programs as well.

This is the “tick” variable we’ve set inside the ship variable. This “tick” is a special variable called up at regular intervals.

The contents of “tick” in line C are quite simple.

this.x = this.x +1 ;

A version of “this.x” plus 1 is substituted again for “this.x.” This “this” refers to the object defined by the variable, in this the “ship” itself. Just as there is a “this.x,” there is naturally a “this.y.” Why is it structured this way?

This is a source of considerably frustration when studying math in school.

You’d think, “This sort of this.x is impossible.”

However, this is a substitution and not an equation. It’s not meant to solve anything.

If you’re confused, consider the following image:

this.x ← this.x +1 ;

The “this.x” on the right is a past “this.x,” while the “this.x” on the left is a future “this.x.” Remember the direction of the arrow.

For example, if “this.x” is 0 when this equation is executed, the end product of this.x will be 1.

The first stumbling block in programming is mixing up substitutions and equations.

It’s quite easy when you understand it, but if you don’t establish it first people will be get overwhelmed.

If you give this a try, the spaceship should appear in the center of the screen and move slowly to the right.

This is because as levels are added regularly to “this.x,” the coordinates of “this.x” change.

We’re almost done with part one, so finally I’d like to try a program that let’s the character move where you want him to. I’ll explain in detail next time.

Please give it a try!

function onLoad() {
ship = new Image('img/starship.png');
ship.tick = function(){ // The spaceship will follow your cursor
this.x += (mouseX-this.x)/10;
this.y += (mouseY-this.y)/10;