Vertical Platformer Game Tutorial with JavaScript and HTML Canvas

526,609
0
Published 2022-11-07
This course was made possible thanks to Hostinger (a really great hosting service). Save up to 91% of by using the discount code CHRISCOURSES on checkout at www.hostinger.com/chriscourses

Demo: chriscourses.xyz/

Game assets: drive.google.com/drive/folders/1hqYFTOvtzxQQuFZPJj…
GitHub source code: github.com/chriscourses/vertical-platformer
Tiled map editor: www.mapeditor.org/

Warrior Art by Luiz Melo: luizmelo.itch.io/medieval-king-pack-2
Background Art by Trixie: trixelized.itch.io/starstring-fields

0:00 Project summary
0:58 Project setup
8:55 Domain setup
16:15 Gravity
33:35 Player movement
42:50 Background sprite
57:22 Collision blocks
1:29:54 Collision detection
1:51:31 Sprite animation
2:16:19 Hitbox implementation
2:32:09 Sprite swapping
2:56:33 Platform jumping
3:11:27 Horizontal camera panning
3:31:13 Vertical camera panning
3:41:06 Launch final product to Hostinger

All Comments (21)
  • @ChrisCourses
    In regards to having your game run on a live URL, I personally believe Hostinger is the the best shared hosting solution you can find at the moment—it's much simpler to set up than other solutions like GoDaddy and Bluehost (I've used both of these plenty of times throughout my 10 year development career), and the overall interface is cleaner too. This is the only video of mine where you can get a deal with them right now, so for a discounted rate, you can use www.hostinger.com/chriscourses and the coupon code CHRISCOURSES :_jumpman:
  • @cedric_mllr
    Bro i keep falling asleep and always get these multiple hour long videos of creating games
  • @m1kegame_dev456
    I love these videos, I do. But I am getting g sick and tired of waking up to them
  • @micemincer
    edit: So you people know - this is the only yt channel with 0 - 100 tutorials on this subject and without clowning, with some tolerable product placement and with professional content and host. Better to download so it never get lost.
  • @mohamed745600
    I appreciate the production quality of these videos.
  • @trixelized912
    It's surreal gaining interest in web game development and seeing your own stuff pop up. Thank you for using my tileset!! I never expected people to like it all that much, I mocked it up in a few days '^^
  • @ej3fm494
    Your tutorials are so detailed and easy to understand. I appreciate your work on these videos !
  • @tonussi
    Seriously the quality of your videos are so good! Story-telling is perfect.
  • dude thank you so much for this tutorial, I came from c/c++ to java script, and I was hating it like crazy, because I had no main function and while loop, and the for loops will crash on my side constantly, the way you are explaining java script makes a lot of sense, thank you!
  • @collinsk8754
    Excellent OOP principles in a fun and practical way! Thank you! 👏👏
  • @nikolaikilt
    I am loving your clear explanations and how you go through the code. It is very fun to learn like this! Keep it up!
  • @pabloqp7929
    omg 1 minute in and already know this makes for a great weekend project thanks!
  • @FoxSock
    i dont know how i got here, i dont know how i got 11 minutes in with no fucking clue that i was even watching this, but i feel marginally smarter, so thank you
  • Simply grateful for this great tutorial and all your background work to complete it and share it.
  • @spanfabrik
    Chris, the effort, time and love you put into your tutorials is VERY MUCH appreciated. Words can hardly express how much I appreciate what you are publishing here on this channel. The code is easy to read and easy to follow along. For me as a former C# developer (about 12 years ago, back in the days) this is very helpful. I wanted to write a ToDo-List app using HTML and JavaScript. Then I stumbled upon your Youtube channel, now I seriosly need to create a 2d platformer :). After I am done with this course here I will definitely check out the premium stuff on your homepage <3
  • It Tooks me 2 days to understand and built this project by your video very nice video and explanation keep growing may your channel get a million subscriber .
  • @vitoralecrim
    Hello, fantastic class! I'm really enjoying it! I have a question. Once I complete the entire project, I'd like to replace the warrior sprite with one I discovered, but it has a different height. Is there a method to modify the crop box in order to scale any sprite height to a specific size for the player sprite? This way, I can easily switch sprites without concerning myself with their actual dimensions.
  • @tobbe8287
    What tool do you use to draw arrows and lines on the screen when demonstrating and explaining?