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:

Nguồn: https://inst-wd.com/

Xem thêm bài viết khác: https://inst-wd.com/game/


  1. do not scale a canvases height and width attributes to match the screen size. With that method, the larger the canvas, the more the CPU with the 2d context has to do to keep up with the drawing. You should pick a size, keep it that size, and scale it up with CSS transforms and pixelate it using css image rendering. This way, you are always drawing the same canvas. In my instance, i am drawing a very small canvas. 240×136 and scale it to be full window size.

  2. Hi, Bro some guys mentioned about after 20-minute mark you are throwing in codes that are not really explained initially. To avoid some confusion on our part what are the prerequisites of this course?


Please enter your comment!
Please enter your name here