Learn 2D Game Development with JavaScript

Coders! Let's explore an alien planet and learn all the techniques you need to make your own 2D games with vanilla JavaScript, HTML5, CSS3 and HTML Canvas. From sprite animation to parallax backgrounds, today we will build a game completely from scratch, with no frameworks and no libraries, using just HTML, CSS and plain vanilla JavaScript. Have fun!

?EXTENDED class with BONUS lessons and more free sprite sheets: 4 new enemies, sound design, animated shield, animated projectiles and more https://www.udemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2

? Download Project Art assets ?
** All art assets for this class were made by me or by artists I hired, there is NO copyright, you can download and use these freely for any project you want! Click the LIKE on the video if you want more free game art soon! :D
Player: https://www.frankslaboratory.co.uk/downloads/103/player.png
Projectile: https://www.frankslaboratory.co.uk/downloads/103/projectile.png
Particle gears: https://www.frankslaboratory.co.uk/downloads/103/gears.png
⚙️ Backgrounds:
Layer 1: https://www.frankslaboratory.co.uk/downloads/103/layer1.png
Layer 2: https://www.frankslaboratory.co.uk/downloads/103/layer2.png
Layer 3: https://www.frankslaboratory.co.uk/downloads/103/layer3.png
Layer 4: https://www.frankslaboratory.co.uk/downloads/103/layer4.png
? Enemies:
Angler 1: https://www.frankslaboratory.co.uk/downloads/103/angler1.png
Angler 2: https://www.frankslaboratory.co.uk/downloads/103/angler2.png
Lucky Fish: https://www.frankslaboratory.co.uk/downloads/103/lucky.png
Hive Whale: https://www.frankslaboratory.co.uk/downloads/103/hivewhale.png
Drone: https://www.frankslaboratory.co.uk/downloads/103/drone.png
☁️ Collision Animations:
Smoke: https://www.frankslaboratory.co.uk/downloads/103/smokeExplosion.png
Fire: https://www.frankslaboratory.co.uk/downloads/103/fireExplosion.png

For more vanilla JavaScript GAME DEVELOPMENT check out this playlist:
https://www.youtube.com/playlist?list=PLYElE_rzEw_uryBrrzu2E626MY4zoXvx2

⭐️Tutorial Contents ⭐️
00:00:00 Intro
00:00:47 HTML & CSS setup
00:02:20 Basic JavaScript setup
00:04:39 Object Oriented programming with JavaScript
00:07:05 Creating Player and Game objects
00:12:58 Animation loop
00:16:16 Keyboard inputs
00:25:55 Creating projectiles
00:33:02 Periodic events
00:38:10 Drawing game UI
00:41:00 Base enemy class
00:48:59 Collision detection between rectangles
00:54:16 Drawing game score
00:57:29 Win and lose condition
00:59:32 Counting game time
01:02:47 Animated parallax backgrounds
01:13:00 Sprite animation with JavaScript
01:16:42 Creating a debug mode
01:18:18 Animating enemy sprite sheets
01:24:55 Night Angler enemy class
01:27:19 Lucky Fish enemy class
01:28:42 Collecting power ups
01:36:31 Drawing projectiles as images
01:37:41 Custom fonts and game text
01:40:23 Cleaning up
01:42:31 Particle effects and physics
01:54:43 Particle rotation
01:58:27 Tweaks and fixes
02:01:26 Hive Whale enemy class
02:04:26 Drone enemy class
02:09:10 Dust effect animation
02:24:16 Fire effect animation
02:25:43 Tuning game difficulty
02:29:06 What to do next?

Let's be friends
? You can message me on TWITTER https://twitter.com/code_laboratory
? Check out some of my source code on CODEPEN https://codepen.io/franksLaboratory

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