S2JS - Better keyboard and touch handling : Losing velocity

We do that with a keyup handler.

This handler gets called whenever a key goes up. We just check which key was released, and set the appropriate velocity to zero.

Try it now.

It's very smooth and responsive, and even better, we can do diagonals by holding two keys at the same time.

<html> <head> <title>Better keyboard handling</title> </head> <body> <canvas id="myCanvas" width=300 height=300 style="background-color: olive"> </canvas> <script> var ctx = myCanvas.getContext("2d"); // Get the drawing context for the canvas var FPS = 40; // How many frames per second function MySprite (img_url) { this.x = 0; this.y = 0; this.visible= true; this.velocity_x = 0; this.velocity_y = 0; this.MyImg = new Image(); this.MyImg.src = img_url ; } MySprite.prototype.Do_Frame_Things = function() { if (this.visible) ctx.drawImage(this.MyImg, this.x, this.y); // draw the thing this.x = this.x + this.velocity_x; this.y = this.y + this.velocity_y; // move the thing } var hero= new MySprite("http://s2js.com/img/etc/burger.png"); // The hero function Do_a_Frame () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); // clear the background ctx.font="20px arial"; ctx.fillText("Hero x=" + hero.x + " y=" + hero.y, 0, 20); // show hero coordinates hero.Do_Frame_Things(); // hero } function MyKeyUpHandler (MyEvent) { if (MyEvent.keyCode == 37) {hero.velocity_x= 0}; // not left if (MyEvent.keyCode == 38) {hero.velocity_y= 0}; // not up if (MyEvent.keyCode == 39) {hero.velocity_x= 0}; // not right if (MyEvent.keyCode == 40) {hero.velocity_y= 0}; // not down } function MyKeyDownHandler (MyEvent) { if (MyEvent.keyCode == 37) {hero.velocity_x= -3}; // left if (MyEvent.keyCode == 38) {hero.velocity_y= -3}; // up if (MyEvent.keyCode == 39) {hero.velocity_x= 3}; // right if (MyEvent.keyCode == 40) {hero.velocity_y= 3}; // down MyEvent.preventDefault() } addEventListener("keydown", MyKeyDownHandler); // listen for keystrokes addEventListener("keyup", MyKeyUpHandler); // listen for keys released setInterval(Do_a_Frame, 1000/FPS); // set my frame renderer </script> </body> </html>