Vertical Platformer Game Tutorial with JavaScript and HTML Canvas 

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

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

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

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

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 appreciate the production quality of these videos.

Your tutorials are so detailed and easy to understand. I appreciate your work on these videos !

Seriously the quality of your videos are so good! Story-telling is perfect.

Excellent OOP principles in a fun and practical way! Thank you! 👏👏

omg 1 minute in and already know this makes for a great weekend project thanks!

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!

Pro tip: In Sublime, you can save the file name directly if you write it on the first line, and press Ctrl/Cmd + S and Enter/Return. I always do Ctrl + N , write the file name in the first line of the file, Ctrl + S, Enter, Ctrl + A, and start typing whatever.

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

I am loving your clear explanations and how you go through the code. It is very fun to learn like this! Keep it up!

Simply grateful for this great tutorial and all your background work to complete it and share it.

It’s so good to listen to this while sleeping

Fantastic and professional video, thank you.

@Chris Courses @3:08:25 your method to fix this is one way to fix it, but a better way to fix it (especially in very fast simulations) is to untie your update loop from your render loop. Using this will make you able to set your velocities essentially infinitely fast while still updating in between the position based upon delta time. It does make physics much more cumbersome to deal with in games, but it also preserves things like a velocity going so fast that it can warp through collision detections. It will also make physics much more predictable in that it doesn't matter what speed the RAF is firing, the player jumping will remain consistent in rising and falling. Here is a boilerplate I use to achieve this, however any value being modified in this.update needs to be multiplied by that dt argument to simulate the "in between phases" that aren't going to be drawn on screen. Think of them as intermediate updates between render frames. I included a dumbed down version of an enemy class to show how it can be used. class Enemy { constructor(args) { //whatever } update(dt) { //example of how to use delta time this.x += this.vel * dt } render(ctx) { //etc } } class Game { constructor(){ const canvas = document.createElement('canvas') document.appendChild(canvas) this.ctx = canvas.getContext('2d') this.dt = 1/60 this.last_time = 0 this.accumulated_time = 0 this.entities = [] this.entities.push(new Enemy(args)) } tick(time){ this.accumulated_time += (time - this.last_time) / 1000 //if a user leaves the tab. RAF will stop firing, however the following while loop condition could get stuck otherwise due to time still increasing. this is a stop limit in those cases: if (this.accumulated_time > 200) this.accumulated_time = 200 while (this.accumulated_time > this.dt){ this.entities.forEach(e => e.update(this.dt)) this.accumulated_time -= this.dt } this.entities.forEach(e => e.render(this.ctx)) this.last_time = time //mock pretending if client got 5fps behavior //setTimeout(this.tick.bind(this), 1000/5, performance.now()) requestAnimationFrame(this.tick.bind(this)) } }

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 .

So far this is the only proper Javascript game tutorial I have ever seen👆👍 👍👍

I fell asleep and woke to this

so awesome... man I wish I knew this like 30 years ago

Chris, can you create a simple 3D game using three.js?

What tool do you use to draw arrows and lines on the screen when demonstrating and explaining?

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.

You're stuff is amazing! Very informative. Also, could you tell about how you would go around making a replay system for a game?

I downloaded this video cause this kind of brilliant shouldn't be lost

hey Chris , i made it thanks for course!

great work man!

I'm enjoying this course a lot and I can't wait for the next steps. I'm trying to use classic sprites in your development, but when I dowload a sprite sheet, animations frames are not the same width. My question is: should I adapt development to get position, width and height for every frame or preprocess sprite sheets?

Very nice tutorial! 🙏

Hello Chris,this is not related to the video well somewhat,everytime i fall asleep with youtube i wake up to one of your tutorials,this happened a couple a times and i dont know what to make of it

This is great! Thanks!

amazing content! thanks

Nice one Chris!

Hi Chris, i appreciate your tutorials, its possible to make a diagonal walk plataform ? like > " / ", move like sonic game.

Your channel is heaven to me.

Thanks a lot for the video

This is awesome....it would be great if it had more levels and other great features....I just dockerized it!

good idea to show hosting setup normally never shown

Hey so im following your content and was doing well up to 51 minutes with tiled. I downloaded Tiled and added the picture. but when I click export as, it doesnt give me the option to grab javascript files. Any suggestions ? I really wanted to complete this project

How does he draw the diagrams on screen ?

This is some amazing stuff. You got a new sub! also can i ask for something? Can you provide a tutorial on how to animate a character with just body parts and not a sprite sheet? If that is too much in vanilla maybe create a bone animation in spine or something and implement that in a game. Really can't find much material on that. Thank you!

i love your ideas

Hi, Great work! what is the name of the app for the todo list? Thanks.

chris your videos is so much clear and smooth with no complicated code thank u from bottom of my heart my young brother learn from u and he ststed creating his dream game

Hi Chris, I used the platformer logic you taught us to create an adventure game, using panning and a camera box. however, the panning method you taught us seems very buggy. sometimes it works properly and the player can pan in all four directions north, south, east, and west. but sometimes the player doesn't pan at all. Can you help me to solve this problem? I would really appreciate it thank you.

I keep waking up to this💀

one other question was why loop in the gravity collision detection example? Couldn't you say, "If the bottom of the player would be below the bottom of the canvas, set their position to be at the bottom"? like if they were going to fall 1.5 pixels, but can't, fall the remaining amount then stop

wow awesome, Thanks

Hi Chris. I love your videos. I got to 2:30 : 55 and my guy teleports up ontop of the red ledge instead of stopping at the red collision blocks at the left of the screen. Any ideas why that might happen ?

it looks so cool wowo

When using requestAnimationFrame() we don't need use the delta time, since requiestAnimationFrame is based on the displlay refresh rate right? So there is not problems whith the game speed being different on a player at 60fps and other 144fps?

isn't it better to create the "collision blocks" in tiled using "Object Layers"?

Really good course do you know of a way to make the pixel look crisp

Really great tutorial! And I think this changes I made are a fix for 2 bugs at once: teleporting to the up platform and when falling fast go through it. I set a max gravity value (which even we irl have) of 7. So it stops accelerating. I added 3 to the hitbox height when cauculating if there was a collision in a platform, so it detects the collision a little before it occurs so it have more time to react, so the risk of the oine player frame beeing before and the other after the collision box is now gone. And added 1 to the platform collision box height just to make sure. And as the collision box of the player goes a little more down than the player, the 'teleportation' to the up platform when it shouldnt is also gone. :) There are any problems related to this solution?

What does the code look like for the Screen moving up or down in relation to the character (main Object),So when the Character falls,the background moves up And when the Character moves /jumps up the Background moves down

For the gravity/velocity issue, isn;t it better to just cap the max-speed ? Since that's also how RL works. You cannot build momentum indefinitely. And also you would not like the game visuals to move faster than intended.

Again I wake up to this

Thanks for the great content. 1 Que how much it take for u to create video this long?

Thanks, the tutorial you made was really helpful chris! by any chance do you plan to make a video tutorial on making a simulator game like stardew valley in the future?

Thank you for this amazing tutorial!!! Is anyone have issues with the sprite onload part? Iv been stuck on it for days and cant figure out why the sprite isnt colliding after removing the declared width and height from the player class and using the onload function in the sprite class instead. Would appreciate any help and thank you!

chris is one of the best coder🤩🤩

Its nice but the map is limited and everytime the blocks are in the same position how i can change it ? I want to create endless map to the up and blocks randomly located

i have a problem: x postion change going smooth, but y changed abruptly, it just teleport player when jump, for example

When the guy is running to the left his legs are moving clockwise, backwards compared to the direction he is going. Looks like Michael Jackson moon walk :-) You probably need to iterate the animation images in reversed order for this case. Great quality tutorial, BTW. Thanks.

I really want to buy your courses, but I can't listen to English well. So I'm really looking forward to this feature. I really hope you'll look into this. Thank you!

Useful timestamps: 15:00 - how to edit/update your gaming website

thank you bro

Amazing :D

hola, se supone que camera es como todo la vision del mapa, mientra sque camerabox es la de vision del jugador? se puede entender asi?

Hi Chris, great work! Will you continue this tutorial and will it be part of the premium section and uploaded on your website? Can't find the course there yet ;)

Hi, i like your method to teach, thanks very much for what u doing. I have a question, why u use javascript not unity ??

Amazing...

Sir, can you make a video or tell me which programming books you prefer to learn js as a beginner like me.

Hi Chris,how do you make money through game development,and is javascript great for that tacks because most people don't play game online anymore

Nice One !

I really don't understand RU-vid Why is this when I'm almost asleep?

Can Hostinger host nodejs web sites? I write games that use nodejs and code running in nodejs for saving game data.

Great work chris! Would you consider doing a super auto pets clone? Much love :)

I LOVE THIS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

If his videos are this level quality, i wonder his course...

Just a small question: why didn't u use event emitter(subscription) model but all the time add different action to the different part of script(just a newcomer in web games that's why asking for)?

Second night in a row I woke up here

HI, I have a question I'm just curious. Let's say you make a game or an app and you have people play it online. Since anyone can see your JS code in the webbrowser as well as HTML and CSS, how do you know they won't copy/steal it and make a copy of your app/game?

Hey Chris , can i ask u why u don't use three js instead ?

Is it possible to create a hitbox by simply deleting all transparent pixels on the frame?

Drawing a rectangle over all existing canvas drawing is not the advised way of clearing. You want to use "context.clearRect" method

Hi Chris, very nice work, but I am curious, have you managed to monitize your web games in any way? Are web games still a feasible business in 2023?

Those transitions haha, teach me

nice tutorial ! maybe it would be better to use State pattern for Sprite Swapping ?

ياخي ليش مافي ابداع عربي مثل هذا الأخ 😢😢😢😢😢😢

Which theme are you using??

when you said you like using sublime text, I had to check when this video was uploaded.

can someone send me the tiled file (not the software but the maps)

Can u make button controller?