Create a Platformer Game with JavaScript – Full Tutorial



Learn how to create a platformer game using vanilla JavaScript.

First, learn to organize the code using the Model, View, Controller (MVC) strategy and the principles of Object Oriented Programming (OOP). Then, learn how to program movement, draw a tile map, and detect collision. Finally, see how to animate the sprites, load levels, and collect items.

💻Code and assets: https://github.com/frankarendpoth/frankarendpoth.github.io/tree/master/content/pop-vlog/javascript/2018/006-rabbit-trap

🔗Working example: http://frankpoth.info/content/pop-vlog/javascript/2018/006-rabbit-trap/rabbit-trap.html

⭐️Course Contents ⭐️
⌨️ (00:00) Part 1: Organization
⌨️ (14:38) Part 2: Movement
⌨️ (51:25) Part 3: Tile Map
⌨️ (1:04:30) Part 4: Tile Based Collision Detection And Response
⌨️ (1:29:08) Part 5: Sprite Animation
⌨️ (1:53:22) Part 5 1/2: Tunneling
⌨️ (2:05:34) Part 6: Loading Levels
⌨️ (1:26:59) Part 7: Collecting Items

Tutorial from Poth on Programming. Check out his channel: https://www.youtube.com/channel/UCdS3ojA8RL8t1r18Gj1cl6w

Learn to code for free and get a developer job: https://www.freecodecamp.org

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

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

source

This Post Has 49 Comments

  1. Vlad Piero

    Thanks for the great video, this is great for a newb like me…
    Trying to go to the Code & Assets, and working example pages gives me a 404 message…
    🙁

  2. Tamir Polyakov

    if anybody can't access the source codes go to his youtube channel to watch the same video and there you can access it

  3. Seng Hton

    is there a code formula that still works?

  4. Leonardo

    Code and sample isn't there anymore… 404 on both. That is sad, I wanted to follow up.

  5. HyperionBadger

    Very strangely structured video. You showed a video of a bunch of code on a screen and talked about it, similarly to how all of my professors did in school.

  6. Business Opportunity in Ruvol

    I have invented a Board Game [still unpublished and not yet out in the market] that I believe is guaranteed to be as challenging and exciting as CHESS. I called it “RUVOL.”

    It is my hope that one day Ruvol may surpass chess as the “Number One Board Game in the World.”

    The weakness of chess is it always starts in fixed positions that the opening moves become “memorizable.” In fact, not a few have so mastered the moves that they can play against their opponents “blindfolded.” It is for this very reason that the great Bobby Fischer introduced his so-called “Fischer Random Chess,” where the starting position of the pieces is “randomized” to make the memorization of openings impracticable. Fortunately, it is also for this reason that I invented Ruvol where “every game” has been calculated to be a challenging one to play.

    HOW IS RUVOL PLAYED and HOW YOU CAN MONETIZE IT?

    I detailed everything in my YouTube video. Here is the link: https://www.youtube.com/watch?v=jcqth0m3-R0

    BIG MONEY POTENTIAL IN RUVOL!

    It is worthwhile to note that the people who play chess will be the same people who will play Ruvol. In my Google search, I learned there are around 800 million chess players in the world. Even just a small percentage of these 800 million is good enough to earn big money from Ruvol either as an ONLINE GAME BUSINESS or as a PHYSICAL PRODUCT DISTRIBUTOR.

    You may contact me at: rodolfovitangcol@gmail.com.

    Thanks and God bless!

    RODOLFO MARTIN VITANGCOL
    The Ruvol Inventor

  7. Michal Mikulka

    Do you still have a code somewhere for inspiration? Cause link on GitHub doesn't work and rewinding video is much slower way as seeing original code. By the way, the video is pretty cool explained. Thanks.
    PS: Sorry for trash english

  8. 6rs7rd7ts

    First two links in description they don't work

  9. Ratpipe

    Thanks!This is the best!After 2 weeks stuck at the development,finally this is a good tutorial.
    I got some tips for you:

    Use visual tutorial,instead of write the code first than explain the code…
    you write the code live while explaining the code you write.

    <hl1>Thanks!</hl1>

    EDIT:Tile-based collision is complicated.

    Roses are red,
    Violets are blue,
    Ctrl+C,
    Ctrl+V,

  10. bruh

    exactly what I was looking for! 🙂

  11. A C2

    Your GitHub link is a 404 error. Please fix.

  12. Royer Segura

    I just needed help building a quiz game, I can see this is far beyond my understanding lmao.

  13. Waheed Alam

    Wow I am a "kid 12 year" old learn a lot man !!!. "thanks"..

  14. LazyLizard

    I have a noob question. Why are you using var instead of let? I was told by my tutor that using var in programs can lead to some errors.

  15. Phillip Chiarato

    getting a 404 on the github link, was anyone else able to find the source code from this video?

  16. liam oneill

    What software do you need to code this like what programme? thank you

  17. your heart

    Hi!. i want to ask if you can help me. i want to create a simple program/game for mobile that. when the character reach the end of screen(mobile) it will load to another map like side scroling for mobile thank you

  18. "if at any point on this video you get the feeling you are learning" xd

    It would be really cool to be able to add bookmarks to this, so as to better navigate it when reviewing.

  19. DazzlingVids

    who is in any ivy college i have alot of question reply it 🙏☺️

  20. KWC Coin

    Around 33:00 I understand the oo world. But it is strength and the weakness. It is a bit organised spaghetti Goto code old days. Unless the object one can delegate the idea to, it is very hard to follow what is going on and where to maintain the state. Now that the source git is sort of gone (at least the link is dead) it is impossible to follow.

  21. Ben Dover

    cool but i would not call this a tutorial
    it's more of a showcase

  22. Renato Mariscal

    Hi! the code for live example and code are broken. Thanks for the tutorial!

  23. emra7331

    can u please show how to make frame rate independed movment?

  24. Wapaca

    Links in description are broken, could you please update them ? Gonna start with your code as base to make my minigame 🙂

Leave a Reply