• Tuesday , 26 May 2020

Create a Platformer Game with JavaScript – Full Tutorial

Code Canyon



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

Original source

3d Ocean

Related Posts

36 Comments

  1. PothOnProgramming
    July 3, 2019 at 13:24

    To see more videos from the Poth On Programming Video, visit my channel!

  2. Monsters Gaming
    July 3, 2019 at 13:24

    I did something cruel… I went to your website and press ctrl+s and I saved it and now I got all the files of the game I mean I have all css and js and JSON files without that link 😂😂😂

  3. anas aldolimi
    July 3, 2019 at 13:24

    what is the library that you have been using because i do'nt think this is just the javascript
    without any kind of library

  4. bigchunk1
    July 3, 2019 at 13:24

    I tried to deconstruct that html file to see if I could play around with the individual JavaScript components. It's pretty complicated. I really wish you would have spent some more time talking about the structure of your project as it relates to the html. I could not even figure out how the main script gets executed, just added to an appendChild() list to do ?? with. Your end result is nice, but if I can't get the project to a state where I can actually mess around with it, that's a real non-starter.

  5. Stephen Davies
    July 3, 2019 at 13:24

    Great Tutorial, Im trying to update the code as I follow along, all those pesky vars in there! its 2019 lets have some lets and consts!

  6. Kobe Simons
    July 3, 2019 at 13:24

    can i make this in sublime text?

  7. Timo Müller
    July 3, 2019 at 13:24

    You are my rescue. Thank you.

  8. Coding with Basir
    July 3, 2019 at 13:24

    Your style of teaching inspired me to cast a series on learning js for very beginner developers at https://youtu.be/2gkp7JvcMaI . Thanks man

  9. alex Barra
    July 3, 2019 at 13:24

    dude i just want to watch all this video and cry after it xD so beautifull and so complicated xD

  10. 刘金玉编程
    July 3, 2019 at 13:24

    JavaScript非常强大,未来前景非常好!游戏运用也越来越高大上了

  11. 刘金玉编程
    July 3, 2019 at 13:24

    js develop game is wonderful

  12. aylictal
    July 3, 2019 at 13:24

    how would you change updateAnimation() if say there were many many states the character could possibly be in?

    I'm looking for better state management than simple if else logic here. say the player has a melee attack option, but also has a spell casting option, and then also has a fly option, and then also has a burrow option, and then also has a transform option and then also has an ETC ETC.

    The if else logic will crumble into a pile of spaghetti code.

    Whats a better solution?

  13. Nikhil Chaturvedi
    July 3, 2019 at 13:24

    How to trap the rabbit any code of that

  14. Ali Alavi
    July 3, 2019 at 13:24

    hi please tell me what free engine is good for coding javascript. what is this engine in this video?

  15. Nicholas Maniccia
    July 3, 2019 at 13:24

    I think the reason why this seems like it's not a beginners tutorial, is because you have to pause a lot and read the github code. That video time length is not the actual tutorial length. It is an amazing tutorial I always struggled on how to structure my code as my canvas game got bigger, and I was always looking for best practices, but this one fit my project and theory goal. I am fusing it with my code and got it to work on my server, but instead of tutorial selection I have a list of games and demos.

  16. Cawle _xyz
    July 3, 2019 at 13:24

    This is really really unuseful piece of junk tutorial 🖓🖓🖓🖓🖓

  17. Cristobal's Daily Videos
    July 3, 2019 at 13:24

    I'm 13 and I'm going to be a game designer and a game developer when I'm older, hope I'm famous

  18. Derrick Graham
    July 3, 2019 at 13:24

    I need this. Thank you.

  19. William Peragine
    July 3, 2019 at 13:24

    I don't want to be too harsh here because this is a good tutorial that obviously took a lot of work, but damn dude, more than 20 minutes into this how to video and I haven't even touched the keyboard yet. It's just all you talking about why you made high level decisions, decisions that many of us won't be able to grasp out of context, because we don't even know how to make a platformer at all, let alone understand why you may need to organize everything the way you did.

    Anyways, this is still a great video, but it kinda feels like you're telling me how you created a great platformer with javascript rather than how to create a great platformer with javascript. It would be nice if you walked through the steps with us, rather than just showing us what you already did.

  20. MuabYT
    July 3, 2019 at 13:24

    This is old javascript. Constructor functions are very outdated. Also there are classes now

  21. Mainframe
    July 3, 2019 at 13:24

    why you are not using new js standards (ES6+)?

  22. OTP Matthew
    July 3, 2019 at 13:24

    Losing brain cells

  23. mc beaumarchais
    July 3, 2019 at 13:24

    I can't even get the starting code to run.

  24. Myles Gmail
    July 3, 2019 at 13:24

    Thx, I tweeted this video!!!

  25. Nathan MacDonald
    July 3, 2019 at 13:24

    So where do I get the initial files that he starts off with?

  26. Gregory Ling
    July 3, 2019 at 13:24

    A couple improvements:
    update:function() {} can all be shortened to update(){} inside objects. The :function is inferred.
    Also, in the engine, an arrow function is not necessary. You can write this.run.bind(this) which binds the current this context to the function so it runs with engine context and not window context.
    Otherwise, great video!

  27. J T
    July 3, 2019 at 13:24

    Found my new JS guy.

  28. Jack Erol
    July 3, 2019 at 13:24

    what software do I need for this? how do I get it?

  29. ujwal krishna
    July 3, 2019 at 13:24

    Is this for absolute beginner?

  30. prashanth kumar
    July 3, 2019 at 13:24

    wow really awesommmmeee ….
    I want more tuts like this

  31. Syntax Logic
    July 3, 2019 at 13:24

    I would love to see gaming tutorials using an HTML5 game engine such as Phaser 3.

  32. Dejan Markovic
    July 3, 2019 at 13:24

    I didnt start to watch, i will give you sub. Thank you for this!

  33. Ramsey J
    July 3, 2019 at 13:24

    Nice project, I will definitely give this a shot

  34. Rashid Ali
    July 3, 2019 at 13:24

    Can't see coding clearly !

  35. Ojasvi Singh 786
    July 3, 2019 at 13:24

    👏👏👏👏

  36. freeCodeCamp.org
    July 3, 2019 at 13:24

    Want more game dev tutorials? Check out this playlist: https://www.youtube.com/playlist?list=PLWKjhJtqVAbmqFs83T4W-FZQ9kK983tZC

Leave A Comment

You must be logged in to post a comment.