You should know how to create Movie Clips and name them. When using the code below, apart from debugging (bugs embedded), you must comment each line to show understanding. |
|||
![]() |
F9 to open Actions panel for coding | stop(); startGame.addEventListener(MouseEvent.CLICK, startTheGame); function startTheGame(e:MouseEvent) {
gotoAndPlay(2);
} //eof startTheGame() |
|
| 1 | This lesson, work on Frame 2 | to stop looping | On Frome 2 of Actins layer, write this code: stop(); //what does it do on Frmae 2? |
| 2 | ![]() |
to make the paddle follow the mouse and stay inside the box | //make the paddle move with the mouse
paddle.addEventListener(Event.ENTER_FRAME, moveThePaddle);
function moveThePaddle(e:Event){
paddle.x = mouseX;
if((paddle.x - paddle.width/2)<=0){
paddle.x = paddle.width/2;
}
if((paddle.x + paddle.width/2)>=600){
paddle.x = 600-paddle.width/2;
}
} |
| 3 | ![]() |
to move the ball, do score and check hit the brick | //move the ball
var ballXspeed :Number = 10;
var ballYspeed :Number = 5;
var score :Number = 0;
var lives :Number = 3;
addEventListener(Event.ENTER_FRAME, moveTheBall);
function moveTheBall(E:Event){
ball.x += ballXspeed;
ball.y += ballYspeed;
if(ball.x <=0 || ball.x >=600){
ballXspeed = - ballXspeed;
}
if(ball.y <=0){
ballYspeed = - ballYspeed;
}
if(ball.y >=400){
lives --;
}
if(ball.hitTestObject(paddle)){
ballYspeed = - ballYspeed;
}
if(ball.hitTestObject(brick)){
score += 20;
brick.parent.removeChild(brick);
scoreDisplay.text =String(score);
removeEventListener(Event.ENTER_FRAME,moveTheBall);
}
} |
| 4 | ![]() |
add more bricks and EDIT the code | Here is the last few lines of code above:
if(ball.hitTestObject(brick)){
score += 20;
brick.parent.removeChild(brick);
scoreDisplay.text =String(score);
removeEventListener(Event.ENTER_FRAME,moveTheBall);
}
These need to be changed when more bricks are added.
Suppose there are 8 bricks all together, then there would be 8 blocks of code like that.
If 10 brciks, then 10 blocks of code will be required.
To simplify, we use Array, a new data type, to hold all the bricks. |
| 5 | Apart from the brick in the frame already, add 7 more.
the use the following code to replace the above block of code
var bricks :Array = new Array();
bricks.push(brick1); // the brick1- brick7 are the names
bricks.push(brick2); // of bricks on the screen
bricks.push(brick3);
bricks.push(brick4);
bricks.push(brick5);
bricks.push(brick6);
bricks.push(brick7);
var i :int = 0;
for (i = bricks.length-1; i>0; i--){
if(ball.hitTestObject(bricks[i])){
score += 20;
scoreDisplay.text =String(score);
bricks[i].parent.removeChild(bricks[i]);
bricks.splice(i);
}
if(bricks.length == 0){
//level over
trace("Level Over");
messageDisplay.text = "Level Complete!";
}
} |
||
| 6 | ![]() |
It should look like this, in the end. | //move the ball
var ballXspeed :Number = 10;
var ballYspeed :Number = 5;
var score :Number = 0;
var lives :Number = 3;
var bricks :Array = new Array();
bricks.push(brick1); // the brick1- brick7 are the names of
bricks.push(brick2); // bricks on the screen
bricks.push(brick3);
bricks.push(brick4);
bricks.push(brick5);
bricks.push(brick6);
bricks.push(brick7);
var i :int = 0;
addEventListener(Event.ENTER_FRAME, moveTheBall);
function moveTheBall(E:Event){
ball.x += ballXspeed;
ball.y += ballYspeed;
if(ball.x <=0 || ball.x >=600){
ballXspeed = - ballXspeed;
}
if(ball.y <=0){
ballYspeed = - ballYspeed;
}
if(ball.y >=400){
lives --;
}
if(ball.hitTestObject(paddle)){
ballYspeed = - ballYspeed;
}
for (i = bricks.length-1; i>0; i--){
if(ball.hitTestObject(bricks[i])){
score += 20;
scoreDisplay.text =String(score);
bricks[i].parent.removeChild(bricks[i]);
bricks.splice(i);
}
if(bricks.length == 0){
//level over
messageDisplay.text = "Level Complete!";
//you need to draw a TextField on the screen and
name it "messageDisplay"
}
} |
| A better method. | The above method of checking each element in the array to test if it hits the ball usually works but may have problems. Here is an alternative: //set up the listeners, let the computer do the hardwork
for (i = bricks.length-1; i>=0; i--){
bricks[i].addEventListener(Event.ENTER_FRAME, checkHits);
}
//this is the event handler
function checkHits(E:Event){
if(ball.hitTestObject(MovieClip(E.target))){
score +=20;
MovieClip(E.target).parent.removeChild(MovieClip(E.target));
E.target.removeEventListener(Event.ENTER_FRAME, checkHits);
scoreDisplay.text = String(score);
numRemoved ++;
} else{
}
} //eof checkHits()
if(numRemoved == bricks.length){
messageDisplay.text = "Level 1 completed!";
......... (see below)
}
|
||
| When level 1 is completed (if score is 30 or more), you need to tidy up the stage before going to Frame 3 | if(score >=30){ |
||
| On Frame 3, you can click the button to go to Frame 4 to play level 2! | The code is similar to Frame 1's. | ||
| Now it is your turn to DO Level 2 independently! |