HTML5 Canvas Tutorials for Beginners | Become a Canvas Pro 📋 - Tower Defense Game Tutorial with JavaScript & HTML Canvas

Ready to create amazing games? Join chriscourses.com to learn, grow and thrive from over 100 videos, quizzes and code challenges: https://chriscourses.com/ Here you'll learn how to create your very first tower defense game with JavaScript and HTML canvas. We'll start by creating a game map using a map editor called Tiled. Then we'll code the basics of a tower defense game using nothing but rudimentary shapes. Finally, we'll replace our shapes with sprites to give our game a professional look. Google Drive Assets: https://drive.google.com/drive/folders/1-0sL78pmANRDhio3veKt-6Zg3X3aP1zp Finished Demo: https://chriscourses.github.io/tower-defense/ Source Code: https://github.com/chriscourses/tower-defense Tiled Map Editor Download: https://www.mapeditor.org/ Stone Tower Assets: https://free-game-assets.itch.io/free-stone-tower-defense-game-art?download Desert Tileset: https://free-game-assets.itch.io/free-rpg-desert-tileset Orc Sprite Assets: https://free-game-assets.itch.io/free-2d-orcs-sprite-sheets Heroicons: https://heroicons.com/ Font Awesome: https://fontawesome.com/ 0:00 Introduction 0:51 Game Assets and Downloads 5:40 Create a Path 23:53 Map Details 31:42 Project Setup 48:31 Pathfinding 1:28:55 Building Placement 2:12:03 Shooting Projectiles 2:50:40 Health Bars 3:02:46 Waves 3:09:43 Game Over 3:39:13 Resources 4:01:12 Sprites - Projectile 4:16:09 Sprites - Enemy 4:34:15 Sprites - Building 4:55:25 Sprites - Explosions 5:04:50 Launch Music by Joe Gallagher: https://joegallagher.itch.io/free-orchestral-music-pack