Loading...
アイコン

freeCodeCamp.org

チャンネル登録者数 1080万人

117万 回視聴 ・ 35150いいね ・ 2022/07/28

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. youtube.com/c/Frankslaboratory

⭐️ Assets ⭐️
🕹 Project 1: Vanilla JavaScript sprite animation techniques
frankslaboratory.co.uk/downloads/shadow_dog.png

🕹 Project 2: Parallax backgrounds with JavaScript
Layers Zip: frankslaboratory.co.uk/downloads/backgroundLayers.…

🕹 Project 3: Enemy movement patterns
Enemies Zip: frankslaboratory.co.uk/downloads/enemies.zip

🕹 Project 4: Collision animations from a sprite sheet
frankslaboratory.co.uk/downloads/boom.png

🕹 Project 5: Point & shoot game
raven: frankslaboratory.co.uk/downloads/raven.png
dust cloud: frankslaboratory.co.uk/downloads/boom.png

🕹 Project 6: Enemy variety in JavaScript games
worm: frankslaboratory.co.uk/downloads/enemy_worm.png
ghost: frankslaboratory.co.uk/downloads/enemy_ghost.png
spider: frankslaboratory.co.uk/downloads/enemy_spider.png

🕹 Project 7: Side-scroller game with mobile support
Player: frankslaboratory.co.uk/downloads/93/player.png
Background: frankslaboratory.co.uk/downloads/93/background_sin…
Enemy: frankslaboratory.co.uk/downloads/93/enemy_1.png

🕹 Project 8: State management in JavaScript games
frankslaboratory.co.uk/downloads/dog_left_right_wh…

🕹 Project 9: Final endless runner game with all the features
Player: frankslaboratory.co.uk/downloads/97/player.png

🕹 City background layers:
Layer 1: www.frankslaboratory.co.uk/downloads/97/layer-1.pn…
Layer 2: www.frankslaboratory.co.uk/downloads/97/layer-2.pn…
Layer 3: www.frankslaboratory.co.uk/downloads/97/layer-3.pn…
Layer 4: www.frankslaboratory.co.uk/downloads/97/layer-4.pn…
Layer 5: www.frankslaboratory.co.uk/downloads/97/layer-5.pn…

🕹 Fire texture:
www.frankslaboratory.co.uk/downloads/97/fire.png

🕹 Collision animation:
www.frankslaboratory.co.uk/downloads/97/boom.png

🕹 Lives:
www.frankslaboratory.co.uk/downloads/97/lives.png
www.frankslaboratory.co.uk/downloads/97/heart.png

🕹 Forest background layers:
Layer 1: www.frankslaboratory.co.uk/downloads/97/forest/lay…
Layer 2: www.frankslaboratory.co.uk/downloads/97/forest/lay…
Layer 3: www.frankslaboratory.co.uk/downloads/97/forest/lay…
Layer 4: www.frankslaboratory.co.uk/downloads/97/forest/lay…
Layer 5: www.frankslaboratory.co.uk/downloads/97/forest/lay…

🕹 18 Enemies:
Big spider: www.frankslaboratory.co.uk/downloads/97/enemy_spid…
Bat 1: www.frankslaboratory.co.uk/downloads/97/enemy_bat_…
Spinner: www.frankslaboratory.co.uk/downloads/97/enemy_spin…
Small spider: www.frankslaboratory.co.uk/downloads/97/enemy_spid…
Ghost 1: www.frankslaboratory.co.uk/downloads/97/enemy_ghos…
Bat 2: www.frankslaboratory.co.uk/downloads/97/enemy_bat_…
Raven: www.frankslaboratory.co.uk/downloads/97/enemy_rave…
Bat 3: www.frankslaboratory.co.uk/downloads/97/enemy_bat_…
Ghost 2: www.frankslaboratory.co.uk/downloads/97/enemy_ghos…
Fly: www.frankslaboratory.co.uk/downloads/97/enemy_fly.…
Ghost 3: www.frankslaboratory.co.uk/downloads/97/enemy_ghos…
Ghost 4: www.frankslaboratory.co.uk/downloads/97/enemy_ghos…
Hand: www.frankslaboratory.co.uk/downloads/97/enemy_hand…
Plant: www.frankslaboratory.co.uk/downloads/97/enemy_plan…
Worm: www.frankslaboratory.co.uk/downloads/97/enemy_worm…
Walking zombie: www.frankslaboratory.co.uk/downloads/97/enemy_zomb…
Ground zombie: www.frankslaboratory.co.uk/downloads/97/enemy_grou…
Digger: www.frankslaboratory.co.uk/downloads/97/enemy_digg…

🔗 More art assets: bevouliin.com/

❤️ Try interactive JavaScript courses we love, right in your browser: 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

コメント

コメントを取得中...

コントロール
設定

使用したサーバー: wakameme