JavaScript GameDev Tutorial - Code an Animated Physics Game [Full Course]

Learn how to code a JavaScript Game featuring interesting physics and AI mechanics.
What makes a great game? Is it about beautiful, polished visuals or about gameplay that feels good and responsive? Is it about unique ideas, or maybe it's the little details, special secrets and Easter eggs? What are the ingredients in a perfect game development recipe? Let's explore fantasy mushroom forest theme and learn all the techniques you need to make your own 2D games with vanilla JavaScript, HTML5, CSS3 and HTML Canvas.
✏️ Course created by @Frankslaboratory
⭐️ Assets ⭐️
All project images: www.frankslaboratory.co.uk/do...
Background: www.frankslaboratory.co.uk/do...
Overlay: www.frankslaboratory.co.uk/do...
Player: www.frankslaboratory.co.uk/do...
Egg: www.frankslaboratory.co.uk/do...
Toad single: www.frankslaboratory.co.uk/do...
Larva: www.frankslaboratory.co.uk/do...
Toads: www.frankslaboratory.co.uk/do...
Bonus images, environmental art, HQ separate pieces in PSD format etc: www.frankslaboratory.co.uk/do...
You will learn:
- How to implement a very simple AI to make the creatures feel alive
- How to control the FPS of our game and how to measure time to trigger periodic events
- How to restart the game by pressing a button
- How to apply collision detection, resolve collisions and use that to simulate physics
- How to use the built-in drawImage method to draw randomized game environments and animated characters from a sprite sheet
- How to capture mouse position and animate an 8 directional sprite sheet based on the relative position between the mouse and the player character
- How to use HTML5, CSS3 and plain vanilla JavaScript to build a game from scratch. We will write and understand every line of code, we will not rely on any external frameworks or libraries
... and much more
⭐️ Contents ⭐️
⌨️(0:00:00) Intro
⌨️(0:01:01) Basic setup
⌨️(0:04:51) Object oriented programming in JavaScript
⌨️(0:09:14) Drawing the player
⌨️(0:16:24) Mouse controls
⌨️(0:22:24) Making the player move
⌨️(0:30:04) Creating obstacles
⌨️(0:36:37) Non-overlapping obstacles
⌨️(0:43:12) Randomized images from a sprite sheet
⌨️(0:48:27) Positioning rules
⌨️(0:54:26) Reusable collision detection method
⌨️(0:58:31) Let's add physics
⌨️(1:06:38) 8-directional sprite animation
⌨️(1:10:52) Animation angles
⌨️(1:17:58) Debug mode
⌨️(1:21:31) Player movement boundaries
⌨️(1:24:20) FPS
⌨️(1:33:59) Egg class
⌨️(1:38:52) Periodically adding new eggs
⌨️(1:45:51) Egg physics
⌨️(1:51:26) Draw order
⌨️(1:59:44) Enemy class
⌨️(2:11:03) Larva class
⌨️(2:14:30) Egg hatching
⌨️(2:24:28) Larva sprites and collisions
⌨️(2:29:06) Gaining score points
⌨️(2:31:47) Particle effects
⌨️(2:40:42) Particle motion
⌨️(2:47:46) Randomized enemy skins
⌨️(2:52:09) Win and lose condition
⌨️(3:02:41) Restart game
🎉 Thanks to our Champion and Sponsor supporters:
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Erdeniz Unvan
👾 Justin Hual
👾 Agustín Kussrow
👾 Otis Morgan
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

[@Frankslaboratory]

Hi everyone. Hope you have fun with the project. If you have any questions, let me know! You can take the art assets and use them for other games as well if you want 😊

[@kaycampbell364]

thanks for sharing

[@volkan8583]

Ty for great and detailed tutorial. Now i can't sleep :)

[@soniferous]

Thank you!

[@rrahll]

thanks man!

[@jokerbanny]

Thank you ! 🙏

[@skyblue5220]

Yes! Finally a course I've been looking for ages! You're my hero!

[@birdiewd]

I am just starting to learn about game engines and watching this really helped me understand what is happening in the background, but not only that, WHY it is happening and that is an amazing insight. Thank you!

[@mikahoy]

This is one hell of a tutorial that I found, it explains all the code function in details. Subscribed!

[@a.c.6344]

I love you guys and your videos, will definitely watch after I'm done with your previous tutorial, thank you for your passion and for your hard work!

[@tigeranimal4310]

Your project has been an incredibly fulfilling experience! I've had the pleasure of delving into the depths of the navigator and it's been a thrill to work on. Thank you for this wonderful opportunity!🤩🤩🤩🤩🤩🤩🤩🤩🥳🤯

[@CannigiaLaluw]

What's great about this is how he also explains important JS topics as he builds the game. Subbing to Franks Laboratory!

[@Frankslaboratory]

Glad you found some value :)

[@namthanhnguyen2554]

This's awesome. You're excellent teacher. I learnt a lot from your detailed tutorial. Thanks for your hard work

[@broadshare]

The real js games master. Thank you for sharing I have learned a lot. Looking forward to tutorial using typescript

[@hareshwedanayake7427]

Brilliant tutorial! I learned a lot about es6 javascript and oop while getting to create a pretty cool game. Thanks Frank!

[@comoyun]

Wow! he is my favorite KZbinr. Glad to see you here, Frank! and thank you so much for the tutorial it really helped me a lot!

[@Frankslaboratory]

Hi Humoyun! :)

[@oppaedits9819]

So yesterday I got one of his video in recommendations as I love creating games I subscribed to his channel and now he is here🤠 I'm excited

[@tigeranimal4310]

Really interesting movie, the channel can be ranked as the best open university for beginners. thank you very much for your generosity.

[@GonnaLoveThis]

This tutorial video is so details on the effect/result of each codes.🤩

[@sanjeev3591]

looking forward to learning from this without failing to complete

[@ajgunn3277]

i love your work. this video is very exciting and (haven't got through it yet) seems quite complete. Loving your accent too! Where you from? I'm just starting off in three.js and thanks to you and other heroes I'm getting a HUGE jump start on this, for free, to empower more people and invite more into the technology. You rock brother! Keep it up!

[@seftel_]

So pumped for this!!

[@mahmudulislam5303]

Woow. This was super awesome. A must watch and must do.

[@mateyrodian1900]

I did it ! Good video, I learned a lot about JavaScript and game development techniques. I will make the video game about Zombies. Thank you for the video.

[@salva6740]

I did it! very nice course! it has content until the last minute, thank you very much!

[@Frankslaboratory]

Hi Salva, well done, congratulations on completing the project!

[@larklandlover5252]

I did it, thankyou so much for putting this together, i had a wonderful time following along and you are a wonderful teacher, thanks again 🥳🥳.

[@codeNameMoose907]

Hey There @larklandlover5252. Did you have any issues with the hatchlings? Thanks!

[@gardenkittens]

That's awesome. Everyone please follow Frank's laboratory. His channel is awesome❤

[@christopherc4526]

Franks Lab is a great teacher. So glad to see him on Free Code Camp

[@Frankslaboratory]

Thank you Chris

[@n30t4zm4n]

I did it. the check collision logic is really neat

[@gueyenono]

With an intro like this, you've got a like from me sir.

[@kiettrantuan9004]

Thank you for your videos. Great lessons btw.

[@littlecube922]

This channel is the best channel on youtube

[@forati]

I love your videos. Thank you for sharing.

[@h989l]

this guy is the reason i am learning 2d graphics programming using canvas 2d api.

[@Frankslaboratory]

Glad you feel inspired !

[@znttthefox369]

I don't know how to explain it but this thumbnail was so good that I had to click. I'm not even interested in game creation.

[@ozkan7647]

It is our thanks to you to spending your time with us.

[@rmfcity]

Amazing tutorial for beginnig Game developers. I can't believe this is free.

[@SiliconValleyDeveloper]

Great teacher Frank, next part please

[@andrewcuster6498]

I do love your videos, and I learn a lot from them. I had a real problem with understanding classes, like does an instance only happen real fast then it's done? Really. Your lessons helped me break through all of that, now I can go even further. Thank you.

[@KlausDSanz]

A class is like a blueprint for an object. You run the constructor to create a new object from the blueprint with new. e.g: new Player(this) is creating one instance of player class and storing into a variable to be accessed later.

[@afasico9669]

Instance and instant are 2 different words with different meanings

[@tedreams]

Thanks so much ❤but now I'm confused because I have so much to learn😂

[@mahendranath2504]

Thank you so much 👋👍🎉🥳👏🎊🫡🙏🏻👌🤝😎✌️🫰🏻

[@WinterPack]

really posted 11 mins ago? (in the time when i started watch).. i`m just want create my own game and when i started i find some way how it work and it way was so full and easy to understand in same time... after all thank you a lot for the video.

[@adammcgarrity28]

Thank you!

[@Talha27]

Thank you very much.

[@beardedraider4751]

I love that tie!!!!

[@Frankslaboratory]

Glad you like it :D

[@grotsunfull]

Awesome!

[@user-zi3oe8ep3g]

Hats off❤️

[@paws7983]

SUPER!!! AWESOME!!!

[@MrFirefox001]

i did it!! thx

[@jaloliddinhaqnazarov]

Very very good thank you a lot

[@jediTempleGuard]

Thanks a lot 👍

[@vedbhanushali608]

great sir 👍🏻

[@CTILET]

Very intresting i subscribed

[@bharath2508]

javascript and a game. wow, plz teach electron js too

[@taw_andrew]

Great tutorial! My deltaTime = 1000 / 60:16.6

[@murodnazarov3109]

Great

[@user-hq3oz3tg8p]

Awesome video! Excuse me, will there be a link to the finished code?

[@AveN7ers]

What a coincidence. I'm finishing his previous course uploaded here

[@Frankslaboratory]

Well done

[@magnetto90]

Thanks

[@magnetto90]

I did it!

[@nil_at]

I did it ;) Thanks for the tutorial ;) But where is the link to the extended version with animations and stuff?

[@Frankslaboratory]

Hi, well done, congratulations on completing the project! All related links to bonus content are on my KZbin channel.

[@circlesdigital]

Hi What is the best programming language to learn as a Marketer?

[@najorg2023]

The BASIC SETUP section, that was quick, how can we follow or can we download those starter code?

[@Frankslaboratory]

Hi, you can pause the video, it's just a generic webpage and canvas gets centered by CSS. If you struggle with that, Free Code Camp have many great beginner friendly courses, this class would be too advanced for you

[@colwarsstudiobrickfilmandm8580]

there is a library called kaboomjs that handles collision and physics

[@Frankslaboratory]

True, you will not understand how the logic works with a library though. It's good if you want something build fast and you don't care about learning

[@Radu]

Nice one :-)

[@Frankslaboratory]

Thanks Radu

[@MiguelBenevides]

Great video but where's the code repository?

[@Mewto2012]

im new, how star to instyal java? do you have a fisrt video? hablo español pero veo que esto me servira

[@IzaiasdeOliveiraElias]

Wonderful, perfect!

[@joaoalourencoaffonso4986]

freecodecamp, 2023: Animated Physics Game with JavaScript - Tutorial freecodecamp, 2024: AI with mincecraft - Tutorial freecodecamp, 2025: Quantum physics with your pocket calculator - Tutorial freecodecamp, 2025: How to summon Galoron the Soul-Eater using a pencil - Tutorial freecodecamp, 2026: How protect yourself from Galoron with a OH NO HE GRABED ME! HE GRABED ME! NO! AHHHHHHHHHHHHH!!!!!!!!!!!!!!!!........- Tutorial

[@Reaper9225]

Looking forward to 2025

[@shanelw5]

Hi everyone. I'm running into a weird error and have re-watched sections of the video a couple of time. So I'm getting the larva hatching from the eggs, however I'm also getting random larva that pop in and then out after a couple of seconds. I'm checked the debugger and can't figure out where this error is coming from. Any ideas?

[@razorjhon2622]

hello , i have a question can this be easier with three js library ? please answer

[@hasithacooray1101]

👍

[@simonbullado]

wahoooo :) :) :)

[@xianchengyin8489]

"It's a gift for you and thank you for spending time with me" 👽

[@velamvarsha786]

can someone help me find the source code? could you attach the link of the source code?

[@guilhermemm-dev]

what is the code repository please?

[@mindmon8044]

I did it from Indonesia

[@codewithrohit2927]

First and make a MERN Stack course for beginners

[@aetheredits7966]

is it possible to do this in react.js

[@nimahanna1709]

I think I recognize the egg for a duck roguelike console game

[@Frankslaboratory]

Which one

[@awannn1082]

my hatching time displayed above the egg doesn't work according to the time rule, at my place it feels like there is a distance of 2s instead of 1s

[@awannn1082]

and the solution i did is in the update method egg in hatching i did "this.hatchTimer += deltaTime * 2", for a while i think this is the best solution

[@codeNameMoose907]

Any suggestions?? All was going well until I came to the hatchlings in the Egg Class. I cannot get the larva to appear on the canvas, and I re-did the section 3 times as well as the larva class. I get no errors, and it seems like the draw and render are ok. I tried adjusting the timer, too. 🤷🏻‍♀ Anyone run into a problem of the hatchlings not showing up at all?

[@Frankslaboratory]

Hi Dina, you need to use console log to inspect all objects involved and find out what is wrong that way. In most cases it's something like using 'undefined' when calculating the position of the object, so JavaScript doesn't know where to draw it. I would start by console logging the hatchlings array and check if all properties have values and if there are any hatchlings being added to the array at all. Then depending on these findings you go from there.

[@codeNameMoose907]

@@Frankslaboratory Aww, THANK YOU for replying, Frank! 🙏🏼 I've still no little larva showing yet. I did use console log for "this.game.eggs" in the hatchling lesson--I have no "undefined" there (and I open the arrays, too). Ah, yes, good idea--I'll take a look at all the other objects. But, I continued on with the course, and I have the collision circles working. There is just no larva pictures (but I know I the pictures works--when not hidden in css, I can see them in the top left corner of the browser). I'm determined to solve this! I'm having so much fun with your course! Thanks again, Frank! -Dina (Alaska)

[@codeNameMoose907]

"this.sprtieY = this.collisionY - this.height * 0.5 - 50". 😖 LOL! It works now! Imagine that!

[@aleksandrmatyka3118]

Could you pls provide link to the code?

[@animeshbiswas2754]

I did it

[@Frankslaboratory]

Well done!

[@yeti_code_camp]

god bless that beautiful soul who subscribes and make my day ❤❤ Thank you so much for spreading happiness

[@shofyankhan]

2:06:38 i dont understand why enemies only appear once in my code, its not looping like it should be

[@Frankslaboratory]

Console log can help, check your arrays and inspect the objects. Maybe their x and y is undefined and JavaScript doesn't know where to draw them. It can be things like that.

[@edgarlopz241]

hi! where i can see the code?

[@Souleater127]

did it in 5 days. 1 thing i dont understand? why console.log writes 'Array' and 'Object', instead of the Name of the Array or Name of the Object, like his console.log shows.

[@Frankslaboratory]

Hi. My guess would be that you are using a different browser than me. Different browsers can have slightly different behaviour

[@Souleater127]

@@Frankslaboratory Hi Franks, thanks. using Firefox 110.0.1 64bit, really appreciate the tutorials.

[@pradipdutta7851]

PrereQuisite

[@piggymaster3209]

2:31:40

[@rikm.harrison3991]

First here 😅

[@raghavbalaji6795]

Third in minute

[@Ty1er]

Src code ??

[@jeanrodrigues6249]

economia

[@JokeryEU]

all games are in a browser

[@outerspacesoph4522]

source code?

[@jeanrodrigues6249]

a+u

[@dhrambiragarwal3520]

Hello

[@kartiknagrale1479]

Nobody said I did it and that's not me either

[@jeanrodrigues6249]

a+u+m+a

[@unpredictable468]

Lol

[@anushk191]

hi

[@jeanrodrigues6249]

hy

[@jeanrodrigues6249]

nome

[@dojnishi]

ja nawet nie wiem jak kolo sie nazywa a juz wiem ze polak rodak 😅

[@jeanrodrigues6249]

x+y