D4mations.com

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

Original source

d4mer

, , , , , , ,

36 responses to “Create a Platformer Game with JavaScript – Full Tutorial”

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

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

  12. 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?

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

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

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

Leave a Reply