Watch Learn 2D Game Development with JavaScript Video Tutorial

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