Create a Flash Racing Game Tutorial – AS3 version

June 16, 2010 • Actionscript 3, Flash, Game design by Emanuele Feronato • 35 Comments

The porting of the most popular AS2 tutorials continues with a basic AS3 version of the Flash racing game script.

I said “basic” because it does not have all features, this time it covers only movement and collision detection because I want to add more features before polishing it.

In the detail, I am developing an artificial intelligence algorithm to include cars controlled by the computer.

Meanwhile, this is the main class

1
2
3
4
5
6
7
8
9
10
11
12

package {
	import flash.display.Sprite;
	public class racing extends Sprite {
		public var car:car_mc;
		public var ground:ground_mc = new ground_mc();
		public function racing():void {
			car = new car_mc(450,300);
			addChild(ground);
			addChild(car);
		}
	}
}

And this is car_mc class:

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

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.KeyboardEvent;
	import flash.geom.Point;
	public class car_mc extends Sprite {
		public var acceleration:Number=0.4;
		public var speed_decay:Number=0.96;
		public var rotation_step:Number=10;
		public var max_speed:Number=10;
		public var back_speed:Number=1;
		public var speed:Number=0;
		public var accelerate,brake,turn_left,turn_right:Boolean=false;
		public function car_mc(posx:int,posy:int):void {
			x=posx;
			y=posy;
			addEventListener(Event.ADDED_TO_STAGE,init);
		}
		public function init(e:Event):void {
			addEventListener(Event.ENTER_FRAME,on_enter_frame);
			stage.addEventListener(KeyboardEvent.KEY_DOWN,on_key_down);
			stage.addEventListener(KeyboardEvent.KEY_UP,on_key_up);
		}
		public function on_enter_frame(e:Event):void {
			if (accelerate&&speed<max_speed) {
				speed+=acceleration;
			}
			if (brake&&speed>-1) {
				speed-=back_speed;
			}
			var speed_x:Number=Math.sin(rotation*0.0174532925)*speed;
			var speed_y:Number=- Math.cos(rotation*0.0174532925)*speed;
			if (turn_left) {
				rotation -= rotation_step*(speed/max_speed);
			}
			if (turn_right) {
				rotation += rotation_step*(speed/max_speed);
			}
			y+=speed_y;
			x+=speed_x;
			var point_left:Point=new Point(-9,0);
			var point_right:Point=new Point(9,0);
			var point_front:Point=new Point(0,-13);
			var point_back:Point=new Point(0,13);
			point_left=localToGlobal(point_left);
			point_right=localToGlobal(point_right);
			point_front=localToGlobal(point_front);
			point_back=localToGlobal(point_back);
			var par:racing=this.parent as racing;
			if (par.ground.hitTestPoint(point_left.x,point_left.y,true)) {
				rotation+=5;
				speed*=0.85;
			}
			if (par.ground.hitTestPoint(point_right.x,point_right.y,true)) {
				rotation-=5;
				speed*=0.85;
			}
			if (par.ground.hitTestPoint(point_front.x,point_front.y,true)) {
				speed*=0.55;
			}
			if (par.ground.hitTestPoint(point_back.x,point_back.y,true)) {
				speed*=0.55;
			}
			if (Math.abs(speed)>0.3) {
				speed*=speed_decay;
			} else {
				speed=0;
			}
		}
		public function on_key_down(e:KeyboardEvent):void {
			if (e.keyCode==38) {
				accelerate=true;
			}
			if (e.keyCode==40) {
				brake=true;
			}
			if (e.keyCode==37) {
				turn_left=true;
			}
			if (e.keyCode==39) {
				turn_right=true;
			}
		}
		public function on_key_up(e:KeyboardEvent):void {
			if (e.keyCode==38) {
				accelerate=false;
			}
			if (e.keyCode==40) {
				brake=false;
			}
			if (e.keyCode==37) {
				turn_left=false;
			}
			if (e.keyCode==39) {
				turn_right=false;
			}
		}
	}
}

And this is the result

Play with arrow keys, and be prepared to race against CPU

Download the source code.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (43 votes, average: 4.58 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 35 comments

  1. DaveUCSD

    on June 16, 2010 at 11:11 pm

    You could not have posted this at a better time. Yesterday I started converting you last tutorial to AS3 and I was going to work on it all day today and tomorrow. I am using it for a biofeedback application in a neuroscience lab.

    Thank you so much!!!!

  2. DaveUCSD

    on June 16, 2010 at 11:12 pm

    PS. What is your creative commons license for this? Can I use it for non-profit?

  3. Praveen Ojha

    on June 17, 2010 at 8:47 am

    Static car and rotating ground wud give even more better effect like old nes roadfigter .

  4. Alexandre Colella

    on June 18, 2010 at 3:19 am

    I didn’t understand de Points and the par variable…
    :(
    Can you explain? :)

  5. Emanuele Feronato

    on June 18, 2010 at 4:32 pm

    Use it as you please, just remember to buy me a beer should you make billions out of it

  6. Emanuele Feronato

    on June 18, 2010 at 4:33 pm

    It will be the topic of next Flash tutorial

  7. Alexandre Colella

    on June 19, 2010 at 12:47 am

    Ok! Thanks!!!!

  8. Wilson Silva

    on June 19, 2010 at 5:42 pm

    You never disappoint us :) Are you going to make a tutorial like “Create a Flash game like Zelda” or something? I’m pretty sure that most of us want to know how to develop a good RPG game engine. And you my friend, are the best person to teach us :D. Pleeeease.

  9. gino80

    on June 22, 2010 at 12:16 pm

    Emanuele you are great!!
    thank you very much for your tutorials!!

    how can I implement a sort of ghost car??

    thank you keep the good work!!

  10. Create a Flash Racing Game Tutorial – Artificial stupidity - Emanuele Feronato

    on June 23, 2010 at 1:19 pm

    [...] Create a Flash Racing Game Tutorial – AS3 version [...]

  11. Someone

    on July 5, 2010 at 1:56 am

    Hey,
    There’s a bad glitch if you go backwards into the wall… can you please show how to fix it?
    Thanks. =)

  12. Amos

    on July 6, 2010 at 6:54 am

    Im planning on learning flash sometime and its interesting for me to look at this code, just to get a sense of how actionscript works. thanks :)

    Also, i have been using a program called scratch, which basically is for creating some very simple games, with very simple code. Quite a while ago, i made a game similar to this: http://scratch.mit.edu/projects/aonews/289090

    and just fyi, in case any of you where planning on looking at the code, you should know i made it a few years ago, and the code is rather redundant and could be simplified a lot. :)

  13. Amos

    on July 6, 2010 at 6:58 am

    i might also its quite easy to cheat in my game :)

  14. DaveUCSD

    on July 6, 2010 at 10:27 pm

    haha :)

  15. Mina

    on July 31, 2010 at 3:55 am

    if i could ask , iam new in game Dev. iam tring to make a car game , and iam stuck with something maybe u could help me out ………..

    i made a MovieClip car >> inside it AS3.0 code of all its speed accelirationa and stuff .. i didnt use pacage because i dont know much about it … anyway , i made a square on the stage and i was tring to detect the collition by HittestObject and it didnt work , someone gave me a link for a bitmap data and it worked but i dont understand it for sure .. i just replaced names … anyway … right now , i wants to write a function that makes the car Never move over or under that square .. like a wall or a building … i couldnt figure it out , could u help me plz , it sounds like insanly easy ..

  16. sarah

    on August 15, 2010 at 7:52 am

    the ground is the green one right?

  17. sarah

    on August 15, 2010 at 7:55 am

    could you make a tutorial as3 for a car race with no lap and an AI??

  18. Flex4?????? Flex 4 Racing Game,????? | LuFree Blog-??????,?????,?????,webgame??

    on August 26, 2010 at 9:30 am

    [...] AS3??:http://www.emanueleferonato.com/2010/06/16/create-a-flash-racing-game-tutorial-as3-version/ [...]

  19. Marcel

    on September 9, 2010 at 10:08 pm

    I got this error message:

    “Type was not found or was not a compile-time constant: ground_mc
    race.as line 8″

    Seems like should be another class called ground_mc?

    (sorry for my English and newbie question)

  20. anushi

    on September 29, 2010 at 3:00 pm

    please can you tell me to open this fla file. I can not open it. Thank you

  21. Sam

    on January 3, 2011 at 3:00 pm

    Wondered if you have any turoirals on how to add laptimes into the AS3 Verison…

  22. johanson

    on January 27, 2011 at 3:41 pm

    how can you add laps and times for this game?

    sorry i’m very new to flash.

  23. Attila Kamasz

    on April 13, 2011 at 2:51 pm

    Hy all!
    The tutorial is very good, but I dont know how I scripting the drifting and other advanced car psichic. Pls help me. Thanks :)

  24. OA

    on April 14, 2011 at 5:20 pm

    I was messing around trying to add different tracks but the only way is for the track to be erased so how can we change the track without just erasing from the back ground and without the ground_mc

  25. 3D car with a camera that follows it (Adobe Flash Platform Blog)

    on May 16, 2011 at 1:00 pm

    [...] understand the car’s movement let’s do a little bit of math. I’ve got inspired by this tutorial and this one. But anyway, there is no rocket science involved. Just a simple trigonometric [...]

  26. 3D car with a camera that follows it — FlashRealtime.com

    on May 16, 2011 at 1:03 pm

    [...] understand the car’s movement let’s do a little bit of math. I’ve got inspired by this tutorial and this one. But anyway, there is no rocket science involved. Just a simple trigonometric [...]

  27. car » Blog Archive » 3D car with a camera that follows it — FlashRealtime.com

    on May 16, 2011 at 4:36 pm

    [...] know a car’s transformation let’s do a small bit of math. I’ve got desirous by this tutorial and this one. But anyway, there is no rocket scholarship involved. Just a elementary trigonometric [...]

  28. Tutorial: 3D Car With A Camera Following It

    on May 24, 2011 at 9:00 pm

    [...] understand the car’s movement let’s do a little bit of math. I’ve got inspired by this tutorial and this one. But anyway, there is no rocket science involved. Just a simple trigonometric [...]

  29. Hassan Ayoub

    on November 6, 2011 at 1:13 am

    Dear geek,
    thx for your tutorials, however, when can we exppect the full version of the game?
    Second, do u know books or video tutorials where they teach game developments especially car racing games?
    Thx in advanced

  30. John

    on November 23, 2011 at 3:44 pm

    This is Really great. Is there a way to control the number of Laps? How could I make it 3 instead of 10?

  31. Greg

    on December 1, 2011 at 9:18 pm

    Thanks for the great racing game. Could you post or email a description of what the different lines of code are doing like you did in the AS2 version?

  32. Harris

    on December 17, 2011 at 11:30 pm

    You STole the as2 version from gamesheep

  33. LuLu

    on January 3, 2012 at 4:07 pm

    Hi, I have created a short animation storyboard and would like to incorporate this mini-game at the end (e.g. frame 2885), can it be done? If yes, how do I do it?

  34. Akhyar

    on January 17, 2012 at 5:38 am

    GREAT Tutorial! i’m started to understand how to make as3 games… never thought that it will requires trygonometry though..

  35. Christoffer

    on January 24, 2012 at 6:52 pm

    Do you have a tutorial on how to make the laptimer in as3? Or is it very similiar to the as2 version?

    Otherwise, great tutorial. Thanks ;)

< >