Other
FreeJavaScript Game Development Course for Beginners
No ratings yetBEGINNEREnglish
YouTubeYouTubePrice
This course is free to watch on its platform.
Watch free on YouTube →Mark your own learning status. Opening a course link does not establish enrollment.
Loading saved status…
This is a beginner course in making 2D games with HTML, CSS and plain JavaScript, with no frameworks or libraries to learn first. Each technique is taught on a small standalone project, and the series builds toward a final endless runner.
The projects step up gradually, from a point-and-shoot game to a side-scroller with mobile support, and then to the Project 9 finale. Working through the code yourself is the best way to get value out of it, since each project reuses ideas from the last. It suits learners who want to understand the mechanics beneath a game engine.
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
Advertisement
No Korshub reviews yet.
