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
Hope you have fun with the projects! 😊 If you have any questions or have issues downloading the art assets let me know! Thanks FCC for sharing my course! ❤🙏
Excellent video! I learned many things from this video.
But I have a question. Is it okay to write
@type {HTMLCanvasElement}
on the first line?
What IDE is this?
hello. Thanks for the video. What's the name of the program you are using to code?
If you find that your sprites are getting scaled without any reason, or the sprite images are not at the correct position in the browser render, fix this issue by fixing the width and height at the html canvas tag, this will fix it for sure
Can you please give me the coding? Like for all the projects? Cus I kinda wanna copy them and be able to study them more carefully. I am a 10 year old kid in Japan…I don't wanna talk about this that much, but here I gotta tell you I am in an orphanage, I really love coding, but the big mean adults won't get me an online course. Something about money?
2
1
0
a+a
Hi. I've been following the tutorial to a T, and I have my photos in the same folder as my code, but when I go to run it, all I get is a black screen with the game slider at the bottom, and nothing is scrolling. What did I do wrong?
i lost it after 25 min you keep going leave me behind save yourself
For project 5, my time to next frame is around 8.3 ms
What a beautiful journey Frank, this tutorial is awesome (maybe a bit fast sometimes) and you're a great teacher. Big up!
10:43 11/19/2023
27:22
Hi guys) Just started exploring and finished the 2nd project. But a question came up, maybe you have solved it. If the second parallax image we need only in CANVAS_WIDTH width, as we need the beginning of this one, then if I try to optimize and crop the unnecessary part of the second image in this way:
ctx.drawImage(this.image, 0, 0, CANVAS_WIDTH, this.height, this.x + this.width, this.y, CANVAS_WIDTH, this.height);
In this case, the second image moves down by y coordinates, but they are exactly the same and I don't understand what the problem is. Perhaps you know what the problem is and how I can crop the unnecessary part of the second image correctly?
Chatgpt called and said your not longer needed lol
Will this work if I do it on VS?
Late to the party, but people in late 2023 are still enjoying this. Thank you @Frankslaboratory, this was great.
This shouldn't be free
Perfect to practice javaScript and English 2×1 😅
apt
select
apt
i noticed in the first lesson, the "gameFrame" variable has a runaway value. If anyone following along wants to solve this, and you have named your variables the same, you can replace line 84
gameFrame++;
with the ternary expression
position + 1 >= spriteAnimations[playerState].loc.length
? gameFrame = 0
: gameFrame++;
for those unfamiliar with ternary expressions, they are another way to write simple if/else statements
@Frankslaboratory i can't find the art assets!
I Frank sir it is very nice tutorial . learns a lot.
and I came up with new pattern of enemy moving. In your chapter 3, the first pattern where creatures jumps. I tried to move that creatures in that given given window and I caome up with this solution.
class Enemy{
constructor(){
this.speed = Math.random() * 4 – 2;
this.spriteWidth = 293;
this.spriteHeight = 155;
this.width = this.spriteWidth / 2.5;
this.height = this.spriteHeight / 2.5;
this.x = Math.random() * (CANVAS_WIDTH – this.width);
this.y = Math.random() * (CANVAS_HEIGHT – this.height);
this.frame = 0;
this.place = true;
this.flapSpeed = Math.floor(Math.random()*3+1);
}
update(){
if(this.x <= 0 || this.x >= CANVAS_WIDTH-this.width || this.y <= 0 || this.y >= CANVAS_HEIGHT-this.height) this.place = !this.place;
if(this.place){
this.x += this.speed;
this.y += this.speed;
}else{
this.x -= this.speed;
this.y -= this.speed;
}
if(gameFrame % this.flapSpeed == 0){
this.frame >= 5 ? this.frame = 0 : this.frame++;
};
}
draw(){
ctx.drawImage(enemy1,this.frame * this.spriteWidth,0,this.spriteWidth,this.spriteHeight,this.x,this.y,this.width,this.height);
}
}
I am just taking a extra boolean variable and in update method minus speed or plus speed on basis of on which border creatures reach.
Thanks again for this tutorial.
11:08
what is the IDE that you use
as a beginner, start a javascript course, to learn the basics? or just dive deep and start with 2D game development that I like?
Frontend developer? wow
Which program is he using to code? Thanks in advance
4 xd and btw – great course!
Any easy way to have and show the time count DOWN from maxTime?