Programming racing game: How to make a car game in Javascript [Part 1]

Programming racing game: How to make a car game in Javascript [Part 1]

1686 , 4.97 , #Programming #racing #game #car #game #Javascript #Part
Programming racing game: How to make a car game in Javascript [Part 1]
Welcome to the part 1 of the video tutorial series on programming racing game, which shows how to make a car game in javascript. This part covers creating the main game loop, implementing 3d projection, building a straight road and rendering it.

★ Outline ★

00:00 – Intro
01:00 – Setting up the game
03:20 – The road structure and geometry
04:06 – Creating a straight road using segments
05:32 – Rendering the first segment using 2D projection
06:48 – 3D projection algorithm
08:29 – Rendering the first segment using 3D projection
09:41 – Calculating the distance between camera and projection plane
11:13 – Rendering all segments in view
13:06 – Coloring segments alternately by using two shades of gray
13:32 – Rendering grass
13:53 – Rendering rumble strips
14:21 – Rendering lanes
14:50 – Coloring the start and finish
15:27 – Watch in the next part…

★ Project Description★

In this javascript racing game tutorial, I’m creating a complete retro-style arcade game like Outrun from scratch, step by step. It’s an old school pseudo 3d racer, where your goal is to drive a car, as fast as possible through heavy traffic.

The term pseudo 3d refers to the simulating the appearance of 3d space by using a graphic projection. And to implement a 3d projection, it’s enough to use a simple math based on the law of similar triangles. The whole process of deriving projection formulas is explained in detail in this pseudo 3d racing game tutorial.

To make this javascript car game, I used Phaser 3 Framework.

My wish was to write a simple car racing game code that would be understandable to everyone. So I tried my best to generate a self-documented code and comment almost all the lines.

It is certainly not like the original Outrun source code, but if you want to play around with the prototype, the code is available for download on my Github:

To summarize, here is a list of all stuff I’m going to cover in detail through this javascript racing game tutorial:

– initializing a new Phaser game
– setting up the scene
– creating the main game loop
– programming pseudo 3d with explaining 3d perspective projection
– building a straight road
– adding curves and hills
– implementing parallax scrolling of the backgrounds
– controlling player car
– adding roadside objects
– adding other vehicles (cars and trucks)
– implementing artificial intelligence for controlling vehicles
– checking collision with objects and vehicles
– and so on.

So I hope you will have as much fun as I did with programming this racing game, and learning how to make a pseudo 3d car game in javascript.

In that case, please like this video, and consider subscribing to my Youtube channel.
I would greatly appreciate it!
And that way, you don’t miss out on more actionable videos like this one.

Now, let me know what you think about this javascript racing game tutorial by leaving a comment!
Did you find it useful?
Or, if there is anything that you don’t like, please tell me!

Stay tuned for the next part!

★ Contact Info ★

Official Website:




★ Credits ★

Surf Shimmy by Kevin MacLeod

‘House Of Style’
Jay Man – OurMusicBox

#gamedev #indiedev #javascript #webdev #devblog #html5 #gamedeveloper​ #javascriptgames​ #programming

Bạn đang xem bài viết “Programming racing game: How to make a car game in Javascript [Part 1]” tại website


Xem thêm các bài viết về Game đua xe khác tại đây:


  1. I'm not a programmer but your clarity is great. I've spent the last 8 hours translating this into Gamemaker Studio and I've been able to understand most of it so I'm looking forward to the next part of this tutorial series.

    Thank you.

  2. You do an awesome job. Your style of teaching is great and i think people can learn alot from this. A few things on the code. No real review because i understand that this is something to show how stuff works, but just some points to improve. You use var alot. In most of the cases, you can just use const here. There are just a few cases where you really mutate values and there you can use let. That are just the loops and the lane variables at the end i think. You naming is a bit off. Sometimes you use camelCase and sometimes you use snake_case. No big thing but it is better to read code if it does not change in style. Another cool thing would be a vector2d/vector3d class. You have your point objects and you have parameters like cameraX, cameraY, cameraZ alot. It would be a real benefit to have vector classes with some methods to clean up some code. It is easier to read something like 'const translation =' or something like that than to have the calculation in place. And yeah, just put the vector instances as parameters instead of putting the single values one at a time. That would make the code a bit more readable. But yeah, that was some awesome tutorial. You got a subscribe. I just saw the first part and will directly go on with the rest. Really interesting stuff.

  3. I am a Computer Science Major who currently feels quite behind on his abilities as a programmer. I watched your tutorial after finding it on Reddit and I want to say thank you for giving me the motivation to finally start a big project! I have mainly worked in Java so far but I can see those skills transferring over somewhat smoothly and I'm excited to start. Thanks again for the videos!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *