Create a Flash game like PixelField – part 3

September 11, 2008 • Actionscript 2, Flash, Game design by Emanuele Feronato • 5 Comments

This is the 3rd step of the creation of this awesome game.

In this step, I created a full playable game with 3 levels.

Level generation is made through a function and a switch that renders the proper level.

Full source code commented as usual, be sure to read part 2 before jumping into this one.

Now, it’s all about level design and adjusting parameters to create your own PixelField game.

This is the AS2 version, but if the game gets a good feedback (comments and votes) I’ll release the AS3 version too.

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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207

// size of the tile, in pixels
// notice that the size of the tile movieclip is less than 20 to leave a gap between tiles
// like in the original game
tilesize = 20;
// turning the level generation routine into a function
function create_level(level) {
	// removing old movieclips (if any), wont do anything if it's the first time
	_root.level.removeMovieClip();
	_root.level_diamonds.removeMovieClip();
	_root.big_square.removeMovieClip();
	for (x=0; x<=3; x++) {
		_root["square_"+x].removeMovieClip();
	}
	_root.drawing.removeMovieClip();
	// map generation (the most boring part, obviously)
	map = new Array();
	// creation of different levels according to level value
	switch (level) {
	case 1 :
		// 0 = empty space, 1 = wall, 2 = diamond (or whatever item to be collected)
		map[0] = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
		map[1] = [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1];
		map[2] = [1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1];
		map[3] = [1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1];
		map[4] = [1, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 1];
		map[5] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[6] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[7] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[8] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[9] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[10] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[11] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[12] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[13] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[14] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[15] = [1, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 1];
		map[16] = [1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1];
		map[17] = [1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1];
		map[18] = [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1];
		map[19] = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
		// player start position
		start_x = 5;
		start_y = 10;
		break;
	case 2 :
		// 0 = empty space, 1 = wall, 2 = diamond (or whatever item to be collected)
		map[0] = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
		map[1] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[2] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[3] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[4] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[5] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[6] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[7] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[8] = [1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1];
		map[9] = [1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1];
		map[10] = [1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1];
		map[11] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[12] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[13] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[14] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[15] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[16] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[17] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[18] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[19] = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
		// player start position
		start_x = 20;
		start_y = 15;
		break;
	case 3 :
		// 0 = empty space, 1 = wall, 2 = diamond (or whatever item to be collected)
		map[0] = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
		map[1] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[2] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[3] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[4] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[5] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[6] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[7] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[8] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[9] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[10] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[11] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[12] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[13] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[14] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[15] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[16] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[17] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[18] = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
		map[19] = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
		// player start position
		start_x = 5;
		start_y = 10;
		break;
	}
	// number of diamonds to be collected to complete the level
	diamonds = 0;
	// creation of the mc that will contain level tiles
	_root.createEmptyMovieClip("level", _root.getNextHighestDepth());
	// creation of the mc that will contain diamonds
	_root.createEmptyMovieClip("level_diamonds", _root.getNextHighestDepth());
	// drawing the level
	for (x=0; x<map.length; x++) {
		for (y=0; y<map[0].length; y++) {
			// attaching a wall
			if (map[x][y] == 1) {
				// notice that in previous examples I attached walls using
				// level.attachMovie... but now I have to use
				// _root.level.attachMovie... and same thing for the depth
				_root.level.attachMovie("wall", "wall_"+_root.level.getNextHighestDepth(), _root.level.getNextHighestDepth(), {_x:y*tilesize, _y:x*tilesize});
			}
			// attaching a diamond          
			if (map[x][y] == 2) {
				// increasing the number of diamonds to be collected to complete the level
				diamonds++;
				diam = _root.level_diamonds.attachMovie("diamond", "diamond_"+_root.level_diamonds.getNextHighestDepth(), _root.level_diamonds.getNextHighestDepth(), {_x:y*tilesize, _y:x*tilesize});
				// function the diamond will execute at every frame
				diam.onEnterFrame = function() {
					// checking collision between the diamond and one of the four satellites
					for (x=0; x<=3; x++) {
						if (this.hitTest(_root["square_"+x]._x, _root["square_"+x]._y, true)) {
							// if one of the four satellites hit the diamond, then remove it and
							// decrease the number of diamonds to be collected to complete the level
							diamonds--;
							// if the player collected all diamonds, then advance level
							if (diamonds == 0) {
								_root.lev++;
								create_level(lev);
							} else {
								this.removeMovieClip();
							}
						}
					}
				};
			}
		}
	}
	// friction, speed scale and satellite distance
	// playing with these variables will affect gameplay
	// these values can be inserted inside the switch to have
	// different parameters at every level
	friction = 0.97;
	speed_scale = 0.006;
	satellite_distance = 50;
	// movieclip where I will draw the four elastics
	_root.createEmptyMovieClip("drawing", _root.getNextHighestDepth());
	// big square, the "player"
	_root.attachMovie("big_square", "big_square", _root.getNextHighestDepth());
	//attaching the four satellites
	for (x=0; x<=3; x++) {
		_root.attachMovie("square", "square_"+x, _root.getNextHighestDepth());
	}
	// placing the elements on stage
	// the elements are the big square and the four satellites
	place_elements();
}
// calling the function to generate the level
lev = 1;
create_level(lev);
// main function, to be executed at every frame
_root.onEnterFrame = function() {
	drawing.clear();
	drawing.lineStyle(1, 0x000000, 50);
	for (x=0; x<=3; x++) {
		// determining where SHOULD be the x-th satellite without elasticity
		should_be_x = big_square._x+satellite_distance*Math.cos((big_square._rotation+45+90*x)*0.0174532925);
		should_be_y = big_square._y+satellite_distance*Math.sin((big_square._rotation+45+90*x)*0.0174532925);
		// determining the distance between the point where it SOULD BE and where it IS
		dist_x = (should_be_x-_root["square_"+x]._x)*speed_scale;
		dist_y = (should_be_y-_root["square_"+x]._y)*speed_scale;
		// adding elasticity... refer to http://www.emanueleferonato.com/2007/09/01/controlling-a-ball-like-in-flash-elasticity-game-tutorial/
		_root["square_"+x].xspeed += dist_x;
		_root["square_"+x].yspeed += dist_y;
		_root["square_"+x].xspeed *= friction;
		_root["square_"+x].yspeed *= friction;
		_root["square_"+x]._x += _root["square_"+x].xspeed;
		_root["square_"+x]._y += _root["square_"+x].yspeed;
		_root["square_"+x]._rotation = big_square._rotation;
		drawing.moveTo(big_square._x, big_square._y);
		drawing.lineTo(_root["square_"+x]._x, _root["square_"+x]._y);
		// checking collision between the each satellite and the level
		if (level.hitTest(_root["square_"+x]._x, _root["square_"+x]._y, true)) {
			// if true, then restart the level
			create_level(lev);
		}
	}
	big_square._rotation += 2;
};
// moving the big square if the player pressed mouse button
_root.onMouseDown = function() {
	big_square._x = _root._xmouse;
	big_square._y = _root._ymouse;
};
// function used to place emlements on stage
// unlike the previous version, the satellites start without elastic effect
function place_elements() {
	big_square._x = start_x*tilesize;
	big_square._y = start_y*tilesize;
	for (x=0; x<=3; x++) {
		_root["square_"+x]._x = big_square._x+satellite_distance*Math.cos((big_square._rotation+45+90*x)*0.0174532925);
		_root["square_"+x]._y = big_square._y+satellite_distance*Math.sin((big_square._rotation+45+90*x)*0.0174532925);
		_root["square_"+x].xspeed = 0;
		_root["square_"+x].yspeed = 0;
	}
}

And here it is the result:

Download the source code and show me your own PixelField game.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (10 votes, average: 3.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 5 comments

  1. Monkios

    on September 11, 2008 at 3:28 pm

    I’m making things up and I never played Pixel Field before but maybe the player could start with only one satelite and everytime he “eats” a diamond, he gets a new one.

    “Snake-stylish”

    The satelite distance could also augment as the player collects diamonds.

  2. Doggy

    on September 11, 2008 at 6:19 pm

    Hey can you show us how to make it so we dont have to click? That would be awsome!

  3. Prankard

    on September 14, 2008 at 3:27 pm

    @ Doggy.
    To get it to always follow the mouse. Simply place the code inside onMouseDown function:

    big_square._x = _root._xmouse;
    big_square._y = _root._ymouse;

    into the onEnterFrame function.

    Looks really nice. Although I’m not very good at this game. I couldn’t for the life of me get the yellow square on the bottom left in the second level.

  4. miff

    on September 15, 2008 at 9:09 am

    lvl 2 is too hard:))), great source. I use your idea of 100 rounds to make invitation to Blog Open (South East Europe Blog festival) 2008 in Serbia, Bor. Thanks Emanuele you sre great.

  5. tonypa

    on September 25, 2008 at 9:29 am

    I originally made the game couple years ago with Flash5 and the code looked pretty much same, except I created all the levels as separate frames inside movie clip and so didnt have any map related stuff.

    Current version with Perfect Pi Pack however is AS3 and I used bitmaps to store levels. So each level is small bitmap, to create level I check the pixels in it, one color is for the pickable diamonds are other colors are for wall pieces. Only things that must be added manually are moving walls, they have paths in the form of array of coordinates.

< >