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

preview_player
Показать описание
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...

★ Episodes ★

Part 1 - Setting up the project, implementing pseudo 3d projection and creating a straight road:

Part 2 - Adding the player and making the road to loops back:

★ 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!
Bye!

★ Contact Info ★

Official Website:

Github:

Facebook:

Twitter:

★ Credits ★

Surf Shimmy by Kevin MacLeod

'House Of Style'
Jay Man - OurMusicBox

#gamedev #indiedev #javascript #webdev #devblog #html5 #gamedeveloper​ #javascriptgames​ #programming
Рекомендации по теме
Комментарии
Автор

Thanks all for the great comments and feedbacks.
After a long waiting and numerous inquiries for the second part, it is finally published.

ssusnic
Автор

Cleanest JavaScript I’ve ever seen! Your colleagues must love you!

martinevans
Автор

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.

SencilSketches
Автор

I am not a game developer, but I like your dedication on the video. I like to program in nodejs, but now I wanna take a break from it, and try some game developing!

samannoyb
Автор

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!

brendanhannum
Автор

This used to be one of my fav type games when i was younger!

LibraryOfTheOligarchs
Автор

Amazing clear explanation and code!
Your ability to go through every piece of code and explain it in such a short video is remarkable, making it the best JS game tutorial!

MrLior
Автор

Very talented at programming and also teaching programming. Great job. Let's partner to work on a few projects.

horacehemley
Автор

Your voice and tone remind me of the colonel in MGS2 lol. And your JS style is very clear, clean and very well explained! Thanks a lot for making content like this.

ercre
Автор

Thanks for making this video, its just what i need(!) i was given a analog racing device... I said*are u heading me towards a mental breakdown...

bellaballerina
Автор

It is simply awesome tutorial. I hope you can make one using only Javascript (without Phaser) and go over it slowly and in detail.

Aarmaxian
Автор

You have very nice videos, this is the easiest racing game you can ever create. I will subscribe because you deserve it.

zukinoobbs
Автор

Nice tutorial I look forward to part 2

andersonalmeydat
Автор

Subscribed. Can't wait for future tuts.

cwareham
Автор

This was really helpful and clear Thank You !!

akeelk
Автор

Amazing sir ❤️❤️❤️
Waiting for next episode

firstacc
Автор

Really good explanation and result, man. Thank you, that was usefull

rizhyi
Автор

Oh, wish you could make it a code along tutorial.

jellycoding
Автор

Good job on this, sounds fun! I'll follow along over the weekends! Always wanted to make a js game :)

TheArkaRay
Автор

I want to make a pseudo 3D racing game, but with a more realistic approach to the driving feel, with a working transmission and some realistic graphic effects like tire smoke and skidmarks, and maybe a menu system where you can choose your car and change some settings, like the transmission mode (Automatic or Manual)

ZeldaACFan