Smooth Movement Controls In JavaScript/HTML (using ctx and canvas)

In this video I will teach you how to make smooth movement controls using JavaScript and html.
If anything was unclear in this video, I apologise.

==please ask any question in the comments.==

#coding #javascript #hmtl #movementcontrols

[newtrix]

If you are thinking that in the video the player appears to not be moving smoothly, I assure you that it does. My computer isn't very high end and struggles to screen record and code at the same time. Because of this it makes the character looks as if it's not moving smoothly due to lag, and choppy frame rate. Sorry for the confusion.

[trashapple]

Hello this is rakeesh from the microsoft tech support office nice channel im proud of you son

[AydenSalem]

Really good tutorial. Really appreciate how you don't take forever but also explain it pretty well

[juliagrabowska]

This tutorial was exactly what I was looking for. The way it stopped if you wanted to change direction from right to left always irked me. Thanks a lot man, great video

[ashokdurunde]

nice tutorial
much better than paid courses.

[Niko_Dola]

You are the man! i have watched a couple of tutorials on the canvas keys but you went right to the point without complicating things.

[ItsMeAndru]

Man, thank you very much! I was struggling with much more complex solutions.
Quick and clean tutorial.

[AlrightLetsGo]

Hey! I am new to coding and I loved you video. But for seeing you actually correct your mistakes.

I understand marketing a little, I loved that it felt like some one who understands the material, but also understands me. There are many videos for beginners that forget to act like beginners. They type fast. they talk fast. That's what happens when Butterfly introverts start flying, they get so excited and blaze over even the explanations, lol. I appreciate all you guyz and galz works. Truely, I expect good things for your works.

[MrBrady]

Nice, thanks! I was messing around with this earlier today and couldn't find a solution. Just adding the velocity left vs. right does the trick! Subscribed!

[classicbucket]

I was looking into finding a better way for my movement code as my way of doing it, which I've been doing for years, has always been a bit janky. But this tutorial showed me the exact kind of movement I've been looking for. 💯 a great video and a 👏 for being such an amazing beginner video, I don't see much of these anymore (doesnt help that I'm not a beginner anymore 😂) but when I was starting out all the videos were fast paced and not at all beginner friendly

[kurtwillrich]

Great tutorial and explanations! I was working on movement and it would only go one direction a pixel at a time every time I pressed A, S, D, or W, so this was really helpful - thanks!

[patriciamacabulos]

Such a good tutorial - you are a lifesaver mate!!!

[bode]

Wish you would have included how to lock the object to the canvas (so it can't move outside it), great video none the less!

[RoadRageEntertainment]

Honestly dude you explain things so much better than the other YouTubers who just talk endlessly and don’t make it simple, this is awesome my only question is how can I make a image that I want to move do this instead of a black square I’m creating a game

[abe]

This is a great tutorial. Underrated channel.

[barackobam]

Very nice video and explanation, hope you continue pushing up. I'am subscribing bro👍👊

[badbot]

holy F bro thanks for this easy and short tutorial <3

[achymercury]

Great and very helpful video!
If you are in the same boat as me and other viewers. How to make the cube not go off screen. Using the next video after this i created this.

// allows for cube to stop from falling off screen
function collision () {
// stops from going off bottom
if (y >= canvas.height - 50){
y = canvas.height - 50
}
// stops from going off the right
if (x >= canvas.clientWidth - 50){
x = canvas.clientWidth - 50
}
// stops from going off the top
if (y <= canvas.height - 600){
y = canvas.height - 600 // 600 is height of canvas
}
if (x <= canvas.clientWidth - 1000){
x = canvas.clientWidth - 1000 // 1000 is width of canvas
}

My canvas size is 1000px by 600px
Hope this helps.

[newtrix]

Sorry for the video being a little bit Ill try to fix it next time i upload a video.

[Ninvus]

One problem with how this is implemented is that when you hold down w and d for example, to make your box move diagonally, instead of moving 1 * velocity per frame it's actually moving sqrt(2) * velocity per frame. It's doing this because the player controlled square is moving across the hypotenuse of the a right triangle instead of the bases of the triangle, and the hypotenuse is always longer than the bases. The square root of 2 is roughly 1.4, so your box is moving about 40% faster diagonally than in any of the cardinal directions. An easy way to fix this is to add 4 more event listeners for the 4 diagonal directions, and make x and y increment / decrement by the velocity divided by the square root of 2.

Edit: I hope that makes sense and I'm not coming off as a dick for pointing this out. Your implementation is still good for non gaming purposes, but if you want to control a game character that's capable of moving diagonally you'll probably want it to move at the same speed diagonally.