http://xtutorials.net

Fallink Bricks Game - Part 2 PDF Print E-mail
Written by Administrator   
Saturday, 15 September 2007 10:52
This is part 2 of your tutorial where you will learn how to make a falling bricks game. If you did not read part 1 yet than you must read it first. Hi! Welcome back. in case you did not read the first part of our tutorial than before reading this article, go and read that one because we are going to continue from where we left in the other tutorial.

In this tutorial we are going to focus on the movement of the player, the movement of the bricks and the collision of the bricks with the player.
we need to generate new falling bricks every x seconds. This is up to you to determinate the frequency of the bricks.
Select the items MC from the stage. Go to actions. Here we will write our code.
First of all let's think what we need. a variable that will tell us if the game is played (bricks and player are moving), a variable that will set the depth of the bricks on the stage and also will count the number of bricks, and one variable that will set the time frame. So let's initialize these variable:
onClipEvent(load){
this.joaca = 0 //the variable that will control if the game is played or not
this.i = 0 //the time frame variable
this.j = 1 //the depth variable
}
We will also need a function that would generate the position where to put the brick on the stage, what brick to put on the stage and also the speed of the brick. Even if this at first looks hard belive me that is is just a simple function that will generate random numbers (between two numbers. This function is:

getRandom = function (low, high) {
var thisNumber = high-low;
var randomUnrounded = Math.random()*thisNumber;
var randomNumber = Math.round(randomUnrounded);
randomNumber += low;
return randomNumber;
};
Low is the lowest number that will be generated and high is the highest number that will be generated. We will use this same function several times so it is important to make it as general as possible.
Now your AS for this should look like this:
onClipEvent (load) {
_root.joaca = 0;
this.i = 0;
this.j = 1;
getRandom = function (low, high) {
var thisNumber = high-low;
var randomUnrounded = Math.random()*thisNumber;
var randomNumber = Math.round(randomUnrounded);
randomNumber += low;
return randomNumber;
};
}

Now that we know what the all this we must think what we want this container to do.
First we want it to verify if the game is played: if _root.joaca = 1;
onClipEvent(enterFrame){
if (_root.joaca == 1) {

}
}
If the game is played we want it to start sending bombs (bricks). But we don't want to it to send bricks all the time. Only in a time interval. So this is when out variable this.i comes into action. It is 0 now so we want it incremented by one every frame. and only when a number of frames have passed a new brick will be generated. Depending on your frame rate (mine is 60fps) and the frequency we want it we will have to adjust when it will generate a new brick.
So we ad the increment code: this.i+=1
And we verify if the number of frames needed to generate a new brick have passed.
if(this.i>60){

}
I used 60 frames, so it will generate a new brick every second.
you code should be this now:
onClipEvent(enterFrame){
if (_root.joaca == 1) {
this.i+=1;
if(this.i>60){

}
}
}
Now comes the most interesting part. How to make it generate the brick.
First we need to random chose what brick to generate. Remember that I told you in Part one to name the Identifier name of the bricks like brick1, brick2...etc.? This is why. Using the function getRandom we will generate a random number and we will load that brick.
In my case i only have two types of bricks so I will call the function this way:
itemNo = getRandom (1, 2); //we store the generated number in the variable itemNo
Now we need to attach the brick. to have direct access to the brick while we work with it we need to store it into a temporary variable. I called it this.holder. The code to attach it is:
this.holder = _root.items.attachMovie("item"+itemNo, "item"+j, j);
With this line of code we attach the brick into the items MC that is on the stage.
Now that we have attached the brick we need to increment the numbers of bricks. So this.j+=1;
Also we need to reset the timer so we can ad another brick after other 60 frames have passed:
this.i=0;
Now we set the position on the stage. We know we want it to fall from the top, but from where exactly. Here the getRandom() function comes again.
this.holder._x = getRandom(0, 500) // we generate a random number between 0 and 500. 500 is my stage width.
Now we need to set the speed of the brick. we can make al bricks to have the same speed, but that won't be fun at all. so we need to randomly generate the speed as well. To do that we must first know what the speed actually is. It is the number of pixels the brick will move down every frame (in my case 60 frames every second); I recommend using numbers between 1 and 1,9 (it will move between 1 and 1,9 frames every second). We use the getRandom function again:
this.holder.speed = getRandom(100, 190)/100;

Now your code should look like this:
onClipEvent(enterFrame){
if (_root.joaca == 1) {
this.i+=1;
if(this.i>60){
itemNo = getRandom(1, 2);
this.holder = _root.items.attachMovie("item"+itemNo, "item"+j, j);
this.j+=1;
this.i = 0;
this.holder._x = getRandom(0, 500);
this.holder.speed = getRandom(100, 190)/100;
}
}
}
To make sure we don't overload the CPU I strongly recommend to reset the bricks counter from time to time. I used to reset it every 99 bricks so:
if(this.j>99){
this.j=1;
}

Now we must tell the brick what to do. First he must check if the game is played. After that we must move it down with it's speed:
this.holder.onEnterFrame = function(){
if(_root.joaca ==1){
this._y+=this.speed;
}
}

Also we must destroy the brick once it is out of the screen. So ad this lines of code:
if(this._y>500){
this.unloadMovie();
}

Now comes the interesting part. We must know IF the brick colided with the player. Flash has an integrated function called hitTest(); If the brick colided with the player we must stop the game:
if (this.hitTest(_root.player)) {
_root.joaca = 0;
_root.player.stopDrag();
}

This is how your code for the items MC should be now (yes...we are finished with it for now):
onClipEvent (load) {
_root.joaca = 0;
this.i = 0;
this.j = 1;
getRandom = function (low, high) {
var thisNumber = high-low;
var randomUnrounded = Math.random()*thisNumber;
var randomNumber = Math.round(randomUnrounded);
randomNumber += low;
return randomNumber;
};
}
onClipEvent (enterFrame) {
if (_root.joaca == 1) {
this.i += 1;
if (this.i>60) {
itemNo = getRandom(1, 2);
this.holder = _root.items.attachMovie("item"+itemNo, "item"+j, j);
this.j += 1;
this.i = 0;
this.holder._x = getRandom(0, 500);
this.holder.speed = getRandom(100, 190)/100;
}
if (this.j>99) {
this.j = 1;
}
this.holder.onEnterFrame = function() {
if (_root.joaca == 1) {
this._y += this.speed;
if (this._y>500) {
this.unloadMovie();
}
if (this.hitTest(_root.player)) {
_root.joaca = 0;
_root.player.stopDrag();
}
}
};
}
}
Now we need to ad the action to the player. This is very simple. Al wee have to do it start the game when it is clicked and make it follow the mouse:
on(release){
_root.isHit.unloadMovie();
this.startDrag(false,0,450,450,450);
_root.joaca=1;
}

Also ad a background to the stage. Make it also a movie clip and make it move down slowly to give the impression of movement. (the image used should be at least two times higher than your document).

Here is how it should look like now. REMEMBER that I added some more graphics to make the game more interesting. Your's should look different BUT should act the same. Also I did not ad a preloader to it. You will just have to wait for it to load. It has 435KB.

< Prev   Next >
Last Updated ( Saturday, 15 September 2007 19:32 )