Foundation Flash: - Avoider (Part 3)

Main Content

You are here:

Home
> Tutorials
> Avoider (3) - Targets, scoring

Avoider (Part 3)

A copy of the full source code for today's tutorial is available

Welcome to part three of this Foundation Flash free tutorial, about the making of an Avoider type game, the second in a series of Foundation Flash classic game remakes. The game we shall be making is shown below. You are the black circle, try and get the blue squares but avoider the white, 'enemy' circles.

If you remember back to last time, I said that we were going to do targets and scoring today, and that we shall. Naturally, we shall be starting with the former - the targets. These are essentially little blue squares drawn in. Alright - they arelittle blue squares drawn in.

First of all, then, we're going to make sure a target gets drawn in at the beginning, by adding this line into the constructor:

drawNewTarget();

and then create the drawNewTarget() function:

public function drawNewTarget() {
                var posX:uint = randRange(30,520);
                var posY:uint = randRange(30,370);
}

We shall of course be adding to that. For now though, we turn our attention to the two lines that I have put in the function, which are going to get done every time the function is called. It creates two variables, and assigns them values using another function, called randRange. You won't have a function called randRange so we will add it in now. I have borrowed this from who probably borrowed it from someone else, and I thank them all. Here it is, plus you may want to read about function declaration if you haven't already:

private function randRange(start:Number,end:Number):Number {
        return Math.floor(start + Math.random() * (end - start));
}

That returns a value between start and end, or in our case 30 and 520 or 30 and 370. This essentially gives us a point somewhere inside the four walls of our playing area. We haven't done anything with it yet, so return to your drawNewTarget function and add in these lines, under the last two:

target.graphics.beginFill(0x0000FF);
target.graphics.drawRect(0, 0, 20, 20);
target.x = posX;
target.y = posY;
target.graphics.endFill();
addChild(target);

Most of the drawing was covered on this tutorial about drawing - this just draws in our blue square (lines 1 and 2), moves it to the random location we just generated (lines 3 and 4) and adds it to the stage, so we can see it (line 6). If you compile your games (CTRL/Command + Enter) now, though, and move to your target, it won't do anything, because we don't have an event listener for handling the player touching the target. No problem! It takes one more line in you drawNewTarget function(~1), and another function altogether (~2). (~1) is this, purely adding the Event Listener, which looks to a function called gotToTarget every frame:

target.addEventListener(Event.ENTER_FRAME,gotToTarget);

and that handler function is shown below:

private function gotToTarget(e:Event) {
        if (e.target.hitTestObject(player)) {
                e.target.x = randRange(30,520);
                e.target.y = randRange(30,370);
                //drawNewEnemy();
                score++;
                scoretext.text = "Score: " + String((score * 10));
        }
}

For more information about the stuff there, read these tutorials about if statements, hittests, comments and remember that e.target accesses the thing calling the function - in this case the target - and then we move it to a new, random, location. I have only commented out the drawNewEnemy() lines because we won't be looking at that today, so if you called it while the function didn't exist (i.e. at the end of today's tutorial) it would cause an error. Note also how this cause score to be incremented (added one to) and scoretext to display the current score, just like in Pong!

And, thankfully, that's it. Yes, I know there's been a lot of code today, but we've achieved something at least: if you now compile your game (CTRL/Command + Enter) you should see that the player moves towards the mouse, and when it touches the target you get some points. Yay. Next week: adding in the enemies (from an external class). Please join me for that free Foundation Flash tutorial.

Harry.