Create a Flash game like Deflection – part 3
Multipart tutorial: available parts 1, 2, 3
In this 3rd part we are going to create a complete game with exit and two levels.
Read parts 1 and 2 if you haven’t done it already.
I’ll also fix a bug reported by Questo:
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.
It’s not a difficult task since the game engine is already working… I just created a makelevel function that handles level creation with a switch
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 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 | // create game object
game = {gravity:0, dragging:false, clip:_root.game_mc, stageW:500, stageH:400, maxV:20};
// starting level
level = 1;
// function that prepares the level
function makelevel(level) {
// 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 the exit
_root.attachMovie("exit", "exit", 1);
// create the movieclip that will contain maze lines
_root.createEmptyMovieClip("lines", 2);
lines.lineStyle(1, 0xff0000);
// create a movie which represents a line drawn by mouse
_root.createEmptyMovieClip("mouseLine", 3);
// create array for vectors of lines drawn by mouse
game.mouseV = new Array();
// create the ball
_root.attachMovie("ball", "ball", 4);
game.myOb = {clip:ball, airf:1, b:1, f:1, r:10, lastTime:getTimer()};
// drawing and placing assets according to level number
switch (level) {
case 1 :
exit._x = 100;
exit._y = 300;
game.myOb.p0 = {x:20, y:80};
// vectors x/y components
game.myOb.vx = 0;
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}};
game.v[1] = {p0:{x:50, y:40}, p1:{x:50, y:360}};
game.v[2] = {p0:{x:50, y:360}, p1:{x:450, y:360}};
game.v[3] = {p0:{x:100, y:80}, p1:{x:400, y:320}};
break;
case 2 :
exit._x = 100;
exit._y = 350;
game.myOb.p0 = {x:250, y:250};
// vectors x/y components
game.myOb.vx = 12;
game.myOb.vy = 0;
// 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:200, y:0}, p1:{x:200, y:120}};
game.v[1] = {p0:{x:200, y:150}, p1:{x:200, y:400}};
game.v[2] = {p0:{x:300, y:0}, p1:{x:300, y:400}};
game.v[3] = {p0:{x:0, y:300}, p1:{x:200, y:300}};
game.v[4] = {p0:{x:200, y:150}, p1:{x:300, y:150}};
break;
}
// 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);
}
// flag to see if I pressed the right mouse button
right_click = false;
}
// phyisically making the level
makelevel(level);
_root.onEnterFrame = function() {
// checking right mouse button
if (Key.isDown(2)) {
right_click = true;
}
_root.runMe();
// checking the distance from the exit
dist_x = ball._x-exit._x;
dist_y = ball._y-exit._y;
distance = dist_x*dist_x+dist_y*dist_y;
// arbitrary distance, I don't want the ball to just touch the exit, I want the ball to be a bit inside the exit
if (distance<256) {
// level up...
level++;
makelevel(level);
}
};
// 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;
// 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 and !right_click) {
// clear the line drawn by mouse
mouseLine.clear();
// create a new movie clip which contains the line previously drawn by mouse
var tmp = mouseLine.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;
}
// if the released button was after a right click, then don't draw the new line
if (right_click) {
right_click = false;
mouseLine.clear();
}
can_draw = false;
};
// END OF CODE ADDED BY SRDJAN SUSNIC
/********************************************************************/ |
And now you can play this two levels game… take the blue ball to the green circle.
Now you have all the basics to create your own Deflection game… so I expect to see something interesting on NewGrounds in a few hours.
Download the full source code and show me what you did.
They can be easily customized to meet the unique requirements of your project.

























This post has 6 comments
Create a Flash game like Deflection - part 2 : Emanuele Feronato - italian geek and PROgrammer
[...] Multipart tutorial: available parts 1, 2, 3 [...]
Create a Flash game like Deflection : Emanuele Feronato - italian geek and PROgrammer
[...] Multipart tutorial: available parts 1, 2, 3 [...]
Niall Lavigne
Awesome, you got the tutorial finished.
I can’t wait to see the creations people come up with with this! (:
Questo
It wasn’t so much of a bug as it was me doing what I wasn’t supposed to do. But wow you fixed it!
RanDum
Awsome, you amaze me again.
I am making a game similar to stick cs, but with the ability to choose from a pool of pre-unlocked weapons before gameplay and I’m having trouble with the action script on saving progress and unlocks.
can you help?
Rolpege
It has a bug. Sometimes, the ball freezes.