JavaScript Game Tutorial - Particles & Interactions

Make your own 2D adventures with HTML, CSS & plain vanilla JavaScript, no frameworks and no libraries! Today we will apply state design pattern, sprite animation, parallax backgrounds and we will learn how to control FPS with timestamps and delta time. Have fun! :)

❤ Related Links ❤
Download project sprite sheets:
Backgrounds:
Fire texture:
Collision animation:

⭐️Tutorial Contents ⭐️
00:00 Course overview & final project previews
00:40 Add custom debug mode
02:57 Collision detection explained
06:11 Drawing score
08:42 Rolling state
12:26 Particle class
13:42 Dust particles
22:59 Fire particles

Let's be friends

The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I'll receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!
#frankslaboratory

[douglascounts]

This is a great video to watch near Halloween. I know the video wasn't done at that time, but it is a bonus that I am watching it during this time of year. LOL

[rupturedrhombus]

Finally caught up on this series, I'm always glad to come back to your series. I am constantly jumping between front and back-end, and I haven't found a better teacher than you yet for OOP. You make these concepts stick, thanks as always for this and keep it coming.

[enijar]

Excellent video as usual. I really liked how you implemented the particle effects. I've never built a particle system for 2D canvas, and didn't know it could be done this easily and cleanly. Really enjoying this series of videos!

[ipsaous]

Hi, I watched several of your videos and you're doing an amazing work ! Keep it up ;)

[Radu]

That constellations effect in the intro and outro is really awesome :-)

[sagardeva]

really great work sir addicted to this series

[Hiedalle]

how would you check the colision not between enemy and player but with enemies and other enemies? or the latest generated enemy and the previous one?

[prosungupta]

Hello @FranksLaboratory, great fan of your work from India.
I was following up these series and understanding and writing these code, but found the "Score" text to the left alignment, is coming very small in my browser (chrome) not vivid enough like yours, what could be the reason? Followed yours code only

[nicholascaban]

How do you add the preview of the code to the right of vscode?

[asdomain]

Hey can you do video on how to create a Kaleidoscope using html canvas? Ive tried looking for it over internet but couldn't find a decent tutorial. It would be great if you can create a simple tutorial for it🙏

[robehickmann]

Putting new data into an array and then throwing it away will create unstable framerate as the garbage collector will need to deal with the 'leaking' memory. Its better to have a fixed size pool and reuse it. Your particles could be handled by reusing 50 objects in a circular buffer.

On mobile devices this really matters to get a stable frame rate and good user experiance.

[hm_]

How can I change the size of the particles when in a specific state. for example this.game.particles.size = Math.random() * 10 + 5; I tried putting this in the running handleinput method but it wouldn't change the size. How do you go about this?

[adhochero]

great stuff. but dang one typo breaks everything with out an error code. had to take an hour just to find it XP