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: https://www.frankslaboratory.co.uk/downloads/109/all_project_images.zip
Background: https://www.frankslaboratory.co.uk/downloads/109/background.png
Overlay: https://www.frankslaboratory.co.uk/downloads/109/overlay.png
Player: https://www.frankslaboratory.co.uk/downloads/109/bull.png
Egg: https://www.frankslaboratory.co.uk/downloads/109/egg.png
Toad single: https://www.frankslaboratory.co.uk/downloads/109/toad.png
Larva: https://www.frankslaboratory.co.uk/downloads/109/larva.png
Toads: https://www.frankslaboratory.co.uk/downloads/109/toads.png
Bonus images, environmental art, HQ separate pieces in PSD format etc: https://www.frankslaboratory.co.uk/downloads/109/bonus_image_source_files.zip

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: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

source

This Post Has 34 Comments

  1. 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 😊

  2. 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!

  3. dojnishi

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

  4. WilliamCollier

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

  5. Mewto2012

    im new, how star to instyal java? do you have a fisrt video?

    hablo español pero veo que esto me servira

  6. Broadshare life

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

  7. Dashnow

    This channel is the best channel on youtube

  8. R Rahl

    Frank is the best! Thanks for another awesome tutorial freeCodeCamp and Frank!

  9. A. C.

    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!

  10. Abc H

    And whoever turns away from My remembrance – indeed, he will have a depressed life, and We will gather him on the Day of Resurrection blind."

    He will say, "My Lord, why have you raised me blind while I was [once] seeing?"

    [ Allah ] will say, "Thus did Our signs come to you, and you forgot them; and thus will you this Day be forgotten."

    And thus do We recompense he who transgressed and did not believe in the signs of his Lord. And the punishment of the Hereafter is more severe and more enduring.
    (Quran 20:124-127)

    And whoever desires other than Islam as religion – never will it be accepted from him, and he, in the Hereafter, will be among the losers.
    (Quran 3:85)

    And I did not create the jinn and mankind except to worship Me.
    (Quran 51:56)

    And woe to those who have disbelieved from their Day which they are promised.
    (Quran 51:60)

  11. Abc H

    Satan threatens you with poverty and orders you to immorality, while Allah promises you forgiveness from Him and bounty. And Allah is all-Encompassing and Knowing.

    (Quran 2:268)

  12. Abc H

    O mankind, worship your Lord, who created you and those before you, that you may become righteous –

    [He] who made for you the earth a bed [spread out] and the sky a ceiling and sent down from the sky, rain and brought forth thereby fruits as provision for you. So do not attribute to Allah equals while you know [that there is nothing similar to Him].
    (Quran 2:21-22)

    How can you disbelieve in Allah when you were lifeless and He brought you to life; then He will cause you to die, then He will bring you [back] to life, and then to Him you will be returned.

    It is He who created for you all of that which is on the earth. Then He directed Himself to the heaven, [His being above all creation], and made them seven heavens, and He is Knowing of all things.
    (Quran 2:28-29)

    Those who have believed and whose hearts are assured by the remembrance of Allah . Unquestionably, by the remembrance of Allah hearts are assured."
    (Quran 13:28)

    And whoever turns away from My remembrance – indeed, he will have a depressed life, and We will gather him on the Day of Resurrection blind."

    He will say, "My Lord, why have you raised me blind while I was [once] seeing?"

    [ Allah ] will say, "Thus did Our signs come to you, and you forgot them; and thus will you this Day be forgotten."

    And thus do We recompense he who transgressed and did not believe in the signs of his Lord. And the punishment of the Hereafter is more severe and more enduring.
    (Quran 20:124-127)

    And whoever desires other than Islam as religion – never will it be accepted from him, and he, in the Hereafter, will be among the losers.
    (Quran 3:85)

    And I did not create the jinn and mankind except to worship Me.
    (Quran 51:56)

    And woe to those who have disbelieved from their Day which they are promised.
    (Quran 51:60)

  13. Abc H

    Say, "O People of the Scripture, come to a word that is equitable between us and you – that we will not worship except Allah and not associate anything with Him and not take one another as lords instead of Allah ." But if they turn away, then say, "Bear witness that we are Muslims [submitting to Him]."
    (Quran 3:64)

    Indeed, the religion in the sight of Allah is Islam. And those who were given the Scripture did not differ except after knowledge had come to them – out of jealous animosity between themselves. And whoever disbelieves in the verses of Allah, then indeed, Allah is swift in [taking] account.
    (Quran 3:19)

    And whoever desires other than Islam as religion – never will it be accepted from him, and he, in the Hereafter, will be among the losers.
    (Quran 3:85)

    They have certainly disbelieved who say, " Allah is the Messiah, the son of Mary" while the Messiah has said, "O Children of Israel, worship Allah, my Lord and your Lord." Indeed, he who associates others with Allah – Allah has forbidden him Paradise, and his refuge is the Fire. And there are not for the wrongdoers any helpers.
    (Quran 5:72)

    They have certainly disbelieved who say that Allah is Christ, the son of Mary. Say, "Then who could prevent Allah at all if He had intended to destroy Christ, the son of Mary, or his mother or everyone on the earth?" And to Allah belongs the dominion of the heavens and the earth and whatever is between them. He creates what He wills, and Allah is over all things competent.
    (Quran 5:17)

    But the Jews and the Christians say, "We are the children of Allah and His beloved." Say, "Then why does He punish you for your sins?" Rather, you are human beings from among those He has created. He forgives whom He wills, and He punishes whom He wills. And to Allah belongs the dominion of the heavens and the earth and whatever is between them, and to Him is the [final] destination.
    (Quran 5:18)

    The Messiah, son of Mary, was not but a messenger; [other] messengers have passed on before him. And his mother was a supporter of truth. They both used to eat food. Look how We make clear to them the signs; then look how they are deluded.
    (Quran 5:75)

    They have certainly disbelieved who say, " Allah is the third of three." And there is no god except one God. And if they do not desist from what they are saying, there will surely afflict the disbelievers among them a painful punishment.
    (Quran 5:73)

  14. Zaruho

    Oh yes baby! This is what I was waiting for, woo!

  15. Khumoyun

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

  16. Christopher C

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

  17. 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

  18. Cannigia Laluw

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

  19. Sky Blue

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

Leave a Reply