It Works Like This

Background:This is the last activity before the culminating project is assigned. This activity demonstrates to the student to the concept of ‘building a simple game’ step-by-step. During this activity you will build a ‘maze’ game it in 4 stages. During each stage you will test the code and then move on to adding more code and objects.

This activity ALSO introduces a secondtype of hitTest called hitTestPoint(). It differs slightly from the hitTest() in that it checks for acollision on the perimeter of the object. The picture below shows the difference between the two types of hitTest. … Lets get started!

It works like this:

Objectives:In this activity students will:

1. Use a new type of hitTest command to do collision detection;
2. Create a simple maze game;
3. Use a ‘Library’ from a previous activity to get a ‘pacman’ and other movie clips;
4. Review the use of instance names, variables, if statements and objects;
5. Create code to detect keyboard presses; and
6. Practice writing functions to make objects move
   

Reference:Tutorial website

Part 1:Ready the library and buildthe Code:

1.Start a new AS3 Flash project and immediately save it as ‘myMazeGame.fla’.

2.Next, open Activity 8 – Keyboard Listeners. You need to get back to the myMazeGame environment. To do this, click on the tabs across the top of the screen.

3.Change your current library to the library from Activity 8. This means you can now drag and use objects from it onto your stage for use in the activity. You will be using blue_square and Pac later in this Activity. For now, just leave the library open.

4.In frame 1, press F9 and add the following code:

stage.addEventListener(KeyboardEvent.KEY_DOWN, checkKeysDown);

stage.addEventListener(KeyboardEvent.KEY_UP, checkKeysUp);

stage.addEventListener(Event.ENTER_FRAME, gameLoop);

var moveUp : Boolean=false;
var speed:Number=5;

function checkKeysDown(myKey:KeyboardEvent)

{

if (myKey.keyCode==Keyboard.UP)

{
moveUp=true;
}

}

function checkKeysUp(myKey:KeyboardEvent)

{

if (myKey.keyCode==Keyboard.UP)

{

moveUp=false;

}

}

function gameLoop(evt:Event)

{
if (moveUp=true)

{
player.y-=speed;

}
}

5.From the library, drag a copy of Pac out onto the stage and give it an instance name of ‘player’. Resize Pac to be 50 by 50 pixels in size.Save your work and test your movie. Pac should float up off the stage.
Part 2:Addingmore code to make the object move in 4 directions:

1.Insert the following lines of code. When you are done,save your work and test your movie. Pac should controlled only by your arrow keys.

stage.addEventListener(KeyboardEvent.KEY_DOWN, checkKeysDown);

stage.addEventListener(KeyboardEvent.KEY_UP, checkKeysUp);

stage.addEventListener(Event.ENTER_FRAME, gameLoop);

var moveUp : Boolean=false;

var speed:Number=5;

function checkKeysDown(myKey:KeyboardEvent)

{

if (myKey.keyCode==Keyboard.UP)

{
moveUp=true;
}

}

function checkKeysUp(myKey:KeyboardEvent)

{

if (myKey.keyCode==Keyboard.UP)

{

moveUp=false;

}

}

function gameLoop(evt:Event)

{
if (moveUp==true)

{
player.y-=speed;

}

if (moveDown==true)

{
player.y+=speed;

}

if (moveLeft==true)

{
player.x-=speed;

}

if (moveRight==true)

{
player.x+=speed;

}

}

2.When you are done,save your work and test your movie. Use the arrow keys to move Pac. Also, Pac should not go through the walls.

Part 3:Create the Maze and the hitTestPoint Code:

1.Start the maze by creating a new layer and re-name it to be maze. Make sure you have selected that layer to put the maze on.

2.Create the maze by selecting the rectangle tool and drawing rectangles to represent the walls of the maze similar to what you see in the figure below. Once all the walls are created, you need to turn all of the walls into one‘symbol’. Using the Pick tool, select all of the walls (you will need to SHIFT-CLICK on the interior walls). Once they are selected, press F8 and convert them to a symbol. Name it ‘Maze’ and it should appear in your library. Drag a copy on the stage and give it an instance name of‘maze’.

3.Next, the gameLoop function needs to be modified to check to see if the maze has been hit by the player. To do this, modify the function as follows:

function gameLoop(evt:Event)

{
if (moveUp==true)

{
player.y-=speed;

}

if (moveDown==true)

{
player.y+=speed;

}

if (moveLeft==true)

{
player.x-=speed;

}

if (moveRight==true)

{
player.x+=speed;

}

}

Part 4:Create “Prizes” on the maze

1.Create a new layer for the prizes to reside on. Name the layer ‘Prizes’.

2.Next, drag an instance of the blue_box from the library onto the stage. Resize it to in- between the walls of the maze. Give it an instance name of ‘prize1’. Drag 3 more instances of the blue box onto the stage, and give each one an instance name of Prize2, Prize3, & Priz4 respectively. It should look like the figure below. Save your work.

3.You need to write code to check for a hittest between Pac (player) and the Prize1, Prize2, … objects. To do this you are going to create a FUNCTION called Pickup(); This function will simply check for the collision. Modify the function gameLoop as shown below:

function gameLoop(evt:Event)

{

if (moveUp==true)

{

if (!maze.hitTestPoint(player.x,player.y-13,true))

{

player.y-=speed;

}

}

if (moveDown==true)

{

if (!maze.hitTestPoint(player.x,player.y+13,true))

{

player.y+=speed;

}

}

if (moveLeft==true)

{

if (!maze.hitTestPoint(player.x-12,player.y,true))

{

player.x-=speed;

}

}

if (moveRight==true)

{

if (!maze.hitTestPoint(player.x+12,player.y,true))

{

player.x+=speed;

}

}

}

Below is the rest of the function code. Add it in, test it out and save your work.

function pickup()
{

if (player.hitTestObject(Prizel))

{
Prize1.x=1000;
}

if (player.hitTestObject(Prize2))

{
Prize2.x=1000;
}

if (player.hitTestObject(Prize3))

{
Prize3.x=1000;
}

if (player.hitTestObject(Prize4))

{
Prize4.x=1000;
}

}

Part 5:Questions:

1. What is the purpose of the ENTER_FRAME code?______
   
2. Which variables are of type Boolean? ______
   
3. What is the long version of the line player.y-=speed; ______
   
4. Identify the parts of this line of code:
   

5.What code would remove the ‘maze’ from the stage? ______

6.Circlethe errors in the following code:

Activity 9Page 1 of 6