void star games

Flash Tutorials

Flash Memory Game Tutorial 2 Back Start Over Next

Completing the Tile class. If everything is working so far, we need to complete the tile class. Replicate the instructions for the first frame to create the four sprites for the four images. This is the easy part.

Next, add one parameter to the constructor function that will represent which image to be displayed on the tile when it is turned face up. That's going to be an integer. Let's call it option, and add it to the function as (the_stage, option:int) to let Flash know that this is an integer.

To create the bitmap for it, we'll have to test its value and use a different class for each possible value. It's easier to do it in a separate function. Start with the following structure:
function choose_bmp(option:int) {
  var bmp;
  switch (option) {
    case 0 :
      bmp=new elek_bmp(90,90);
      break;
  }
  image_sprite=make_sprite(bmp,90);
  parent.addChild(image_sprite);
}
and then replace "elek_bmp" with the name of the class of your first image (what you named it in the properties). Also replace 90 with the size of your images. You'll have to add as many other cases in this function as images that you have. This function is not declared public because it doesn't need to be called from outside the class. Once the function is finished, add a call to it at the end of the constructor, like
choose_bmp(option);

Test that the code works so far by adding an option in the constructor of the tile in the fla file and running it.

Placing the tile. We need to add some functions to be able to place the tile at any position we want on the stage. This could be done in the constructor by adding a couple more parameters, but it would overcharge it. Besides, a separate function would allow us to re-place the tile later if we want to. Add the following code in the class:
function move_to(sprite_obj, valx, valy) {
  sprite_obj.x=valx;
  sprite_obj.y=valy;
}
public function place(posx, posy) {
  move_to(back_sprite, posx, posy);
}
Add a line in the function place for every sprite in the class. Then for the image sprite, add an integer representing half of the difference between the size of the frames and the size of the images to both coordinates. This will center the image over the frame. For example, if the frames are of size 100 and the images 90, then you need to add 5 to both posx and posy.

Test this by calling the function from the fla file:
test.place(50, 50);

What to display. Next we'll add a few functions that can be called to decide which frame to display and whether or not to show the image. We'll call the function after each of the frames. The first one will display the back frame without the image. Add the following function in the class:
public function show_back() {
  back_sprite.visible = true;
  click_sprite.visible = false;
  look_sprite.visible = false;
  found_sprite.visible = false;
  image_sprite.visible = false;
}
then replicate the function for the four other frames, making only the appropriate frame visible. For the show_look and show_found you also need to make the image sprite visible.

Mouse interraction. It's time to start making the tile react to mouse events. These events can/must be added to each individual sprite such that a function (callback) is called if any of them is clicked.

Let's start by adding a callback function for the back sprite. What needs to happen when a tile showing the back frame is clicked is to change it to a tile that was clicked. Add the following function to the class:
public function back_click(ev:MouseEvent) {
  show_click();
}
The we have to attach an event to the back_sprite that captures the mouse being clicked. More precisely, we want the tile to be shown as "clicked" when the mouse button is down, and then opened when the mouse button is released. Add the following line to the constructor, at the end:
back_sprite.addEventListener(MouseEvent.MOUSE_DOWN, back_click);
Test this functionality by going to the .fla file and changing the show function to show_back. Then when you run the program and click on the tile, the "clicked" one should appear.

Add a similar function called click_open for the click_sprite where you call the function show_look. Instead of MOUSE_DOWN use MOUSE_UP this time.

Who/where am I. In the context of the whole game, the tile will be placed on a row and column in a table and it probably needs to know all this information and store internally. Let us declare three more class variables at the top (next to the sprites):
var row, col, the_table;
and then declare a function that can be used to set these:
public function set_position(r, c, tab) {
  row = r;
  col = c;
  the_table = tab;
}

This is all the functionality we need in this class for now. Next we'll define a class handling the entire table of tiles.

Back Start Over Next