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/
โญ๏ธ 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
source
