10 Minutes with Flash: Collision Detection for Flash Games
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
For this installment of the "10 Minutes with Flash" series, we'll use the hitTest method of the MovieClip class to create collision detection for a simple game. Get your code-geek hat on—there's a lot of ActionScript in this one. The game we'll build here is a starting point for a more advanced game. You can add functionality to track the score, create win and lose screens, add levels, and do anything else you want later on, but I'll get you headed in the right direction.
Enemy Ships on Demand
First, download the files for this tutorial here. Then follow these steps:
-
From the downloaded files, open hitTest_complete.swf to see what you'll be creating. Use the arrow keys to navigate through the endless field of enemy ships. Fun, huh? Close the SWF when you're done.
-
Open hitTest.fla. You can use either Flash MX or Flash MX 2004. There is one layer, called assets, and it contains both the hero (blue) and enemy (orange) ships.
-
Add a layer to the main Timeline and name it actions.
-
First, we need to enable the user to move the hero ship with the arrow keys at a set rate of speed. The speed is really just the distance the ship will travel upon pressing an arrow key. In this case, we'll move it five pixels at a time. Add the following variable to frame one of the actions layer (all code in this section will be added to frame one of the actions layer):
Next, let's make the hero ship movable by adding arrow key functionality:
Next, we need to write a function that will create a random vertical starting position for enemy ships, which will be created on the fly. This function will be run every time a new ship is created, through another function we'll write in a minute.
Now, we'll add a function to create enemy ships and launch them from the starting position determined by the randomVert function.
Now we need to specify how often new enemy ships will be created. This runs the newEnemyShip function, created in the last step, every half-second (the 0500 argument is measured in milliseconds).
Save your work.
Choose Control > Test Movie to make sure that the hero ship moves when you press the up and down arrow keys. The enemy ships won't do anything just yet. We still need to setup the linkage for enemy_mc in the Library. Close the Preview window when you're done.
var speed = 5;
hero_mc.onEnterFrame = function () {
if (key.isDown (key.UP)) {
if (this._y >= 10) {
this._y -= speed;
}
} else if (key.isDown (key.DOWN)) {
if (this._y <= 260) {
hero_mc._y += speed;
}
}
};
The script above says that if the up arrow key is pressed, the hero ship needs to move up five pixels (set by the speed variable). It also says that the ship can continue moving upward only if it is positioned greater than or equal to 10 pixels from the top edge of the Stage. Without this restriction, the ship could fly off into cyberspace, never to be seen again.
The second half of the script executes the same functionality for the down arrow key, keeping it above the bottom edge of the Stage.
function randomVert (minVal, maxVal) {
return minVal + Math.floor (Math.random () * (maxVal + 1 - minVal));
}
i = 0;
function newEnemyShip () {
var newVert = randomVert (20, 280);
attachMovie ("enemy_mc", "enemy" + i, i++);
_root["enemy" + i]._y = newVert;
_root["enemy" + i]._x = 595;
}
This script first sets i as an incremental variable. Then we create a variable called newVert that returns a random start position by running the randomVert function. The arguments for the randomVert function restrict the random numbers to something between 20 (minVal) and 280 (maxVal) pixels, ensuring that the new enemy ship appears on the Stage. Then we use attachMovie to grab enemy_mc from the Library (we'll set up the linkage later on), and assign it a new name, which consists of the word enemy and the current value of i. Then we increase the value of i so that more ships can be created with unique names. Finally, we move the newly created enemy ship to its vertical position (specified by the value of the newVert variable) and position it horizontally at 595 pixels, which is past the right edge of the Stage.
function enemyInterval () {
setInterval (newEnemyShip, 0500);
}
Finally, we just need to run the interval.
enemyInterval ();
When you're done, your script should match the one shown in Figure 1.
)
Figure
1 Functions and methods and commands, oh my!