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

Greetings! shi3z here.

This is my three-day cram course, so get ready for a flurry of postings.

Did you give our last session’s final program a go? The spaceship should follow the movements of your mouse cursor.

Of course, the secret to this movement lies in the program.

ship.tick = function(){ // Spaceship will follow your cursor
this.x += (mouseX-this.x)/10;
this.y += (mouseY-this.y)/10;
};

Let’s explain these one at a time.

(continued below)

First of all, the symbol “+=” that follows “this.x” means that the level of the expression to the right will be added to “this.x.” If “this.x+=1,” then this is the same meaning as “this.x=this.x+1.” This notation appears extremely frequently in games, so make a mental note.

Now then, what about this weird variable “mouseX?” As you may have guessed, this is a variable I made for this special game study system.

With this variable, the mouse cursor’s X coordinates are already stored in the computer’s memory. Which means that, yes, “mouseY” indicates the mouse cursor’s Y coordinates.

In this expression, a level of mouseX minus this.x is divided into 10 and into this.x itself.

What on earth are we talking about?

First of all, the program wants to move the spaceship near to the mouse cursor. There are several other methods for this that are easier to understand.

For instance, a program like this:

ship.tick = function(){ // Spaceship will follow your cursor
if(this.x > mouseX) this.x-=10;
if(this.x < mouseX) this.x +=10; if(this.y > mouseY) this.y-=10;
if(this.y < mouseY) this.y +=10;
};

How did the movements change? In the previous code, the ship slipped straight after the cursor.

In this code, after proceeding at a bit of angle, it should follow chase after the cursor horizontally or vertically.

What gives rise to this change in movement? It’s all in the source code.

This latter code, with lots of “if”s, should be easier to understand.

If the spaceship’s position (this.x and this.y) differs from the position of the mouse, the command tells it to move 10 dots at a time.

However, when for instance the cursor is at an angle other than 45 degrees, the amount of increase for x and y becomes 10 each, and the angle of movement eventually changes to 45 degrees.

This movement is extremely awkward and strange.

By comparison, the first example is simple and effective.

What sort of movement does this formula create?

When you subtract the spaceship’s current coordinates from those of the cursor, this becomes the hector stretching between the spaceship and the cursor.

If we add this, the spaceship will suddenly warp to the position of the mouse cursor.

You can try this out with a simpler program.

 ship.tick = function(){ // Spaceship will follow your cursor
this.x += mouseX-this.x;
this.y += mouseY-this.y;
};

Getting rid of the division by 10, the spaceship should suddenly move as though clinging to the cursor.

By dividing by ten, the closer the spaceship drew to the cursor the more precise its movements became, creating that unique sliding effect.

Why does this smooth movement agree with us?

For one thing, it has an air of reality about it.

It resembles the actual movement of real-life objects rather well.

Cars physically cannot stop abruptly. They must first drop their speed bit by bit.

If you run at full speed and then suddenly stop, you will stumble forward a few steps.

This movement contains that same sort of sensation.

Now then, it’s a bit dull with just a spaceship, isn’t it? Let’s try some other objects as well.

A rock seems appropriate. A “for” loop should be easy to use here.

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

for(i=0;i<10;i++){
rock = new Image('img/rock.png');
rock.x = Math.random()*320;
rock.y = Math.random()*480;
}
gameStart();
}

When you execute, the results should be something like this:

A rock is puttering around a white expanse of space. It’s an asteroid.

However, nothing happens if this spaceship bumps into the asteroid. That’s rather boring, so let’s make it so that the game ends when the ship hits the asteroid.

function onLoad() {

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

ship.onHit = function(){ // Crashed!
alert("CRASHED!");
}

for(i=0;i<10;i++){
rock = new Image('img/rock.png');
rock.x = Math.random()*320;
rock.y = Math.random()*480;
}
gameStart();
}

However, this is a bit of a persistent program, and when you crash, the “CRASHED” warning will stay open.

In order to stop it, you need to move the cursor to the correct position and reload.

“alert” is one of the commands (functions) that JavaScript possesses, and has the function of displaying warning windows. The “ship.onHit” function is another special function called up by the system, summoned when the object hits another Image.

Here, when the “ship” hits another object, the game opens the warning window.

With this as your base, give the following problems a try. See you again soon!

1)  Line up “rock” with a “for” loop without using random numbers, and create an electric pen of nervousness game!

2) Define rock.tick and try moving the meteorites too.

3) Try making both moving and non-moving meteorites.