Create a Flash game like Deflection – part 2

Multipart tutorial: available parts 1, 2, 3

In the 1st part I showed you how to make a deflection engine starting from an old tutorial, now it’s time to let the player draw walls.

The idea comes from Srdjan Susnic, a reader who runs the blog Ask For Game Task.

The main task Srdjan accomplished was to add a mouse control so a player can draw lines from which the ball will bounce.

After collision between the ball and a line drawn by mouse, that line must be removed

The code is clear and well commented, but it seems to suffer a bug if the player just clicks the mouse without drawing.

It’s just a minor issue I fixed in a moment, and if you already read the original post, I just added the control if the player drew a line when he releases the mouse button with player_drew variable.

Anyway, this is the actionscript:

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
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
// create game object
game = {gravity:0, dragging:false, clip:_root.game_mc, stageW:500, stageH:400, maxV:20};
// create object
// point p0 is its starting point in the coordinates x/y
_root.attachMovie("ball", "ball", 1);
game.myOb = {clip:ball, airf:1, b:1, f:1, r:20, lastTime:getTimer()};
game.myOb.p0 = {x:150, y:80};
// vectors x/y components
game.myOb.vx = 8;
game.myOb.vy = 12;
// create first vector
// point p0 is its starting point in the coordinates x/y
// point p1 is its end point in the coordinates x/y
game.v = new Array();
game.v[0] = {p0:{x:50, y:40}, p1:{x:450, y:40}, b:1, f:1};
game.v[1] = {p0:{x:50, y:40}, p1:{x:50, y:360}, b:1, f:1};
game.v[2] = {p0:{x:50, y:360}, p1:{x:450, y:360}, b:1, f:1};
game.v[3] = {p0:{x:100, y:80}, p1:{x:400, y:320}, b:1, f:1};
_root.createEmptyMovieClip("lines", 2);
lines.lineStyle(1, 0xff0000);
// draw and calculate all parameters for the wall vectors
for (x=0; x<game.v.length; x++) {
	lines.moveTo(game.v[x].p0.x, game.v[x].p0.y);
	lines.lineTo(game.v[x].p1.x, game.v[x].p1.y);
	updateVector(game.v[x], true);
}
_root.onEnterFrame = function() {
	_root.runMe();
};
// function to draw the points, lines and show text
function drawAll(v) {
	// place ob mc
	v.clip._x = v.p1.x;
	v.clip._y = v.p1.y;
}
// main function
function runMe() {
	// start to calculate movement
	var ob = game.myOb;
	// add air resistance
	ob.vx *= ob.airf;
	ob.vy *= ob.airf;
	// dont let it go over max speed
	if (ob.vx>game.maxV) {
		ob.vx = game.maxV;
	} else if (ob.vx<-game.maxV) {
		ob.vx = -game.maxV;
	}
	if (ob.vy>game.maxV) {
		ob.vy = game.maxV;
	} else if (ob.vy<-game.maxV) {
		ob.vy = -game.maxV;
	}
	// update the vector parameters 
	updateObject(ob);
	// check the walls for collisions
	for (x=0; x<game.v.length; x++) {
		var w = game.v[x];
		var v = findIntersection(ob, w);
		v = updateVector(v, false);
		var pen = ob.r-v.len;
		// if we have hit the wall
		if (pen>=0) {
			// move object away from the wall
			ob.p1.x += v.dx*pen;
			ob.p1.y += v.dy*pen;
			// change movement, bounce off from the normal of v
			var vbounce = {dx:v.lx, dy:v.ly, lx:v.dx, ly:v.dy, b:1, f:1};
			var vb = bounce(ob, vbounce);
			ob.vx = vb.vx;
			ob.vy = vb.vy;
		}
	}
	/********************************************************************/
	// CODE ADDED BY SRDJAN SUSNIC
	// check the lines created by mouse for collisions
	x = 0;
	while (x<game.mouseV.length) {
		var w = game.mouseV[x];
		var v = findIntersection(ob, w);
		v = updateVector(v, false);
		var pen = ob.r-v.len;
		// if we have hit the wall
		if (pen>=0) {
			// move object away from the wall
			ob.p1.x += v.dx*pen;
			ob.p1.y += v.dy*pen;
			// change movement, bounce off from the normal of v
			var vbounce = {dx:v.lx, dy:v.ly, lx:v.dx, ly:v.dy, b:1, f:1};
			var vb = bounce(ob, vbounce);
			ob.vx = vb.vx;
			ob.vy = vb.vy;
			// remove the clip and vector array of the collided line
			game.mouseV[x].lineClip.removeMovieClip();
			game.mouseV.splice(x, 1);
		} else {
			x++;
		}
	}
	// END OF CODE ADDED BY SRDJAN SUSNIC	
	/********************************************************************/
	// reset object to other side if gone out of stage
	if (ob.p1.x>game.stageW+ob.r) {
		ob.p1.x = -ob.r;
	} else if (ob.p1.x<-ob.r) {
		ob.p1.x = game.stageW+ob.r;
	}
	if (ob.p1.y>game.stageH+ob.r) {
		ob.p1.y = -ob.r;
	} else if (ob.p1.y<-ob.r) {
		ob.p1.y = game.stageH+ob.r;
	}
	// draw it 
	drawAll(ob);
	// make end point equal to starting point for next cycle
	ob.p0 = ob.p1;
	// save the movement without time
	ob.vx = ob.vx/ob.timeFrame;
	ob.vy = ob.vy/ob.timeFrame;
}
// function to find all parameters for the vector
function updateVector(v, frompoints) {
	// x and y components
	if (frompoints) {
		v.vx = v.p1.x-v.p0.x;
		v.vy = v.p1.y-v.p0.y;
	} else {
		v.p1.x = v.p0.x+v.vx;
		v.p1.y = v.p0.y+v.vy;
	}
	// length of vector
	v.len = Math.sqrt(v.vx*v.vx+v.vy*v.vy);
	// normalized unti-sized components
	if (v.len>0) {
		v.dx = v.vx/v.len;
		v.dy = v.vy/v.len;
	} else {
		v.dx = 0;
		v.dy = 0;
	}
	// right hand normal
	v.rx = -v.dy;
	v.ry = v.dx;
	// left hand normal
	v.lx = v.dy;
	v.ly = -v.dx;
	return v;
}
function updateObject(v) {
	// find time passed from last update
	var thisTime = getTimer();
	var time = (thisTime-v.lastTime)/100;
	// we use time, not frames to move so multiply movement vector with time passed
	v.vx *= time;
	v.vy *= time;
	// add gravity, also based on time
	v.vy = v.vy+time*game.gravity;
	v.p1 = {};
	// find end point coordinates
	v.p1.x = v.p0.x+v.vx;
	v.p1.y = v.p0.y+v.vy;
	// length of vector
	v.len = Math.sqrt(v.vx*v.vx+v.vy*v.vy);
	// normalized unti-sized components
	v.dx = v.vx/v.len;
	v.dy = v.vy/v.len;
	// right hand normal
	v.rx = -v.vy;
	v.ry = v.vx;
	// left hand normal
	v.lx = v.vy;
	v.ly = -v.vx;
	// save the current time
	v.lastTime = thisTime;
	// save time passed
	v.timeFrame = time;
}
// find intersection point of 2 vectors
function findIntersection(v1, v2) {
	// vector between center of ball and starting point of wall
	var v3 = {};
	v3.vx = v1.p1.x-v2.p0.x;
	v3.vy = v1.p1.y-v2.p0.y;
	// check if we have hit starting point
	var dp = v3.vx*v2.dx+v3.vy*v2.dy;
	if (dp<0) {
		// hits starting point
		var v = v3;
	} else {
		var v4 = {};
		v4.vx = v1.p1.x-v2.p1.x;
		v4.vy = v1.p1.y-v2.p1.y;
		// check if we have hit side or endpoint
		var dp = v4.vx*v2.dx+v4.vy*v2.dy;
		if (dp>0) {
			// hits ending point
			var v = v4;
		} else {
			// it hits the wall
			// project this vector on the normal of the wall
			var v = projectVector(v3, v2.lx, v2.ly);
		}
	}
	return v;
}
// find new vector bouncing from v2
function bounce(v1, v2) {
	// projection of v1 on v2
	var proj1 = projectVector(v1, v2.dx, v2.dy);
	// projection of v1 on v2 normal
	var proj2 = projectVector(v1, v2.lx, v2.ly);
	var proj = {};
	// reverse projection on v2 normal
	proj2.len = Math.sqrt(proj2.vx*proj2.vx+proj2.vy*proj2.vy);
	proj2.vx = v2.lx*proj2.len;
	proj2.vy = v2.ly*proj2.len;
	// add the projections
	proj.vx = v1.f*v2.f*proj1.vx+v1.b*v2.b*proj2.vx;
	proj.vy = v1.f*v2.f*proj1.vy+v1.b*v2.b*proj2.vy;
	return proj;
}
// project vector v1 on unit-sized vector dx/dy
function projectVector(v1, dx, dy) {
	// find dot product
	var dp = v1.vx*dx+v1.vy*dy;
	var proj = {};
	// projection components
	proj.vx = dp*dx;
	proj.vy = dp*dy;
	return proj;
}
/********************************************************************/
// CODE ADDED BY SRDJAN SUSNIC
// declare starting point of the current drawing line
var lineX1, lineY1;
// declare ending point of the current drawing line
var lineX2, lineY2;
// flag that states if we can draw line or not
can_draw = false;
// flag that states if the player drew a line
player_drew = false;
// next movie depth for the current drawing line
nextLineDepth = 0;
// create array for vectors of lines drawn by mouse
game.mouseV = new Array();
// create a movie which represents a line drawn by mouse
_root.createEmptyMovieClip("mouseLine", 3);
// when we click...
onMouseDown = function () {
	// get starting point of line according to current mouse position
	lineX1 = _root._xmouse;
	lineY1 = _root._ymouse;
	// set drawing flag so we can draw a line when mouse is moved
	can_draw = true;
};
// when we move mouse...
onMouseMove = function () {
	if (can_draw) {
		// the player is drawing!
		player_drew = true;
		// get ending point of line according to current mouse position
		lineX2 = _root._xmouse;
		lineY2 = _root._ymouse;
		// clear the previous line drawn by mouse
		mouseLine.clear();
		// set the drawing style
		mouseLine.lineStyle(2, 0x00dd00);
		// move the pen to the starting position
		mouseLine.moveTo(lineX1, lineY1);
		// draw the line to the ending position
		mouseLine.lineTo(lineX2, lineY2);
	}
};
// when we release...
onMouseUp = function () {
	if (player_drew) {
		// clear the line drawn by mouse
		mouseLine.clear();
		// create a new movie clip which contains the line previously drawn by mouse
		var tmp = createEmptyMovieClip("newLine", 10+nextLineDepth);
		tmp.lineStyle(5, 0x0000ff);
		tmp.moveTo(lineX1, lineY1);
		tmp.lineTo(lineX2, lineY2);
		// increase movie depth for the next line
		nextLineDepth++;
		// add the parameters of previously created line to the end of line vectors array
		// lineClip parameter is used to store previously created line movie clip
		// so we can remove it when ball bounces from it
		index = game.mouseV.length;
		game.mouseV[index] = {p0:{x:lineX1, y:lineY1}, p1:{x:lineX2, y:lineY2}, b:1, f:1, lineClip:tmp};
		// calculate all parameters for the created line vector
		updateVector(game.mouseV[index], true);
		// set drawing flag so we can't draw a line when mouse is moved
		player_drew = false;
	}
	can_draw = false;
};
// END OF CODE ADDED BY SRDJAN SUSNIC	
/********************************************************************/

And this is the result:

Now you can draw lines with the mouse and the only thing we need in order to have a complete game engine is handling the exit.

Any idea?

Download the source code and play.

Multipart tutorial: available parts 1, 2, 3

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (17 votes, average: 4.24 out of 5)
Loading ... Loading ...
If you found this post useful, please consider a small donation.
» 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.

7 Responses to “Create a Flash game like Deflection – part 2”

  1. souled on July 12th, 2008 2:18 pm

    Wow, nice!

  2. Questo on July 12th, 2008 10:21 pm

    Amazing
    I was playing around and if you right click while making a line it sotps the ball but the ball keeps moving when you put lines on it. it’s pretty cool.

  3. David on July 13th, 2008 1:28 am

    I just got a very nice idea! I’ll email you the game when I’m done!

  4. FrozenHaddock on July 13th, 2008 1:35 am

    This is pretty awesome, definitely looking at making something with this! (even if it’s just the line drawing and removal part of it, I have a few ideas…)

  5. ssusnic on July 14th, 2008 8:27 am

    Thanks for fixing bug! Nice to see that people like this implementation of player interaction.

Leave a Reply




Trackbacks

  1. Create a Flash game like Deflection - part 3 : Emanuele Feronato - italian geek and PROgrammer on July 25th, 2008 6:47 pm

    [...] tutorial: available parts 1, 2, [...]

  2. Create a Flash game like Deflection : Emanuele Feronato - italian geek and PROgrammer on July 25th, 2008 6:49 pm

    [...] tutorial: available parts 1, 2, [...]

flash games company