S2JS - Better keyboard and touch handling : The story so far

This is how we've been making our hero move. It's very similar to how it would be done in Scratch.

The example below shows this in action.

We're making use of the MySprite object we created in the previous section. If you skipped that section, you really need to go back and do it now.

For the moment we're not worrying about keeping the hero on-screen, so it's possible to drive miles off-screen, in which case you need to drive miles back. I've added a fillText in the frame renderer to display the coordinates, so we always know where it is.

Remember you need to click on the canvas before it starts to hear your keystrokes.

Try driving at a diagonal.

<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 MyKeyDownHandler (MyEvent) { if (MyEvent.keyCode == 37) {hero.x = hero.x - 10}; // left if (MyEvent.keyCode == 38) {hero.y = hero.y - 10}; // up if (MyEvent.keyCode == 39) {hero.x = hero.x + 10}; // right if (MyEvent.keyCode == 40) {hero.y = hero.y + 10}; // down MyEvent.preventDefault() } addEventListener("keydown", MyKeyDownHandler); // listen for keystrokes setInterval(Do_a_Frame, 1000/FPS); // set my frame renderer </script> </body> </html>