JavaScript Game Development Course for Beginners

Learn to make 2D games with HTML, CSS & plain vanilla JavaScript, no frameworks and no libraries! From sprite animation to state management, in this series of projects you will learn everything you need to make your own 2D animated games! We will go step by step explaining each technique on a small standalone codebase and then we will use everything we learned to make a single final game. ✏️ Course by Frank's Laboratory. https://www.youtube.com/c/Frankslaboratory ⭐️ Assets ⭐️ 🕹 Project 1: Vanilla JavaScript sprite animation techniques http://frankslaboratory.co.uk/downloads/shadow_dog.png 🕹 Project 2: Parallax backgrounds with JavaScript Layers Zip: https://frankslaboratory.co.uk/downloads/backgroundLayers.zip 🕹 Project 3: Enemy movement patterns Enemies Zip: https://frankslaboratory.co.uk/downloads/enemies.zip 🕹 Project 4: Collision animations from a sprite sheet http://frankslaboratory.co.uk/downloads/boom.png 🕹 Project 5: Point & shoot game raven: http://frankslaboratory.co.uk/downloads/raven.png dust cloud: http://frankslaboratory.co.uk/downloads/boom.png 🕹 Project 6: Enemy variety in JavaScript games worm: https://frankslaboratory.co.uk/downloads/enemy_worm.png ghost: https://frankslaboratory.co.uk/downloads/enemy_ghost.png spider: https://frankslaboratory.co.uk/downloads/enemy_spider.png 🕹 Project 7: Side-scroller game with mobile support Player: http://frankslaboratory.co.uk/downloads/93/player.png Background: http://frankslaboratory.co.uk/downloads/93/background_single.png Enemy: http://frankslaboratory.co.uk/downloads/93/enemy_1.png 🕹 Project 8: State management in JavaScript games http://frankslaboratory.co.uk/downloads/dog_left_right_white.png 🕹 Project 9: Final endless runner game with all the features Player: http://frankslaboratory.co.uk/downloads/97/player.png 🕹 City background layers: Layer 1: https://www.frankslaboratory.co.uk/downloads/97/layer-1.png Layer 2: https://www.frankslaboratory.co.uk/downloads/97/layer-2.png Layer 3: https://www.frankslaboratory.co.uk/downloads/97/layer-3.png Layer 4: https://www.frankslaboratory.co.uk/downloads/97/layer-4.png Layer 5: https://www.frankslaboratory.co.uk/downloads/97/layer-5.png 🕹 Fire texture: https://www.frankslaboratory.co.uk/downloads/97/fire.png 🕹 Collision animation: https://www.frankslaboratory.co.uk/downloads/97/boom.png 🕹 Lives: https://www.frankslaboratory.co.uk/downloads/97/lives.png https://www.frankslaboratory.co.uk/downloads/97/heart.png 🕹 Forest background layers: Layer 1: https://www.frankslaboratory.co.uk/downloads/97/forest/layer-1.png Layer 2: https://www.frankslaboratory.co.uk/downloads/97/forest/layer-2.png Layer 3: https://www.frankslaboratory.co.uk/downloads/97/forest/layer-3.png Layer 4: https://www.frankslaboratory.co.uk/downloads/97/forest/layer-4.png Layer 5: https://www.frankslaboratory.co.uk/downloads/97/forest/layer-5.png 🕹 18 Enemies: Big spider: https://www.frankslaboratory.co.uk/downloads/97/enemy_spider_big.png Bat 1: https://www.frankslaboratory.co.uk/downloads/97/enemy_bat_1.png Spinner: https://www.frankslaboratory.co.uk/downloads/97/enemy_spinner.png Small spider: https://www.frankslaboratory.co.uk/downloads/97/enemy_spider.png Ghost 1: https://www.frankslaboratory.co.uk/downloads/97/enemy_ghost_1.png Bat 2: https://www.frankslaboratory.co.uk/downloads/97/enemy_bat_2.png Raven: https://www.frankslaboratory.co.uk/downloads/97/enemy_raven.png Bat 3: https://www.frankslaboratory.co.uk/downloads/97/enemy_bat_3.png Ghost 2: https://www.frankslaboratory.co.uk/downloads/97/enemy_ghost_2.png Fly: https://www.frankslaboratory.co.uk/downloads/97/enemy_fly.png Ghost 3: https://www.frankslaboratory.co.uk/downloads/97/enemy_ghost_3.png Ghost 4: https://www.frankslaboratory.co.uk/downloads/97/enemy_ghost_4.png Hand: https://www.frankslaboratory.co.uk/downloads/97/enemy_hand.png Plant: https://www.frankslaboratory.co.uk/downloads/97/enemy_plant.png Worm: https://www.frankslaboratory.co.uk/downloads/97/enemy_worm.png Walking zombie: https://www.frankslaboratory.co.uk/downloads/97/enemy_zombie.png Ground zombie: https://www.frankslaboratory.co.uk/downloads/97/enemy_ground_zombie.png Digger: https://www.frankslaboratory.co.uk/downloads/97/enemy_digger.png 🔗 More art assets: https://bevouliin.com/ ❤️ Try interactive JavaScript courses we love, right in your browser: https://scrimba.com/freeCodeCamp-JavaScript (Made possible by a grant from Scrimba) ⭐️ Contents ⭐️ 0:00:00 Intro 0:01:28 Project 1: Vanilla JavaScript sprite animation techniques 0:43:07 Project 2: Parallax backgrounds 1:25:33 Project 3: Enemy movement patterns 2:13:31 Collision detection between rectangles 2:19:23 Collision detection between circles 2:24:14 Project 4: Collision animations from a sprite sheet 2:48:35 Project 5: Point & shoot game 3:50:44 Project 6: Enemy variety 4:45:49 Project 7: Side-scroller game with mobile support 5:54:04 Project 8: State management 7:02:57 Project 9: Final endless runner game with all the features