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

Comments

Syntax Logic says:

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

freeCodeCamp.org says:

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

ujwal krishna says:

Is this for absolute beginner?

Myles Gmail says:

Thx, I tweeted this video!!!

PothOnProgramming says:

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

Rashid Ali says:

Can’t see coding clearly !

Ramsey Jordan says:

Nice project, I will definitely give this a shot

J T says:

Found my new JS guy.

Dejan Markovic says:

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

mc beaumarchais says:

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

Niko says:

This is not meant for beginner programmers right ? I have been watching for 20 minutes now and this is all so confusing even though I know js,html and css syntax. Like it feels like the tutorial starts mid project, and getting the context and such is not told how to do. Maybe I am just dumb or impatient, could be that too

OTP Matthew says:

Losing brain cells

Nathan MacDonald says:

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

Samuel says:

This is a cool tutorial, and I’m excited to get into it. But it starts a bit beyond the beginner stage, even if you know how the basics of internal javascript stuff. So far I think my main confusion is in the “document elements” area. I’m definitely going to search around to fill in the gaps, and hopefully will get back to continue with this tutorial within 24 hours. If I do, I’ll post the insights that helped me get started.

Gregory Ling says:

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!

Jack Erol says:

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

prashanth kumar says:

wow really awesommmmeee ….
I want more tuts like this

Write a comment

*

Human Verification: In order to verify that you are a human and not a spam bot, please enter the answer into the following box below based on the instructions contained in the graphic.


Do you like our videos?
Do you want to see more like that?

Please click below to support us on Facebook!

Send this to a friend

▷ Other ReviewsVehicles   Show Cars   Motorbikes   Scooters   Rims & Tires   Luxury BoatsFashion   Sunglasses   Luxury Watches   Luxury Purses   Jeans Wear   High Heels   Perfumes   Jewellery   Cosmetics   Shaving Helpers   Fashion HatsFooding   Chef Club   Fooding Helpers   Coktails & LiquorsSports   Sport Shoes   Fitness & Detox   Golf Gear   Racquets   Diving Equipment   Ski Gear   Snowboards   Surf Boards   Rollers & SkatesEntertainment   DIY Guides   Zik Instruments   Published Books   Music Albums   Cine Movies   Trading Helpers   Make Money   Fishing Equipment   Paintball Supplies   Trading Card Games   Telescopes   Knives   VapesHigh Tech   Flat Screens   Tech Devices   Camera Lenses   Printers   USB Devices   PC Hardware   Network Gear   Cloud Servers   Software Helpers   Programmer Helpers   Mobile Apps   Hearing AidsHome   Home Furniture   Home Appliances   Beddings   Floor Layings   Barbecues   Aquarium Gear   Safe Boxes   Office Supplies   Security Locks   Cleaning ProductsKids   Baby Strollers   Child Car Seats   Remote ControlledTravel   Luggages & Bags   Airlines Seats   Hotel Rooms   Fun Trips   Cruise Ships   Mexico Tours