Flash prototype: walking on disappearing tiles

November 26, 2006 • Flash by Emanuele Feronato • 20 Comments

I remember an old c64 game (and some flash and javascript remakes) where you had to walk over all tiles in a stage, never walking on the same tile twice, because as you leave a tile, it disappears.

In this far-from-being-finished prototype, I took some pieces of code I found in a tutorial published on gotoandplay and coded this prototype.

Try to walk over all tiles, without falling down.

Cursor keys to move.

The whole actionscript is on the 1st frame

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

map = new Array();
generateMap();
drawIt(map);
_root.attachMovie("item", "sprite", 10000);
sprite._x = 40;
sprite._y = 40;
sprite.px = 2;
sprite.py = 2;
sprite.speed = 2;
sprite.steps = (20/sprite.speed);
sprite.moving = false;
sprite.count = 0;
sprite.dead = 0;
sprite.onEnterFrame = function() {
	if (!this.dead) {
		if (!this.moving) {
			actual_tile = this.px+(this.py*7);
		}
		if ((Key.isDown(Key.LEFT)) && (!this.moving)) {
			this.px--;
			dir = "left";
			this.moving = true;
		}
		if ((Key.isDown(Key.RIGHT)) && (!this.moving)) {
			this.px++;
			dir = "right";
			this.moving = true;
		} else if ((Key.isDown(Key.UP)) && (!this.moving)) {
			this.py--;
			dir = "up";
			this.moving = true;
		} else if ((Key.isDown(Key.DOWN)) && (!this.moving)) {
			this.py++;
			dir = "down";
			this.moving = true;
		}
		if (this.moving) {
			_root["tile_"+actual_tile]._alpha -= (100/sprite.steps);
			trace(actual_tile+"-"+actual_tile%7+"-"+int(actual_tile/7));
			map[actual_tile%7][int(actual_tile/7)] = 0;
			if (this.count>=this.steps) {
				this.moving = false;
				this.count = 0;
			} else {
				switch (dir) {
				case "left" :
					this._x -= this.speed;
					break;
				case "right" :
					this._x += this.speed;
					break;
				case "up" :
					this._y -= this.speed;
					break;
				case "down" :
					this._y += this.speed;
					break;
				}
				this.count++;
			}
		}
		if (!this.moving) {
			valore = map[this.px][this.py];
			if (valore == 0) {
				this.dead = 1;
			}
		}
	}
	if (this.dead) {
		this._alpha--;
		if (this._alpha<0) {
			this.dead = 0;
			this._x = 40;
			this._y = 40;
			this.px = 2;
			this.py = 2;
			this._alpha = 100;
			generateMap();
			drawIt(map);
		}
	}
};
function drawIt(theMap) {
	for (var y = 0; y<7; y++) {
		for (var x = 0; x<7; x++) {
			pos = x+(y*7);
			if (theMap[x][y] == 1) {
				_root.attachMovie("myTile", "tile_"+pos, pos);
				_root["tile_"+pos]._x = x*20;
				_root["tile_"+pos]._y = y*20;
			}
		}
	}
}
function generateMap() {
	map[0] = new Array(0, 0, 0, 0, 0, 0, 0);
	map[1] = new Array(0, 1, 1, 1, 1, 1, 0);
	map[2] = new Array(0, 1, 1, 1, 1, 1, 0);
	map[3] = new Array(0, 1, 1, 1, 1, 1, 0);
	map[4] = new Array(0, 1, 1, 1, 1, 1, 0);
	map[5] = new Array(0, 1, 1, 1, 1, 1, 0);
	map[6] = new Array(0, 0, 0, 0, 0, 0, 0);
}

Some comments to the code:

Lines 95-103 (yes, it’s better to begin from the end): I define the map, in this case a 7*7 array. “1″ means there is a tile on the floor, “0″ means there is no floor, and you will fall down if you step over it.

Lines 83-94: Time to draw the map, attaching the same movieclip (a 20*20 red square) when I find a “1″ in the map array.

Lines 1-13: Initializing the game and creating some variables, most of all about the main sprite (the 20*20 green square, the sprite you control)

Lines 15-36: Checking if an arrow key is pressed and if the sprite was already moving, then calculating new sprite’s position according to the key pressed.

Lines 37-61: Routine that moves the main sprite and makes the floor disappear behind it

Lines 62-67: Checking if the sprite is on a tile or not

Lines 69-80: If the sprite is dead, because he has not floor under its feet, re-initialize the game and start again.

That’s all at the moment, download the source code and give me feedback while I unleash some more ideas…

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 4.50 out of 5)
Loading ... Loading ...
Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 20 comments

  1. Joe

    on December 17, 2006 at 9:50 pm

    This is great and all.
    But, I was wondering, would there be a way to make more levels with like bigger maps and such?

  2. Krut @ Joe

    on December 18, 2006 at 3:29 am

    Joe, one way could be to make some squares black, being impassable, getting more and more. You’d have to be creative to make them successful and/or hard.

  3. Mousey

    on December 18, 2006 at 3:24 pm

    Will there be another tutorial on how to add more levels as i’m new to action script?

    and i think the tutorial i fab !

    thanks Mousey

  4. Emanuele Feronato

    on December 18, 2006 at 5:10 pm

    Sure it will!!!!

  5. eblup

    on December 23, 2006 at 10:44 am

    ??????????????????????????

    do you put this in a flash file or no is it a move clip do you need to draw anything explain it geesis christ u moreon

  6. chris

    on December 29, 2006 at 12:37 pm

    i don’t get what you have to do.
    i put the code in actions for the first frame and when i test movie nothing happens.

  7. Mousey

    on January 3, 2007 at 6:18 pm

    Its simple to make although i noticed its not all said it the tutorial,

    First create a new document in flash with the dimentions:
    140 by 140 and frame rate set to 40fps

    Second you need 2 create 2 movie clips

    one called my tile, make this a red square approx 19px by 19px. then in the library right click it and press export for action script, with the identifer set to my tile.

    The next movie clip is called item make this the same as before but make it another colour (e.g. green) and when you set up the linkage set the identifer to item.

    Last add the action script to the frame and it should work!

  8. omgwdfbbq

    on January 5, 2007 at 3:55 am

    “??????????????????????????

    do you put this in a flash file or no is it a move clip do you need to draw anything explain it geesis christ u moreon”

    How old are you? I thought this tutorial was fine for someone with an IQ above 60…

  9. Dan

    on January 12, 2007 at 2:29 pm

    Pretty awesome, especially considering how small the code is! I’m new to flash but not to programming, and this is already giving me some rad ideas to work on…

    Was the C64 game reckless rufus by any chance?

  10. Emanuele Feronato

    on January 12, 2007 at 7:47 pm

    Yeah, it was a good game, long live commodore64

  11. Florian

    on January 29, 2007 at 4:24 am

    Hi,
    I found your blog via google by accident and have to admit that youve a really interesting blog :-)
    Just saved your feed in my reader, have a nice day :)

  12. andrew

    on February 18, 2007 at 7:42 pm

    Yea i’ll haft to try it. It’s sad thet im only 8 years old and i’m prity good at it.A’ll try that today. Ok

  13. Chazz

    on February 21, 2007 at 3:23 am

    Dude I put the code in my first frame but nothing happens..

  14. Justice

    on April 28, 2007 at 3:03 pm

    Also you could add holes already there, or powerups such as a bomb that destroys a 3×3 square. Perhaps you have to be a certain colour when touching certain tiles in later levels so you have to go to the tile that has the next colour first before you can destroy tiles of that colour

  15. robert

    on May 22, 2007 at 12:37 am

    Hey im following the security tutorial how would i make a health pack dissipere
    I was guessing that it would be like this code

  16. Des

    on September 1, 2007 at 6:30 pm

    Hi, excuse me for the dump question, but what code do you write when you want to remove the map – I mean, go to an end frame for the game or something like this. Just how to get rid of it, if you want to load something else.
    I am newbie with Action Script and I will appreciate your help.

  17. Ruiqi

    on January 7, 2008 at 7:58 am

    For an end frame, in the first frame or the frame the game is on, put stop(); to go to the next level or to the end page, put gotoAndStop(whatever frame the next level or end page is); somewhere but i don’t really know where.

  18. danny

    on February 6, 2008 at 1:50 am

    how would i make it go to the next frame once the green square is on the last red square?

  19. Jamis

    on April 8, 2009 at 4:11 am

    Hey, did you know your site is serving out malicious JS code?

    Your site is on
    http://www.malwaredomainlist.com/mdl.php?inactive=&sort=Date&search=&colsearch=All&ascordesc=DESC&quantity=100&page=0

    2009/04/07_00:00 http://www.emanueleferonato.com/2006/11/26/flash-prototype-walking-on-disappearing-tiles/ 62.149.140.41 webx31.aruba.it compromised site/redirects to Mebroot itpuntoit snc, Emanuele info@itpuntoit.it

  20. Abinandhanan

    on July 19, 2009 at 8:31 am

    This was great.i’m a beginner so it was littledifficult.

< >