Multi-room Platformer Game Tutorial with JavaScript and HTML Canvas

0:00 What we're building
0:40 Sponsor: Into the AM
1:18 Project setup
9:49 Create a player
26:49 Gravity
32:27 Player movement
45:59 Background sprite
55:38 Collision blocks
1:18:52 Collision detection
1:39:28 Sprite animation
1:55:32 Hitbox implementation
2:08:17 Sprite swapping
2:20:43 Entering doors
2:38:41 Change levels
3:02:38 Finished product
3:02:59 Next steps

#intotheam

[ChrisCourses]

Big thanks to INTO THE AM for supporting the creation of this video. Help support them and get 10% off sitewide using intotheam.com/chriscourses

[tanjiroberto]

It’s simply magical, going to sleep watching a minecraft vid and waking up to this at 4:57 AM

[quitt_]

all i did was fall asleep for 40 mins...

[dev-n-unix]

Chris, I'd like to thank you for your awesome work. This is the best channel of 2022 I found this year. Top of the top.

[pandelismanikas]

What I like the most is your code improvement over each game. Awesome staff!

[adamjankowski]

Hey I wanted to say that your tutorials are awesome. Structure of these videos is very cool for me because you divide it into sections - for example "Collision detection", "Collision blocks". I like to pause right after you end explaining what you are about to code and I code it in my own way. Thanks for beeing an inspirational creator. Have a good day and greetings from Poland.

[sora]

This is gonna be the year I get into coding, and this channel is straight up gonna be the reason for it. Top notch content and all for free, much appreciated!

[BMikel]

I am totally jaw dropped. You are incredible in JS coding.

[karanordberg]

great tutorial as a beginner I appreciate how you explain what you are doing and don't just code through as fast as you can, it is nice to see what is working and why something "breaks".

[joaocesarlima]

Another amazing tutorial! Your pace and clarity are just incredible. Your latest videos totally deserve more views!

[limitedlifetime]

I am a HTML5 JavaScript Game dev myself and I learned best way to make "dynamic sprite processing" from this great tutorial! Thanks and love 🙏

[David-And-A-Half]

The presentation on these videos really sets them apart from the average YouTube programming tutorial. Clean quality audio recording and clear, well spoken instructions elevates the final product. Great job.

[brandonjacksoon]

Chris! Awesome course! Thanks for your knowledge and thanks for sharing this knowledge with us!

[testpurpose]

his voice is amazing and so is his concise and always clear way of explanation .

[omerkaancoskun]

Thanks for all this content. Your tutorials are the best 🔥

[dantedeluca]

This is one of the best tutorials i've ever seen.

[creepychris]

this is a great tutorial. tyvm ✌I have been a web dev for 10 years but never fucked with canvas. you explain this so simply it should be pretty easy to get to grips with after this. implementing gravity like that reminds me of my first actionscript game. going to make something cool with this real soon lol. if i remember ill come back here and drop a link lol.

[BeRaikwal]

are u serious? THIS IS COOOOLLLL BY FAR THE BESTTTT PROJECT U HAVE DONE SO FAR!!! In the start itself I can tell its gonna be a bit advance JS for a high-school student like me lmaoo but i will try my best to gain knowledge from this amazing tutorial!!!!

[MakeItMultiplayer]

Awesome! It feels like you've coded this exact thing maaany many times, because you do it flawlessly :)

[Alstier]

Thank you for the video it's informative for someone like me who is basically a beginner! Very clear and easy to understand I like the step by step!