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:

🔗Working example:

⭐️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:

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:


Syntax Logic says:

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

Want more game dev tutorials? Check out this playlist:

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


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

Please click below to support us on Facebook!