Uploaded December 2020 | Updated September 2026, 2 weeks ago
Let's build vanilla JavaScript 2D game completely from scratch and learn fundamental front end web development techniques in the process. In today's HTML5 canvas and JavaScript game tutorial we will add new tools to our web developer toolkit. We will learn about for loops, arrays and JavaScript classes as well as drawImage canvas method to animate multiline sprite sheets and repeating backgrounds and 2D collision detection between circles. I will also show you how to handle game over, create backgrounds with linear gradient and much more.
Relevant links:
PART1: youtu.be/jl29qI62XPg
Sprite sheets and game art: gamedeveloperstudio.com
My simple hand-drawn repeating background:
pixeldra.in/u/u2TYVTGE
imgur.com/a/8kN0rjH
https://i.ibb.co/64wxXVY/background1.png
This JavaScript tutorial is part of a series, for more game development check out this playlist youtube.com/playlist?list=PLYElE_rzEw_sowQGjRdvwh9eAEt62d_Eu
You can message me on TWITTER twitter.com/code_laboratory
Check out some of my source code on CODEPEN codepen.io/franksLaboratory
If you started with vanilla JavaScript and HTML5 canvas recently you might want to try some of the tutorials from beginner friendly projects playlist first: youtube.com/playlist?list=PLYElE_rzEw_v8TXJ_ITSSBP_ypUKfQ7K-
#frankslaboratory
Music: (YouTube audio library) Vacay In Fiji Riddim - Konrad OldMoney, World Map - Jason Farnham
The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I'll receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!
Let's build vanilla JavaScript 2D game completely from scratch and learn fundamental front end web development techniques in the process. In today's HTML5 canvas and JavaScript game tutorial we will add new tools to our web developer toolkit. We will learn about for loops, arrays and JavaScript classes as well as drawImage canvas method to animate multiline sprite sheets and repeating backgrounds and 2D collision detection between circles. I will also show you how to handle game over, create backgrounds with linear gradient and much more.
Relevant links:
PART1: youtu.be/jl29qI62XPg
Sprite sheets and game art: gamedeveloperstudio.com
My simple hand-drawn repeating background:
pixeldra.in/u/u2TYVTGE
imgur.com/a/8kN0rjH
https://i.ibb.co/64wxXVY/background1.png
This JavaScript tutorial is part of a series, for more game development check out this playlist youtube.com/playlist?list=PLYElE_rzEw_sowQGjRdvwh9eAEt62d_Eu
You can message me on TWITTER twitter.com/code_laboratory
Check out some of my source code on CODEPEN codepen.io/franksLaboratory
If you started with vanilla JavaScript and HTML5 canvas recently you might want to try some of the tutorials from beginner friendly projects playlist first: youtube.com/playlist?list=PLYElE_rzEw_v8TXJ_ITSSBP_ypUKfQ7K-
#frankslaboratory
Music: (YouTube audio library) Vacay In Fiji Riddim - Konrad OldMoney, World Map - Jason Farnham
The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I'll receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!
