Uploaded July 2021 | Updated September 2026, 1 week ago
In this introduction tutorial course we will cover important game development techniques using vanilla JavaScript and HTML5 canvas. Build a complete point and shoot game while learning the fundamentals of game development.
⭐️Course Contents ⭐️
00:00 JavaScript game development crash course overview and game examples
01:14 HTML and CSS setup
02:12 Simple HTML canvas setup with vanilla JavaScript
02:33 Creating a reusable JavaScript class
04:43 Animation loop
06:24 How to use timestamps and delta time
14:02 How to use ES6 spread operator
16:44 How to use array filter method
19:30 Sprite animation with draw image method
24:02 How to time sprite animation with delta time
27:56 How to animate bouncing movement
28:47 How to draw score in JavaScript game
30:00 getImageData HTML5 canvas method explained
34:26 Secondary collision canvas setup
35:15 Collision detection by color in 2D game
43:06 Triggered event based audio visual effects
50:18 How to handle game over
52:38 How to add particle effects
Learn JavaScript and front end web development by building games with me. Today we we will talk about:
- how to achieve pixel perfect collision detection using colors with getImageData() HTML canvas method
- how to use timestamps and delta time to make sure our game runs at the same speed on different machines
- we will learn about arrays and I will show you how to remove old game objects using built it array filter method and how to use array sort method to create correct draw order in a 2D game
- we will talk about modern ES6 JavaScript syntax and we will learn how to make our animation code cleaner and less repetitive with spread opearator
- and I will share many other small tips and trick as we go along
Have fun! :)
🔥 One Month FREE Trial of Skillshare Premium! 🔥 (access to all courses, cancel anytime) skillshare.eqcm.net/c/2793559/1085653/4650
🔥 I really like these GAMEDEV and GAME ART courses on Udemy 🔥
☕ How to Program Games: Tile Classics in JS for HTML5 Canvas bit.ly/2ZUfKuG
☕ Learn Professional 2D Game Graphic Design in Photoshop bit.ly/2SpPdE8
☕ The Ultimate 2D Game Character Design & Animation Course bit.ly/3eoZWqT
☕ Produce Professional Pixel Art for Your New Game bit.ly/3nUrTKm
❤ Related Links ❤
Visual Web Development by Radu, complete course 2021: youtube.com/playlist?list=PLB0Tybl0UNfb3hTHPfEIg1SPw_-Ca9iIw
Download project sprite sheets:
raven: frankslaboratory.co.uk/downloads/raven.png
dust cloud: frankslaboratory.co.uk/downloads/boom.png
Backup links:
Dust cloud: ibb.co/y65zJfw
Raven: ibb.co/ChzBzcm
Art by bevouliin.com check out his website for more game art assets :)
🎮 Game Development MASTERCLASS SERIES with vanilla JavaScript, basics for beginners: 🎮
🐶 Project 1: Sprite animation youtu.be/CY0HE277IBM
🐶 Project 2: Parallax backgrounds youtu.be/Mg7ibYWhjPI
🐶 Project 3: NPC movement youtu.be/pyhb8Y9qKUI
🐶 Project 4: Rectangle collision youtu.be/r0sy-Cr6WHY
🐶 Project 5: Circle collision youtu.be/rtBCVe3j_24
🐶 Project 6: Triggered event based animations youtu.be/Eg_zUEy_lDE
🐶 Project 7: *** this video ***
🐶 Project 8: Enemy types youtu.be/aEDADLtLEbk
🐶 Project 9: State Management youtu.be/jKe44NeFzwE
🐶 Project 10: Easy Side-Scroller Game youtu.be/7JtLHJbm0kA
Get Adobe creative suite apps (Photoshop, Illustrator etc.) bit.ly/3e60cI0
🎮 More HTML5 canvas and JavaScript game tutorials:
youtube.com/playlist?list=PLYElE_rzEw_sowQGjRdvwh9eAEt62d_Eu
If you are a BEGINNER you can still create beautiful animations, here is a selection of my beginner friendly projects, where I go slower and take time to explain things:
youtube.com/playlist?list=PLYElE_rzEw_v8TXJ_ITSSBP_ypUKfQ7K-
If you feel more confident in your coding skills, check out some more ADVANCED ANIMATIONS with vanilla JavaScript & HTML5 canvas:
youtube.com/playlist?list=PLYElE_rzEw_siuo-kkHh5h7Sk--6IPYNh
Let's be friends
👍 You can message me on TWITTER twitter.com/code_laboratory
👍 Check out some of my source code on CODEPEN codepen.io/franksLaboratory
Music: (YouTube audio library) Dub Hub - Jimmy Fontanez Media Right Productions
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!
#frankslaboratory
In this introduction tutorial course we will cover important game development techniques using vanilla JavaScript and HTML5 canvas. Build a complete point and shoot game while learning the fundamentals of game development.
⭐️Course Contents ⭐️
00:00 JavaScript game development crash course overview and game examples
01:14 HTML and CSS setup
02:12 Simple HTML canvas setup with vanilla JavaScript
02:33 Creating a reusable JavaScript class
04:43 Animation loop
06:24 How to use timestamps and delta time
14:02 How to use ES6 spread operator
16:44 How to use array filter method
19:30 Sprite animation with draw image method
24:02 How to time sprite animation with delta time
27:56 How to animate bouncing movement
28:47 How to draw score in JavaScript game
30:00 getImageData HTML5 canvas method explained
34:26 Secondary collision canvas setup
35:15 Collision detection by color in 2D game
43:06 Triggered event based audio visual effects
50:18 How to handle game over
52:38 How to add particle effects
Learn JavaScript and front end web development by building games with me. Today we we will talk about:
- how to achieve pixel perfect collision detection using colors with getImageData() HTML canvas method
- how to use timestamps and delta time to make sure our game runs at the same speed on different machines
- we will learn about arrays and I will show you how to remove old game objects using built it array filter method and how to use array sort method to create correct draw order in a 2D game
- we will talk about modern ES6 JavaScript syntax and we will learn how to make our animation code cleaner and less repetitive with spread opearator
- and I will share many other small tips and trick as we go along
Have fun! :)
🔥 One Month FREE Trial of Skillshare Premium! 🔥 (access to all courses, cancel anytime) skillshare.eqcm.net/c/2793559/1085653/4650
🔥 I really like these GAMEDEV and GAME ART courses on Udemy 🔥
☕ How to Program Games: Tile Classics in JS for HTML5 Canvas bit.ly/2ZUfKuG
☕ Learn Professional 2D Game Graphic Design in Photoshop bit.ly/2SpPdE8
☕ The Ultimate 2D Game Character Design & Animation Course bit.ly/3eoZWqT
☕ Produce Professional Pixel Art for Your New Game bit.ly/3nUrTKm
❤ Related Links ❤
Visual Web Development by Radu, complete course 2021: youtube.com/playlist?list=PLB0Tybl0UNfb3hTHPfEIg1SPw_-Ca9iIw
Download project sprite sheets:
raven: frankslaboratory.co.uk/downloads/raven.png
dust cloud: frankslaboratory.co.uk/downloads/boom.png
Backup links:
Dust cloud: ibb.co/y65zJfw
Raven: ibb.co/ChzBzcm
Art by bevouliin.com check out his website for more game art assets :)
🎮 Game Development MASTERCLASS SERIES with vanilla JavaScript, basics for beginners: 🎮
🐶 Project 1: Sprite animation youtu.be/CY0HE277IBM
🐶 Project 2: Parallax backgrounds youtu.be/Mg7ibYWhjPI
🐶 Project 3: NPC movement youtu.be/pyhb8Y9qKUI
🐶 Project 4: Rectangle collision youtu.be/r0sy-Cr6WHY
🐶 Project 5: Circle collision youtu.be/rtBCVe3j_24
🐶 Project 6: Triggered event based animations youtu.be/Eg_zUEy_lDE
🐶 Project 7: *** this video ***
🐶 Project 8: Enemy types youtu.be/aEDADLtLEbk
🐶 Project 9: State Management youtu.be/jKe44NeFzwE
🐶 Project 10: Easy Side-Scroller Game youtu.be/7JtLHJbm0kA
Get Adobe creative suite apps (Photoshop, Illustrator etc.) bit.ly/3e60cI0
🎮 More HTML5 canvas and JavaScript game tutorials:
youtube.com/playlist?list=PLYElE_rzEw_sowQGjRdvwh9eAEt62d_Eu
If you are a BEGINNER you can still create beautiful animations, here is a selection of my beginner friendly projects, where I go slower and take time to explain things:
youtube.com/playlist?list=PLYElE_rzEw_v8TXJ_ITSSBP_ypUKfQ7K-
If you feel more confident in your coding skills, check out some more ADVANCED ANIMATIONS with vanilla JavaScript & HTML5 canvas:
youtube.com/playlist?list=PLYElE_rzEw_siuo-kkHh5h7Sk--6IPYNh
Let's be friends
👍 You can message me on TWITTER twitter.com/code_laboratory
👍 Check out some of my source code on CODEPEN codepen.io/franksLaboratory
Music: (YouTube audio library) Dub Hub - Jimmy Fontanez Media Right Productions
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!
#frankslaboratory
