JavaScript Tutorial - Game Development

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: https://youtu.be/jl29qI62XPg
Sprite sheets and game art: https://www.gamedeveloperstudio.com/
My simple hand-drawn repeating background:
https://pixeldra.in/u/u2TYVTGE
https://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 https://www.youtube.com/playlist?list=PLYElE_rzEw_sowQGjRdvwh9eAEt62d_Eu

You can message me on TWITTER https://twitter.com/code_laboratory
Check out some of my source code on CODEPEN https://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: https://www.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!