Code a 2D Game Using JavaScript, HTML, and CSS (w/ Free Game Assets) – Tutorial

Let's explore an alien planet and learn all the techniques you need to make your own 2D games with vanilla JavaScript, HTML5, CSS3 and HTML Canvas. From sprite animation to parallax backgrounds, today we will build a game completely from scratch, with no frameworks and no libraries, using just HTML, CSS and plain vanilla JavaScript. Have fun!

🎨 Download Project Art assets 🎨
** All art assets for this class were made by Frank or by artists he hired, there is NO copyright, you can download and use these freely for any project you want!
⚙️ Backgrounds:
🐟 Enemies:
☁️ Collision Animations:

⭐️ Contents ⭐️
⌨️ (0:00:00) Intro
⌨️ (0:01:07) HTML & CSS setup
⌨️ (0:02:40) Basic JavaScript setup
⌨️ (0:04:59) Object Oriented programming with JavaScript
⌨️ (0:07:25) Creating Player and Game objects
⌨️ (0:13:18) Animation loop
⌨️ (0:16:36) Keyboard inputs
⌨️ (0:26:15) Creating projectiles
⌨️ (0:33:22) Periodic events
⌨️ (0:38:30) Drawing game UI
⌨️ (0:41:20) Base enemy class
⌨️ (0:49:19) Collision detection between rectangles
⌨️ (0:54:36) Drawing game score
⌨️ (0:57:49) Win and lose condition
⌨️ (0:59:52) Counting game time
⌨️ (1:03:07) Animated parallax backgrounds
⌨️ (1:13:20) Sprite animation with JavaScript
⌨️ (1:17:02) Creating a debug mode
⌨️ (1:18:38) Animating enemy sprite sheets
⌨️ (1:25:15) Night Angler enemy class
⌨️ (1:27:39) Lucky Fish enemy class
⌨️ (1:29:02) Collecting power ups
⌨️ (1:36:51) Drawing projectiles as images
⌨️ (1:38:01) Custom fonts and game text
⌨️ (1:40:43) Cleaning up
⌨️ (1:42:51) Particle effects and physics
⌨️ (1:55:03) Particle rotation
⌨️ (1:58:47) Tweaks and fixes
⌨️ (2:01:46) Hive Whale enemy class
⌨️ (2:04:46) Drone enemy class
⌨️ (2:09:30) Dust effect animation
⌨️ (2:24:36) Fire effect animation
⌨️ (2:26:03) Tuning game difficulty
⌨️ (2:29:26) What to do next?

[Frankslaboratory]

If you have any questions let me know! What game does this remind you of? :D I got inspired by a couple of classic arcade style games. Have fun!

[rrahll]

Frank is absolutely the best in gamedev tutorials using JavaScript, HTML, and CSS.
Thanks Frank!

[Pau_Pau]

hello I just came across this channel -- since I am still learning html, css and javascript, and I quite like your work they are amazing! that's why I follow and subscribed and looking forward in learning more.😃

[GiorgosKyrenes]

I don't know if you change the code later, but I'll comment on this anyway in case I forget it later.
So, you don't need to use an array for the game.keys and check each time what is included. You can just use a Set, which can only have unique values.
I think this significantly simplifies the code.

[celmjmn]

I'm learning OOP for a while by myself and that is the best practice and explanaition i've ever seen. Thank you for that awesome tutorial!

[CybernaticoByNishant]

This is the best JavaScript Video I have ever watched. So cool! 😍😍

[Eurorex]

great stuff, I especially liked the stuff about gravity and falling cogs etc. amazing video!

[МарияИванова-ту]

I did it! It was a lot of fun! Thank you!

[Biotoxic]

Just an FYI at 1:32:44 you need a double equal sign for:
if (enemy.type = "lucky") this.player.enterPowerUp();
else this.score--;
}
Otherwise all enemies will cause power ups. Don't know why it took me an hour to debug that but I hope I save somebody else the time lol

[mikesean]

for anyone has font problem, just simply add context.font = '20px Bangers' above the text.

[SlightlyOverripeAvocado]

I did it! Thanks for this. Great tutorial!

[NexTrip]

Please upload a computer networking full course ❤

[lukyanenkomikhail]

it is one of the best such video I've seen! You explain all your steps and this is invaluable. Thanks. One question: where are you from? We are exploreing the pronunciations )) For robots: JS JavaScript classes Real game project js

[rafalg]

I did It! I've learned so much, thank You.

[josephgassiraro]

This is the first project I have ever done with JavaScript and @Franks laboratory, I just want to thank you for giving me the confidence to self-teach myself with your help. A question though, why do I have to put "this" in front of so many variables? I understand that using the word this makes it distinct somehow, but does the computer not know that by talking about a certain property in a class like height or size, I would be referring to the variable in the case of the class? I know it may be a simple question, but when I say this is my first coding project in JavaScript, it really is.

I did it!

[richardcarrigan]

Thank you so much for taking the time to make this video series, and especially for making it freely available!

## Feedback
If you could separate writing the code and talking about the code, that would be really helpful, as it's hard to code along while also trying to understand what you're explaining.

## Question
Also, do you know why your extended course isn't showing up in Udemy Business? My employer has Udemy Business, so that's how I enroll in all my Udemy courses, but I couldn't find any of yours 😳

[vampiroast]

Hi Frank! What software did you use to create the player, enemies, backgrounds, coliision animations? Photoshop? I mean each individual image, not DragonBones for creating the sprite. Do you have a course on how to draw images? Thanks!

[greatgaurav]

Free Code Camp is simply the best #education #coding

[gorimor]

How do we get around the OS delay on pressing a key? It only happens with the space key, and since that can't be added to the keys array I'm not sure what to do. Although I have tried adding it as the string "space" and using the same logic as with the arrow keys, but nothing. Arrow keys move very smooth, on hold it immediately starts moving and doesn't stop. When I shoot, however, it shoots once, there's a pause, then it does continuous shooting.

[nocopyrightgameplaystockvi]

Hi, Can you just possibly upload a course on blender 3D from Polyjford's owner ? That will be great.