Vertical Platformer Game Tutorial with JavaScript and HTML Canvas
591,241
Published 2022-11-07
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)
-
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:
-
Bro i keep falling asleep and always get these multiple hour long videos of creating games
-
I woke up here again!
-
I love these videos, I do. But I am getting g sick and tired of waking up to them
-
Fell asleep watching Kurtis Conner, woke up here. Feelin’ good.
-
accidentally watched over 3 hours of this while asleep. edit: damn this is actually good wtf
-
Why the fuck do i keep waking up to this specific video. This is the 4th time
-
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.
-
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 '^^
-
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
-
I appreciate the production quality of these videos.
-
Your tutorials are so detailed and easy to understand. I appreciate your work on these videos !
-
Excellent OOP principles in a fun and practical way! Thank you! 👏👏
-
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!
-
omg 1 minute in and already know this makes for a great weekend project thanks!
-
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
-
Seriously the quality of your videos are so good! Story-telling is perfect.
-
You're stuff is amazing! Very informative. Also, could you tell about how you would go around making a replay system for a game?
-
Fantastic and professional video, thank you.
-
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 .
