filmov
tv
Programming racing game: How to make a car game in Javascript [Part 1]
![preview_player](https://i.ytimg.com/vi/6td_zpQC1U4/maxresdefault.jpg)
Показать описание
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
★ 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
Комментарии