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

Welcome to the part 2 of the video tutorial series on programming racing game, which shows how to make a car game in javascript. This part covers creating the Player class, updating the camera to follow the player, adding a clipping line to render only segments above it and making the road to correctly loops back.

★ Outline ★

00:00 - Intro
00:35 - What we have developed so far
01:08 - Creating the Player class
02:22 - Updating the camera to follow the player
02:59 - Adding a clipping line to avoid a psychedelic effect by rendering only segments above it
03:37 - Displaying the player's car by using a ferrari sprite
04:54 - Calculate the camera offset Z to correctly project segments when the road loops back
05:29 - Fixing Player to correctly update position when the road loops back
05:55 - Fixing Camera to correctly follow Player when the road loops back
06:32 - 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

[yherok]

@Srdjan Susnic We waiting for the part 3. I have looking for years ago any notion more comprehensible about create this game type, you have get this!

[KJJHN]

where did part 3 4 and 5 go? Such a great start, I cannot find part 3.

[T-sz]

Please make the Part 3. Love the tutorial

[__narke]

Thank you for this great work! We all want the part 3.

[dapoint]

Awesome tutorial!! No sooner the video was released, I had to click and watch it :). Thnaks for uploading!

[johanhellberg]

Love this game! Looking forward to part 3!

[OneAndOnlyMe]

Any chance of part 3? Really want to know how to curve the road and do the hills!

[Collect-AI]

These videos are great! What happened to part three?

[fouldsc]

great tutorial ! - will there be third part with scenery and other vehicles ?

[tibisoft]

Very good tutorial, thanks for that, I was able to implement it to my small GameMaker Studio project. When do you plan to release the part 3?

[random_precision_software]

Don't fancy creating a unity version do you? In C#

[Ufol]

Hi. Any plan to release the part 3? :)

[ReidSherman]

Hey there, thanks for the videos :) any chance we could get the source for the complete version of the game to remix/tinker around with? It's perfectly fine if it's not refactored/commented.

[konardkonrado]

is there any 3d object in this project or its illusion?

[sanosanbaby]

not sure the sprite rendering can take the entire part2