S2JS - Better keyboard and touch handling : Sprite speed2

Hopefully you changed all the "3"s to something a little larger than "3". You would have needed to change four "3"s.

That certainly does the job, but as we've mentioned before, it's good coding style not to scatter the same number (when it means the same thing) all throughout your code. It makes it laborious and prone to error if you ever need to change it.

In the code below, I've made a variable which I've chosen to name quickness. It's set to 3, and then used for the velocity setting.

Now, to make the hero move more quickly, you only have to change the "3" in one place, and it's impossible to miss any.

An even better idea is to make the quickness a property of the sprite, so when we create the sprite we might, for example, load an image of a wombat and set the quickness to 1. For another sprite we load an image of a jaguar and set the quickness to 6.

It's good style for objects to know all about themselves. We'll do that in a later session.

<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 ; } var hero= new MySprite("http://s2js.com/img/etc/burger.png"); // The hero addEventListener("keydown", MyKeyDownHandler); // listen for keystrokes addEventListener("keyup", MyKeyUpHandler); // listen for keys released 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 } MySprite.prototype.Do_Frame_Things = function() { // if the x-velocity is to the left, only apply the velocity if the sprite is not off-screen to the left< if ((this.velocity_x < 0) && (this.x > 0)) this.x = this.x + this.velocity_x; // if the x-velocity is to the right, only apply the velocity if the sprite is not off-screen to the right< if ((this.velocity_x > 0) && (this.x + this.MyImg.width < myCanvas.width )) this.x = this.x + this.velocity_x; // if the y-velocity is upward, only apply the velocity if the sprite is not off-screen at the top if ((this.velocity_y < 0) && (this.y > 0)) this.y = this.y + this.velocity_y; // if the y-velocity is downward, only apply the velocity if the sprite is not off-screen at the bottom if ((this.velocity_y > 0) && (this.y + this.MyImg.height< myCanvas.height)) this.y = this.y + this.velocity_y; if (this.visible) ctx.drawImage(this.MyImg, this.x, this.y); // draw the thing } function MyKeyUpHandler (MyEvent) { if (MyEvent.keyCode == 37 || MyEvent.keyCode == 39) {hero.velocity_x= 0}; // not left or right if (MyEvent.keyCode == 38 || MyEvent.keyCode == 40) {hero.velocity_y= 0}; // not up or down } var Quickness = 3; function MyKeyDownHandler (MyEvent) { if (MyEvent.keyCode == 37) {hero.velocity_x= -Quickness}; // left if (MyEvent.keyCode == 38) {hero.velocity_y= -Quickness}; // up if (MyEvent.keyCode == 39) {hero.velocity_x= Quickness}; // right if (MyEvent.keyCode == 40) {hero.velocity_y= Quickness}; // down MyEvent.preventDefault() } setInterval(Do_a_Frame, 1000/FPS); // set my frame renderer </script> </body> </html>