Create a Flash Racing Game Tutorial

May 15, 2007 by Emanuele Feronato
Filed Under Flash, Users contributions • 124 Comments 

In this tutorial we'll cover the creation of a flash racing game.

I got the permission from Remus C. from gameSheep to publish this awesome tutorial.

Before we start, I recommend you all to give a look at gameSheep. You will find a lot of games with cute graphics.

Moreover, this tutorial will give the start to another series of tutorials about creating a flash racing game.

Let's start!

Moving the car

1. Car movement is not the most difficult part of a racing game, but if you want to simulate realistic (almost realistic) movement you have to take in consideration some of the aspects described below.

2. Download and open racing_part1_step1.fla file.

3. Click on the first frame (the only frame) of the "defs" layer and press F9 to display the Actions Window for this frame. Now let's see what these variables do:

PLAIN TEXT
ACTIONSCRIPT:
  1. car1.code = "player";
  2. //this variable will decide if the specified car is controlled by a human player or by the computer (in Part II of this tutorial you will learn how to add opponents and this variable will come in handy)
  3. acceleration = 0.4;
  4. //the acceleration variable will add to the speed variable on every enterFrame event (in this case 24 times per second); a higher value translates in a faster acceleration of the car
  5. speedDecay = 0.96;
  6. //when the car is not accelerated (the UP Key is released), the car will have to slow down smoothly; the speed will multiply with this value (less than 1); the lower this value is, the faster the car will slow down
  7. rotationStep = 10;
  8. //this is the number of degrees that will increase or decrease the car's rotation (angle) when the left or right keys are pressed
  9. maxSpeed = 10;
  10. //this is the speed limit on our track; increase it if you want the car to go faster
  11. backSpeed = 1;
  12. //this is the speed limit when going backwards

4. OK! Now let's get back to school :) and see what we can do with these variables.

Click on the first frame of the second layer ("actions") and if the Actions windows is not open, press F9 to display it.

We will discuss this script in a few moments, but first let's see how Flash "understands" movement and coordinates.

Just a bit of trigonometry and Flash

Flash is using the classic Cartesian Coordinate System (a grid based system with a horizontal axis OX and a vertical axis OY).

vertical

You notice in the attached picture that in Flash the Y axis is inverted meaning that the negative side of the Y axis is positioned higher than the positive side. So the lower a coordinate is, the higher it's value will be.

Because Flash understand only horizontal and vertical vectors we will have to calculate the horizontal and the vertical components of the actual "speed".

So, from trigonometry we know (in this case) that:

sin(angle) = speedx/speed and

cos(angle) = speedy/speed

so... we know the angle (angle=car._rotation) and we know the speed. That's all we need know. Is it? No. You need to know one more thing:

The Math class implemented in Macromedia Flash does not work with angles measured in degrees. Instead we will have to provide angles measured in radians (an alternative unit measurement for angles).

The only case in which you will use degrees is when actually rotating the movieclips.

Using the simple equation below you will be able to transform degrees into radians:

angle_radians = angle_degrees * (PI/180)

Now we can easily calculate the X and Y components of the car's speed:

speedx = Math.sin(_rotation*(Math.PI/180))*speed;
speedy = Math.cos(_rotation*(Math.PI/180))*speed*-1;

Well, you already figured out why the sign of the Y component has to be inverted ;)

And now let's get back to Flash and our Actions Window. Next I will explain what the "step" function is all about. The "step" function will be executed on every enterFrame event (on the "stepper" layer you will find an empty movieclip the executes the onClipEvent (enterFrame) routine).

PLAIN TEXT
ACTIONSCRIPT:
  1. function step(who) {
  2.     //check to see if the car in question is controlled by the player or by the computer
  3.     if (_root["car"+who].code == "player") {
  4.         //we will constantly decrease speed by multiplying it with a number below 1, but only if speed if higher than 0.3; a lower value will only consume resources and movement will not even be noticed so we will set the speed variable to 0
  5.         if (this["speed"+who]>0.3) {
  6.             this["speed"+who] *= _root.speedDecay;
  7.         } else {
  8.             this["speed"+who] = 0;
  9.         }
  10.         //the car will react to certain key presses that we will capture using the Key.isDown method as follows
  11.         //accelerate - we add a certain value to the speed variable if the UP key is pressed and the speed is lower than it's maximum alowed value
  12.         if (Key.isDown(Key.UP) && this["speed"+who]<_root.maxSpeed) {
  13.             this["speed"+who] += _root.acceleration;
  14.         }
  15.         //brake (reverse) - same thing, but here we subtract
  16.         if (Key.isDown(Key.DOWN)) {
  17.             this["speed"+who] -= _root.backSpeed;
  18.         }
  19.         //steer left - well, we could simply add or subtract a fixed angle (in degrees) to/from the car's rotation, but that's not good enough. In order to simulate a natural movement, steering must depend on speed, otherwise you will be able to rotate your car even if it's almost stopped and it will look like a propeller :)
  20.         if (Key.isDown(Key.LEFT) && this["speed"+who]>0.3) {
  21.             _root["car"+who]._rotation -= _root.rotationStep*(this["speed"+who]/_root.maxSpeed);
  22.         }
  23.         //steer right - you already know what happens here
  24.         if (Key.isDown(Key.RIGHT) && this["speed"+who]>0.3) {
  25.             _root["car"+who]._rotation += _root.rotationStep*(this["speed"+who]/_root.maxSpeed);
  26.         }
  27.         this["rotation"+who] = _root["car"+who]._rotation;
  28.         //we calculate the two components of speed (X axis and Y axis) - we have already discussed this part of the function above
  29.         this["speedx"+who] = Math.sin(this["rotation"+who]*(Math.PI/180))*this["speed"+who];
  30.         this["speedy"+who] = Math.cos(this["rotation"+who]*(Math.PI/180))*this["speed"+who]*-1;
  31.         //apply the components on the actual position of the car - we add the X component of the speed to the X coordinate of the car and the Y component of the speed to the Y coordinate
  32.         _root["car"+who]._x += this["speedx"+who];
  33.         _root["car"+who]._y += this["speedy"+who];
  34.         //position the shadow of the car - when the car steers, we want the shadow to keep it X and Y coordinates and always stay on one side of the car (whatever side that would be)
  35.         _root["shadow"+who]._x = _root["car"+who]._x-4;
  36.         _root["shadow"+who]._y = _root["car"+who]._y+2;
  37.         _root["shadow"+who]._rotation = _root["car"+who]._rotation;
  38.     }
  39.     if (_root["car"+who].code == "computer") {
  40.         //in our next tutorial "Racing Game Part II" we will add opponents to make the game more dynamic and interactive
  41.     }
  42. }

That's it! We already have a moving car. Now we can move on to collisions.

Collisions

1. We all know why collisions are important in a Racing Game... Because we don't want the car to leave the track, because we want to force the player to use a specific way, because we want him/her to avoid collisions in order to get the best time (or win the race).

Collisions are a very important part of a racing game and 70% of the game feeling and success depends on good collisions.

We don't want the car to get stuck in the non accessible areas (NAA), we don't want it to lose all speed although it hardly touches those areas and we definitely don't want it to bounce back (by reversing the speed).

In other words we don't want to give the player a hard time, but on the contrary, an enjoyable game. So when the car touches the NAA we must try to correct it's trajectory and of course apply a speed penalty depending on the angle of collision and collision duration.

2. Download and open the racing_part1_step2.fla file.

3. Before we go back to the "step" function, I will explain how the collisions will work.

Using four points to detect collisions

As you can see in the attached picture, we will pick four points, one on every side of the car and check to see if any of them "touches" the NAA.

Collision

For example if the Left Side Point is inside the NAA (hits the NAA) then we will have to apply a speed penalty and increase the angle (_rotation) of the car. Why do we do that? Because of what we discussed earlier: we must try to correct the car's trajectory. So what we do here is force the car to steer right.

OK, I guess everything is clear up to this point. And since we are speaking of points, let's see how we calculate their coordinates. To simplify things we will take the Left Side Point as an example.

When the car's rotation is 0 our job is very simple: the LSP coordinates are x=car._x-20 (20 pixels to the left of the car's center point) and y=car._y

But the car will not always have an angle of 0. Well, here comes the tricky part. There are a few ways to calculate the four points even if the angle is not 0 (for example you can use the sine and the cosine functions) and for this tutorial I chose the simple way (I don't know if it's the optimum way, but it's very simple):

We define the Left Side Point as if the car's rotation was 0:

car.pointLeft = {x:-20, y:0}; //this is an Object

and then we transform the point's coordinated from local (related to the car's clip) to global (related to the _root clip where we will test the collisions):

car.localToGlobal(car.pointLeft);

Now we have our Left Side Point coordinates that we can use to check the collision:

car.pointLeft.x and car.pointLeft.y

Can it get any simpler? :)

4. And again back to our Actions Window. Click on the first frame of the "actions" layer and if the Actions Window is not open press F9 to display it.

You will notice that I added a few lines to the "step" function and you probably already know what those lines do :) but still I will go into a few details.

PLAIN TEXT
ACTIONSCRIPT:
  1. //the collisions
  2. //define the four collision points
  3. _root["car"+who].pointLeft = {x:-20, y:0};
  4. _root["car"+who].localToGlobal(_root["car"+who].pointLeft);
  5. _root["car"+who].pointRight = {x:20, y:0};
  6. _root["car"+who].localToGlobal(_root["car"+who].pointRight);
  7. _root["car"+who].pointFront = {x:0, y:-25};
  8. _root["car"+who].localToGlobal(_root["car"+who].pointFront);
  9. _root["car"+who].pointBack = {x:0, y:25};
  10. _root["car"+who].localToGlobal(_root["car"+who].pointBack);
  11. //let's use some shorter variable names :) - this is just for better understanding and to simplify the code
  12. this["lpx"+who] = _root["car"+who].pointLeft.x;
  13. this["lpy"+who] = _root["car"+who].pointLeft.y;
  14. this["rpx"+who] = _root["car"+who].pointRight.x;
  15. this["rpy"+who] = _root["car"+who].pointRight.y;
  16. this["fpx"+who] = _root["car"+who].pointFront.x;
  17. this["fpy"+who] = _root["car"+who].pointFront.y;
  18. this["bpx"+who] = _root["car"+who].pointBack.x;
  19. this["bpy"+who] = _root["car"+who].pointBack.y;
  20. //check for collisions - we check the collisions using the Flash built in hitTest method. This methods can be used to compare the x and y coordinates to the shape or bounding box of the specified instance (in our case _root.terrain), according to the shape flag (the third parameter: true-shape / false - bounding box) setting or to check if the bounding boxes of the target and the specified instance overlap. We use the first one.
  21. if (_root.terrain.hitTest(this["lpx"+who], this["lpy"+who], true)) {
  22.     //steer right
  23.     _root["car"+who]._rotation += 5;
  24.     //speed penalty
  25.     this["speed"+who] *= 0.85;
  26. }
  27. if (_root.terrain.hitTest(this["rpx"+who], this["rpy"+who], true)) {
  28.     //steer left
  29.     _root["car"+who]._rotation -= 5;
  30.     //speed penalty
  31.     this["speed"+who] *= 0.85;
  32. }
  33. if (_root.terrain.hitTest(this["fpx"+who], this["fpy"+who], true)) {
  34.     //stop the car
  35.     this["speed"+who] = -1;
  36. }
  37. if (_root.terrain.hitTest(this["bpx"+who], this["bpy"+who], true)) {
  38.     //stop the car
  39.     this["speed"+who] = 1;
  40. }

Hard? Not so hard :) And the next two steps are even simpler.

Where are we running?

1. Up to now we have a 100% functional game engine but no game. We don't have a goal. So we'll have to add one and because this tutorial is about a time trial racing game we will add laps and timers.

2. Download and open the racing_part1_step3.fla file.

3. You notice that I added two frames on every layer and I labeled them "ready set", "go" and "finish". In the first frame a movie clip will play saying "ready, set, go". When "go" is displayed _root will move to the frame labeled "go" where the car can move.

Why the car will not move in the first frame? Well, that's because the "stepper" movieClip only exists in the second frame, so that's where the "step" function will be executed.

On the second frame of the "actions" layer you will also find two new variables. Those variables will be used to store the exact time when the race started (initialTime|) and the exact time when the current lap started (lapTime).

When the game is over, after the player finishes ten laps, _root will move to the "finish" frame where an information movieClip will be displayed.

4. OK! What we need to do next is determine whether the player has finished a lap or not, so we will add two movieClip (the red line on the right side) and check if the car "touched" this movieClip, and if it did, than you know that a lap is finished... hmm... not really :)

First of all the car will "touch" this movieClip for more than one frame. Maybe for two, maybe for ten, maybe for one hundred frames, you cannot determine this number because it depends on the car's speed. And instead of increasing the number of laps with one, you will increase it with two, ten or one hundred laps, so the race will be ready quite fast.

The second problem, assuming that you solved the first one is that one player will go past the finish line (the red line on the right) and then return immediately to the same line and "touch" it again, increasing the number of laps even though the lap is not completed. This problem can be solved in a few ways but we will chose the solution that fixes both our problems: we will add a checkpoint (the red line to the left). This checkpoint will be placed somewhere around the middle of the race so that the player will lose more time returning to the finish line than he will lose by completing the lap. Of course if you want a more secured race you will add more than one checkpoint. You will be able to easily add more checkpoints after finishing this tutorial.

5. Open the actions window for the first frame of the "actions" layer. We have to new functions both related to timing the race - setTimes (calculates and sets the total race time) and setBestLap (calculates and sets the best lap time). We'll take them one at a time and see what they do.

PLAIN TEXT
ACTIONSCRIPT:
  1. function setTimes() {
  2.     //we calculate the time elapsed from the moment the race started in millisecond
  3.     timeElapsed = getTimer()-_root.initialTime;
  4.     //we calculate the minutes, seconds and tens of seconds and set them to their respective variables
  5.     milliseconds = timeElapsed;
  6.     seconds = Math.floor(milliseconds/1000);
  7.     minutes = Math.floor(seconds/60);
  8.     minutesTXT = minutes;
  9.     secondsTXT = seconds-minutes*60;
  10.     tensTXT = Math.round((milliseconds-seconds*1000)/10);
  11.     //if the minutes, seconds or the tens of seconds number has only one character we add a "0" before it - that's just because we want the time to look good ;)
  12.     if (minutesTXT<10) {
  13.         minutesTXT = "0"+minutesTXT;
  14.     }
  15.     if (secondsTXT<10) {
  16.         secondsTXT = "0"+secondsTXT;
  17.     }
  18.     if (tensTXT<10) {
  19.         tensTXT = "0"+tensTXT;
  20.     }
  21.     //we put all three variables in one that will be used in the timers tables
  22.     _root.totalTimeTXT = minutesTXT+"."+secondsTXT+"."+tensTXT;
  23. }
  24. //and the second function
  25. function setBestLap() {
  26.     //this function does the exact same thing as the first one, only here we will use the time elapsed from the last time the car has passed the finish line
  27.     bestTime = getTimer()-_root.lapTime;
  28.     milliseconds = bestTime;
  29.     //we don't calculate the lap time if the car passes the finish/start line for the first time
  30.     if (oldMilliseconds>milliseconds || oldMilliseconds == null) {
  31.         oldMilliseconds = milliseconds;
  32.         seconds = Math.floor(milliseconds/1000);
  33.         minutes = Math.floor(seconds/60);
  34.         minutesTXT = minutes;
  35.         secondsTXT = seconds-minutes*60;
  36.         tensTXT = Math.round((milliseconds-seconds*1000)/10);
  37.         if (minutesTXT<10) {
  38.             minutesTXT = "0"+minutesTXT;
  39.         }
  40.         if (secondsTXT<10) {
  41.             secondsTXT = "0"+secondsTXT;
  42.         }
  43.         if (tensTXT<10) {
  44.             tensTXT = "0"+tensTXT;
  45.         }
  46.         _root.bestLapTXT = minutesTXT+"."+secondsTXT+"."+tensTXT;
  47.     }
  48.     //we set the initial time to the moment the car passed the finish line
  49.     _root.lapTime = getTimer();
  50. }

6. And now one more time (I promise this is the last time) back to the "step" function and let's analyze the new lines.

PLAIN TEXT
ACTIONSCRIPT:
  1. //checkpoints
  2. //we check to see if the car "touches" the current checkpoint (the current checkpoint, in this case, can be checkpoint1 or checkpoint2 because we only have two checkpoints; checkpoint1 is the start/finish line)
  3. if (_root["car"+who].hitTest(_root["checkpoint"+_root["currentCheckpoint"+who]])) {
  4.     //if the current checkpoint is the start line - increase the lap number
  5.     if (_root["currentCheckpoint"+who] == 1) {
  6.         //if the current lap is not 0 we check if this is the best lap
  7.         if (_root["currentLap"+who] != 0) {
  8.             _root.setBestLap();
  9.         }
  10.         //if this is the final lap, _root will move to the "finish" frame
  11.         if (_root["currentLap"+who] == _root.totalLaps) {
  12.             _root.gotoAndStop("finish");
  13.         } else {
  14.             _root["currentLap"+who]++;
  15.         }
  16.         _root.currentLapTXT = _root["currentLap"+who]+"/10";
  17.     }
  18.     //we set to checkpoint to be checked to the next checkpoint
  19.     _root["currentCheckpoint"+who]++;
  20.     //if the current checkpoint is the last checkpoint - set the next checkpoint to the start line
  21.     if (_root["currentCheckpoint"+who]>_root.checkpoints) {
  22.         _root["currentCheckpoint"+who] = 1;
  23.     }
  24. }

7. That's it :) Now let's move on to the final graphic touches and see our completed game.

Finishing the game

1. The final graphic touches... Well, there's nothing to explain here. You can express yourself in anyway and create graphics after your own taste.

Just remember to set the alpha of the green movie clip and the red movie clips to 0.

2. This is racing_part1_step4.fla file provided with this tutorial. Download it!

3. Remember that this is just a tutorial. You must work on it in order to build a really addicting game. In the next tutorial we will add opponents in the game. Until then, have fun building your Time Trial Racing Game ;)

And by the way my best lap time is 9.84 :D

And here ends Remus tutorial. I learned a lot from this tut and I will use it to improve the gameplay with some additions.

Meanwhile, give feedback to Remus and try to beat that n00b laptime!!

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (104 votes, average: 4.8 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.

124 Responses to “Create a Flash Racing Game Tutorial”

  1. Elmer on May 15th, 2007 6:49 pm

    Nice tutorial man ;)

  2. Elmer on May 15th, 2007 6:50 pm

    And by the way ;) my best lap is 9;72 :P:P

  3. N00b on May 15th, 2007 9:07 pm

    Awesome!
    I really appreciate the work hat goes into these tutorials, and they have definitely helped my development (seeong as I am a n00b).
    I’m currently working on a game like Madness Interactive, and I’ just making the firing character move!
    Much thanks,
    ^^

  4. Michael on May 16th, 2007 3:48 am

    Wow, awesome!
    I just love your tutorials, and hosting tutorials of others is just as cool. This tutorial definitely helps for when I will finally have time to pursue Flash!

    Love the end result, and just a quick run without even trying I got 9.90 for my best lap.

  5. gnark on May 16th, 2007 4:23 pm

    Definitly a nice tute.. But to all of the above commenters..
    This is an exact copy of a gameSheep tutorial.. All credits go to them..

  6. N00b on May 16th, 2007 6:05 pm

    Whoah! I just got 9.57!

  7. N00b on May 16th, 2007 6:07 pm

    9.33…

  8. N00b on May 16th, 2007 6:09 pm

    9.09 ^^

  9. Emanuele Feronato on May 16th, 2007 6:19 pm

    hmmm maybe Remus should play a bit more to his games… ;-)

  10. Christian on May 16th, 2007 6:47 pm

    omg…9;51 but it was like my 20th lap :[

  11. mango on May 16th, 2007 7:58 pm

    8.51 =|

  12. sam on May 16th, 2007 8:21 pm

    8.17 :)

  13. abhilash on May 17th, 2007 5:59 am

    cool tut
    but I already have this tutorial and my best time is 7.52

  14. abhilash on May 17th, 2007 6:02 am

    I am the winner with 7.52 laptime!!!

  15. Monkios on May 17th, 2007 4:37 pm

    I know this is only a tutorial and there are bugs wich you did not solve but if a player goes in a wall in a 90 degrees angle, he’ll enter it slowly and be pushed ouside of the race.

  16. Ozper on May 18th, 2007 4:09 am

    Where I add code for car

  17. mousey on May 19th, 2007 4:52 pm

    amazing :p

  18. Dave on May 21st, 2007 8:26 am

    Wow, nice tutorial.

    One thing, if you were to turn this into a real game, how would you address people going reverse on the track (crossing both check points still applies, but in reverse)?

    (I know you mentioned a part II, so if you address it there sorry :/ )

  19. Robin on May 21st, 2007 11:32 am

    09:03 :)

  20. Gagan on May 22nd, 2007 9:04 am

    Please help! I can’t open any of the file with Flash Mx. Why? The error showed was “Unexpected File Format”.
    RSVP

  21. Sneddon on May 22nd, 2007 11:13 am

    MY Best Time Was 9:32

  22. Cecil on May 22nd, 2007 3:23 pm

    9:76
    nice tutorial

  23. Cecil on May 22nd, 2007 3:26 pm

    I was wondering, whats the action script you would put on the car if you also wanted it to go to next frame when it hits something.

  24. Fraanske on May 23rd, 2007 9:31 pm

    Since FOREVER I wanted to create my own games, and with your excellent tutorials I am finally beginning to understand certain mathematics (a grade I suck at) Flash uses. Your code is very clear and by simple reading, even without the FLA’s, you made me understand so much more. Can’t wait to create games for http://www.hq40k.com! Thanx!

  25. Callum on May 25th, 2007 8:55 pm

    W00p OMFGZORZWTH!11 :D 9:07 BEAT THAT :D

  26. And Mar on May 25th, 2007 11:13 pm

    Great tute! (even if its not yours)

    To Cecil

    to make the car go to the next frame add code like this

    if (car.hitTest(terrain)){
    car.gotoAndStop(2);
    }

  27. Gagan on May 28th, 2007 9:41 am

    Help! Can anyone provide me the same tutorial file compatible with flash Mx( not ver 2004). I couldn’t open the file given here as it says “Unexpected file format”.

  28. Orlando on June 5th, 2007 5:17 am

    Nice tutorial!! This is what I was looking for, specially because I starting with flash, specifically with Flash 9.
    After to check it and convert it to AS3, I could not find a way to predict a collision using localToGlobal method, which is very easy, So, I followed your advice to use trigonometry, and this what I got:

    function newPos(point:String,x0:Number,y0:Number,sign:Number):void{
    var hypotenuse:Number = Math.sqrt( Math.pow(x0,2) Math.pow(y0,2));
    var angle:Number = Math.PI-(this.car1.rotation*Math.PI/180)- Math.acos(sign*x0/hypotenuse);
    this[point].x = this.car1.x – sign*hypotenuse * Math.cos(angle);
    this[point].y = this.car1.y sign*hypotenuse * Math.sin(angle);
    }
    newPos (”ref1″,-15,-20,-1);
    newPos (”ref2″,15,-20,-1);
    newPos (”ref3″,15,20,1);
    newPos (”ref4″,-15,20,1);

    where ref 1,2,3, and 4 are a circle movieClips I am using to see if positions are correct. In my case, I am putting four points in the corners of the car.

    I hope it can be useful for someone else.

    I forgot, just change car.x for car.x xSpeed and car.y for car.y ySpeed and you can check if there will be a collision.

  29. Orlando on June 5th, 2007 6:35 am

    This is the same code but with little changes

    function newPos(point:Point,carRot:Number,sign:Number){
    var hypotenuse:Number = Math.sqrt( Math.pow(point.x,2) Math.pow(point.y,2));
    var angle:Number = Math.PI-(carRot*Math.PI/180)- Math.acos(sign*point.x/hypotenuse);
    point.x = -sign*hypotenuse * Math.cos(angle);
    point.y = sign*hypotenuse * Math.sin(angle);
    }
    var newPoint:Point = new Point(-15,-20);
    newPos (newPoint,myRot,-1);
    newPoint.x = myCar.x;
    newPoint.y = myCar.y;
    myCar.point1 = newPoint;
    ref1.x = newPoint.x;
    ref1.y = newPoint.y;

    newPoint = new Point(15,-20);
    newPos (newPoint,myRot,-1);
    newPoint.x = myCar.x;
    newPoint.y = myCar.y;
    myCar.point2 = newPoint;
    ref2.x = newPoint.x;
    ref2.y = newPoint.y;

    newPoint = new Point(15,20);
    newPos (newPoint,myRot,1);
    newPoint.x = myCar.x;
    newPoint.y = myCar.y;
    myCar.point3 = newPoint;
    ref3.x = newPoint.x;
    ref3.y = newPoint.y;

    newPoint = new Point(-15,20);
    newPos (newPoint,myRot,1);
    newPoint.x = myCar.x;
    newPoint.y = myCar.y;
    myCar.point4 = newPoint;
    ref4.x = newPoint.x;
    ref4.y = newPoint.y;

    Remember ref 1,2,3, and 4 are just to see the collision points.

  30. thilak,india on June 7th, 2007 10:24 pm

    very nice tutorial friend
    its really very helpful and very interesting

    thank you thank you very much

  31. Mike on June 10th, 2007 7:54 pm

    7:43 :)

  32. cortina on June 12th, 2007 3:27 am

    nice tutorial , thanks
    8.87 n_n

  33. tonius on June 20th, 2007 9:44 am

    hi, this is a wonderful tutorial, however, I am really a beginner exploring actionscripts, could anyone advise me what IDE/compiler do I need to develop a flash game/program or do I need to purchase macromedia flash to do this?

    Thanks!!!

    tonius

  34. Frederik J on June 20th, 2007 2:23 pm

    Hi tonius. Yes, you need macromedia flash. I’m not sure about it, but i think that there excists programs to write actionscript. But as i said, im not sure about it. Anyway, you can du it with macromedia flash :)

  35. Dan on June 28th, 2007 5:29 am

    9:36

  36. esteban on July 8th, 2007 2:11 am

    1.02

    there is a secret passage :O

  37. Drew on July 20th, 2007 11:30 am

    i started using action script last week and started making games etc, i used to be a keen programer in ‘basic’ (well dated now lol) i found your site very very usefull to learn new code and put it into practice. i keep stumbling accross really difficult math problems then i look on your site and realise that the 30 lines of code i have written, can be swapped for 1 line of correct code lol. thanks

    if you have time take a look at my first game, there are glitches i know about lol, but its my first one. http://www.geocities.com/ardscore

  38. David on August 18th, 2007 2:44 pm

    Brilliant, but how can you change the amount of steer depending on the amount of time that the player has kept down the left /right keys

  39. ??? on August 27th, 2007 7:46 am

    nice tutorial, but i had a question. i have an older version of flash and whenever i try to download the files it always says, “unexpected file type.” does anyone know how to see it or anything, cause it doesnt really work without it. nice tutorial though!

  40. ??? on August 28th, 2007 1:18 am

    oh yeah, and also i am trying to make a game where you are constantly going but when you click the person turns. im not sure how and any help would be great. or, you could make a tutorial on it. here is my inspiration:

    http://www.gtds.net/Hamster/

    its a fairly simple game, but i would still love to know how to make it. thanks!

  41. computergeek67 on September 3rd, 2007 9:50 pm

    Someone actually stole this game. They only changed on thing.
    http://www.newgrounds.com/portal/view/397860
    and the second version that the guy made:
    http://www.newgrounds.com/portal/view/398157

  42. RockStar on September 29th, 2007 3:19 am

    The tutorial is awesome but does anyone know how I create a duplicate car & give the PC controlls to it so instead of a time trail its a vs PC game?

  43. Anthony on November 12th, 2007 1:24 pm

    A great tute, thanks!

    I’ve been trying for the past three days to add a new hit test object.

    For example: A barrel and when you hit it, it plays a movieclip or sound.

    I’ve tried something similar to

    if (car.hitTest(barrel)){
    car.gotoAndStop(2);

    And created a clip and instance called barrel but it’s not working.

    Please help, it’s driving me crazy (pun intended)

    Thanks
    }

  44. Randomguy on December 7th, 2007 8:52 am

    Hi
    Can you try to add nos for the next tutorial?
    Im trying to make and underground racing game.
    thanks.

  45. Rosy on December 13th, 2007 10:02 pm

    hey nice tuterials….
    but i can’t open the download files on flash mx and i don’t know why ???

  46. connz on December 30th, 2007 6:17 pm

    8.16 ;)

  47. shivesh on February 4th, 2008 5:16 pm

    Hey I am 5.67.

  48. Owais on March 8th, 2008 6:27 pm

    HI…….It’s fantastic….
    I really enjoyed…
    & this is also very good tutorial.. for students or any other person.
    i am really thankful to the peron..
    who make this coding..
    I want these types codings & tutorial..
    plz send me more tutorial or scriptings on my ID..which is
    Beautythief1@yahoo.com..
    plz peoples join me..
    & communicate about these types of softwares…
    thanks. Fantasticccc…….!

  49. Owais on March 8th, 2008 6:36 pm

    HI… friends…
    I wil tel u..
    IDE means (Integrated development Enviroment)
    which we used in C++, fortron language…
    IDE can be say as.. that it is a working place where we write the scripts…
    C++ (blue screen) are also called IDE.

    and remaining… Compiler..
    it’s use for tranlation..
    compliler.. is a translator.
    can translate the program… machine language to human language…

    A common example of compiler is…
    If a person knows Arabic.. and another person knowz English…
    So here we use the compiler as a person..
    that knowz both language Arabic and English.

    and make conversion easy..
    so friend.. it’s ur question reply.
    i hope u will.. understand these topics now..thanks.. if u want contact so..my ID is
    Beautythief1@yahoo.com.
    ome online from 6:30pm to 9:00pm regularly..tc..have fun.

  50. Owais on March 8th, 2008 6:51 pm

    Hello….Sir,
    If i want a openent player..
    or a computer handed player..
    So what i use or what I add in this scriting?

    Ig someone have any answer of my Question..
    So plz send me scripting on.. My Id which is..
    Beautythief1@yahoo.com.. thanks
    i will be waiting for kind response.

  51. RANDOM PERSON on March 27th, 2008 12:25 pm

    YAY!!! I got 1.44 for one lap!!!

  52. Gregory Athons on May 28th, 2008 1:07 am

    WHEN WILL PART 2 COME OUT! This tutorial came out over a year ago!!! How much longer will we have to wait before we know how to use computer AI in this tut!

  53. nick on June 2nd, 2008 6:34 pm

    How come whenever i try to download you files and open them in flash mx it says unexcepted file? Please Answer.

  54. Graham on June 8th, 2008 2:42 pm

    I agree with Gregory!! I want to see some AI!

  55. bijoy on July 22nd, 2008 4:26 am

    sir this game very nice and good.pls tell me how to build AI for this game.

  56. me =] on July 28th, 2008 10:29 am

    5/5, I actually also think AI is a fairly important subject to cover.

  57. zak on August 2nd, 2008 1:25 am

    yh its all good and well but what software do u use to make it on

  58. cman4321 on August 4th, 2008 8:56 pm

    My best lap is 9.14. Also, I love your tutorials.

  59. tutorialkirby on August 20th, 2008 11:27 pm

    hey emmanuelle.i like the result of this tutorial but my flash cant load the file cuz its not the right format.i would be nice if you could make the same tutorial but beggining at the really start.and when will we know how to add ai to our games.im making one and poeple dont like it becuz theres no cpu.please help me.

    http://www.newgrounds.com/portal/view/455996

  60. Van meerhaeghe on October 15th, 2008 2:55 pm

    hello everyone !

    I’m trying to make a racing game with your example, i have the solution for an Ai but i can’t :

    - skid the car in a turning point
    - know in live what is the place of the car (1st, second, etc.)
    - have a realistic collision with other cars…..

    You can find the begin of my job here :
    http://www.benz.be/forum/racing/course3.php

    If someone can help me !

    Manu (sorry for my bad english)

  61. sam on November 3rd, 2008 3:04 am

    having trouble with the “PLAY AGIAN” button can you help me thanks copper

  62. b2k on November 18th, 2008 4:53 pm

    Saved my Day :D
    Thanks man!

  63. sathoro on December 1st, 2008 5:36 am

    7.34 :)

  64. MaRgA on December 5th, 2008 6:41 pm

    nice one it heplped me a lot!!! :D

  65. MaRgA on December 5th, 2008 6:43 pm

    This is great, i was wondering how to add more maps to select to play…

  66. jus on December 9th, 2008 5:32 am

    cool! I wish you could make a tutorial on how to make racing games where the backround rotates instead of the car…

  67. theblues on December 11th, 2008 6:54 am

    my mannnnn… ouhh, greatt.. cool man. thanks for this tutorial.. I take it home okay.. :)

  68. George on December 17th, 2008 2:16 pm

    best 9:27 wicked game used tutorilal to make wicked game go to http://mostplays.com/play/Super_Racer_30989

  69. liam on December 18th, 2008 3:28 pm

    can someone email me some script i can use for cars because i cant copy this one.

  70. Kiwi on December 23rd, 2008 10:45 pm

    7.30 :P

  71. Eskalibur on December 29th, 2008 11:52 am

    Thanks very much. I can’t say more. You’re AWESOME!

  72. Anthony on December 30th, 2008 4:53 am

    My best lap was 7.17
    Thanks for this tutorial.. although I am a noob and only get some of it… I just need to learn the ariables and how to code haha.

  73. d on January 2nd, 2009 11:22 pm

    great tutorial .. & hehe i guess i take the gold , best lap so far: 6.26

  74. eichwulf on January 4th, 2009 1:12 pm

    This is great, I used it to make my own racing game. I deleted a lot of code – especially about collision with the ground – it’s not correct, I just wrote to slow you down when you are on the ground.

  75. Verena on January 10th, 2009 5:41 pm

    Hey…
    this is a really nice tutorial.

    Well, i need a version in AS3. Is there somebody, who can help me or is there sombody, who rewrite the program already?

    It would be very nice!!

    Thanks,
    Verena

  76. Verena on January 10th, 2009 5:49 pm

    sorry, I forgot to place my adress for sending results :)
    haase.verena@googlemail.com

  77. Yokohama on January 16th, 2009 5:59 pm

    i got 8.91 second RECORD!!!!

  78. Umer on January 24th, 2009 11:20 pm

    It Was Just what i was looking for, i love it. But there are some loop holes which can be fixed once you get off from computer and think about it, You know when you sit on computer there are too many distractions, right? Anyway nice new site’s layout. Congrulation,

    Please Make New Site address instead of http://www.emanueleferonato.com, it’s hard to remember and your site is even harder to be searched it just doesn’t showup in search list. So have another domain name Like Geektutorials.com or something like that SInce you are always bragging about it so i figured that would suit your site, huh.

  79. Julian on January 26th, 2009 4:49 am

    This is great and all but i want to make my own racing game not somebosy else’s.

  80. ArcadePark.net on February 7th, 2009 12:54 am

    Ha 8.70 Beat you all!

    Proof:

    http://img14.imageshack.us/img14/6329/77650639gx9.png

    On another note, Can I make this game then put my sponsor page infront of it and distribute it?

  81. jay on February 8th, 2009 5:59 pm

    7.10 secs. *SNAP*

  82. fredz on February 22nd, 2009 5:23 pm

    nice i like it!

  83. Bonehead23 on February 24th, 2009 7:59 pm

    I really like this, its help me understand AS2 so much more. I am trying to work on additional elements to this game like places were you can speed up faster then the max speed and other things like going smaller and larger and so on. Could you guys help me with this??

  84. Kingz on February 28th, 2009 9:57 pm

    7.47 :P

  85. grelek on March 3rd, 2009 6:32 am

    hey Verena are you still looking for a AS3 version?
    i started making a racing game using this tutorial, but i’ve since added oppenents and gears and a vertical panning course.
    its more like a drag racing game at the moment, but i’ll add in some corners later on :P

    regards,
    Grelek

  86. jayr on March 11th, 2009 6:23 pm

    hey..tnx for your tutorial 8 helps a lot..

  87. pepens on April 5th, 2009 4:34 am

    can you make it drifting ? coz i want to make a drifting flash game. thx for your tutorial. :D

  88. as3 version on April 5th, 2009 8:27 pm

    how about a as3 version. i tried to make one on my own with limited success. what is getting passed with “who”? there’s no variable called it and .code i don’t think applies to as3 either.

  89. Henk on April 8th, 2009 12:12 pm

    Hi, nice game only i can’t download de 4th file
    can someone send it to my mail?

    thnks

    my score 8.54

  90. Dennis v Gerwen on April 8th, 2009 1:27 pm

    Hi i can’t download file 4 can someone send it to my mail please
    DennisvGerwen@hotmail.com

    (my score is 8.54) :P

    Thnks

  91. gamenetwork on April 9th, 2009 5:47 pm

    is there any certain reason for not post my messages ?

  92. gamenetwork on April 10th, 2009 6:04 pm

    Artificial Inteligent Code here : gamenetwork.gr

  93. tom on April 14th, 2009 7:49 am

    my best lap was 9.15

  94. person on April 18th, 2009 9:41 pm

    6.87

  95. Joe on April 20th, 2009 11:51 pm

    OH YEAH 7.09 WOOO!

  96. vagina village on April 22nd, 2009 9:09 am

    i got a 6:52 on the game

  97. The B on April 25th, 2009 9:15 pm

    .99 Sec take that!

  98. racerx11080 on April 27th, 2009 11:56 pm

    is there AS3 version of code of this game anywhere????

    please help!!!!

  99. cindy on May 3rd, 2009 1:35 am

    gracias me sirvio muchoooo y aprendi muchooo

  100. Wibble on May 3rd, 2009 7:36 pm

    Would it be possible if you could make an extension for this tutorial that tels us how to add a CPU?

  101. Antony on May 4th, 2009 9:15 am

    My best lap time is 5:98

  102. Billy on May 4th, 2009 6:14 pm

    7.40 ladies and gentlemen beat that

  103. Alex on May 7th, 2009 7:35 am

    Tal vez no entiendan porque hablo español, pero sólo quería aportar que el juego tiene un bug, para que el programador lo tenga en cuenta.
    Si doy la vuelta completa en reversa me la cuenta como una vuelta normal.

    ——————————
    English:

    I’m from Colombia, however i will try to explain in english:

    Only for information to the developer:

    If i drive in reverse one complete lap, it will count too.

  104. dave on May 15th, 2009 1:27 pm

    7:24

  105. kuralotus on May 15th, 2009 8:12 pm

    6.89 bitches

  106. kuralotus on May 15th, 2009 8:12 pm

    6.89 beat that

  107. alex on May 19th, 2009 5:56 pm

    i’m the best. my time is 6.80 seconds

  108. Tom on May 20th, 2009 5:32 am

    How might I modify the game so that you don’t have to continually press the up arrow to maintain forward motion? I’d like to be able to press the up arrow once, have it start moving slowly, then with each successive press, the forward motion would accellerate; same for the slowing down using the down arrow.

    Any help is appreciated.

    Tom

  109. steve on May 22nd, 2009 1:38 am

    I’m interested to know how to add a second player.

  110. Nightrider on May 29th, 2009 10:56 pm

    @Tom: just change this line
    if (Key.isDown(Key.UP) && this["speed"+who]<_root.maxSpeed)

    into this
    if (this["speed"+who]<_root.maxSpeed)

  111. John on June 1st, 2009 3:53 pm

    5:51 secs!

  112. Lars on June 2nd, 2009 11:25 pm

    5:48 secs, try to beat that one!

  113. Mauricio on June 3rd, 2009 6:40 am

    Gracias amigo… Que buen tutorial!

  114. Zsole on June 4th, 2009 12:22 pm

    Thank u!

  115. joe on June 14th, 2009 2:03 am

    8.09

  116. Octavian on June 14th, 2009 4:39 pm

    9.06

  117. Bob on June 16th, 2009 3:38 am

    4:84 beat that. :)

  118. yue on June 23rd, 2009 5:04 pm

    why there’s no link for download, racing part1 step4???
    i cant make my own game,,,huaaa,,,help me,,

  119. Pokenerd on June 23rd, 2009 5:35 pm

    8.95 :D :D

  120. meh on June 23rd, 2009 8:55 pm

    NaN, it glitched

  121. Evan on June 29th, 2009 9:14 am

    Thanks for your tutorial. I really appreciate it! XD.

  122. give it a try on June 29th, 2009 11:09 pm

    wooo!!! 7.56

Leave a Reply




Trackbacks

  1. 35+ Flash Game Development Tutorials & FLA Files | Showcases | PelFusion.com on April 28th, 2009 8:36 am

    [...] 18. Flash Racing Game Tutorial [...]

  2. Flash Tut. » Create A Flash Racing Game on June 28th, 2009 6:47 am

    [...] Read The Tutorial [...]

Posts