Create a Flash game like Deflection – part 2
Filed Under Actionscript 2, Flash, Game design, Users contributions • 7 Comments
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
They can be easily customized to meet the unique requirements of your project.
7 Responses to “Create a Flash game like Deflection – part 2”
Leave a Reply
Trackbacks
-
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, [...]
-
Create a Flash game like Deflection : Emanuele Feronato - italian geek and PROgrammer on
July 25th, 2008 6:49 pm
[...] tutorial: available parts 1, 2, [...]
- Get up to $100,000 for your next Flash game with Mochi GAME Developer Fund
- Create a dynamic content animated footer ad for your site in just 9 jQuery lines – 17 lines version
- Sell sitelocked version of your Flash games and even .fla sources to Free Online Games
- Protect your work from ActionScript code theft with SWF Protector
- Create a dynamic content animated footer ad for your site in just 9 jQuery lines
- Understanding Box2D’s one-way platforms, aka CLOUDS
- Triqui MochiAds Arcade plugin for WordPress upgraded to 1.2
- Box2D Flash game creation tutorial – part 2
- 11 Flash isometric engines you can use in your games
- Monetize your Flash games with GamesChart
- Create a Lightbox effect only with CSS - no javascript needed
- Flash game creation tutorial - part 1
- Create a Flash Racing Game Tutorial
- Flash game creation tutorial - part 2
- Make a Flash game like Flash Element Tower Defense - Part 2
- Flash game creation tutorial - part 3
- Make a Flash game like Flash Element Tower Defense - Part 1
- Create a flash draw game like Line Rider or others - part 1
- Triqui MochiAds Arcade plugin for WordPress official page
- Create a flash artillery game - step 1
- Flash game creation tutorial – part 5.2 (4.88/5)
- Create a flash artillery game – step 1 (4.79/5)
- Create a Flash Racing Game Tutorial (4.76/5)
- Create a flash artillery game – step 2 (4.74/5)
- Create a survival horror game in Flash tutorial – part 1 (4.73/5)
- Creation of a Flash arcade site using WordPress – step 2 (4.73/5)
- Flash game creation tutorial – part 2 (4.71/5)
- Flash game creation tutorial – part 1 (4.70/5)
- Create a flash draw game like Line Rider or others – part 1 (4.69/5)
- Creation of a platform game with Flash – step 2 (4.68/5)

(17 votes, average: 4.24 out of 5)





Wow, nice!
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.
I just got a very nice idea! I’ll email you the game when I’m done!
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…)
Thanks for fixing bug! Nice to see that people like this implementation of player interaction.