S2JS - Better keyboard and touch handling : Final code

Here's the finished code, working for both keyboard and touch.

If you haven't already registered a userid, click the button to do so. Otherwise click the
button to log on and copy this program to your own work area.

Once it's in your work area, you can access it from any internet device by entering its web address:

http://s2js.com / userid / keytouch
(userid is your S2JS userid)

Try running it on a touch-sensitive device such as an iPad or other tablet.

In particular, try the diagonals.

See if you can make changes. Try changing the hero, changing the quickness. Can you add another sprite that moves randomly?

<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 var Quickness = 3; // How quick he goes, when he's going 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() { // only apply velocities if not moving the sprite further off-screen if ((this.velocity_x<0) && (this.x > 0)) this.x += this.velocity_x; if ((this.velocity_x>0) && (this.x+this.MyImg.width<myCanvas.width )) this.x += this.velocity_x; if ((this.velocity_y<0) && (this.y > 0)) this.y+= this.velocity_y; if ((this.velocity_y>0) && (this.y+this.MyImg.height<myCanvas.height)) this.y+= this.velocity_y; if (this.visible) ctx.drawImage(this.MyImg, this.x, this.y); // draw it } 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 || 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 } 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(); } function MyTouchHandler (MyEvent) { var rect = myCanvas.getBoundingClientRect(); // where is our canvas hero.velocity_y= 0; hero.velocity_x= 0; // zero out velocity for (var i=0; i < MyEvent.touches.length; i++) { var x = MyEvent.touches[i].clientX - rect.left; // get x & y coords var y = MyEvent.touches[i].clientY - rect.top; // relative to canvas // Add velocity depending on which thirds we see touch if (x > myCanvas.width * 0.66) hero.velocity_x= hero.velocity_x + Quickness; if (x < myCanvas.width * 0.33) hero.velocity_x= hero.velocity_x - Quickness; if (y > myCanvas.height * 0.66) hero.velocity_y= hero.velocity_y + Quickness; if (y < myCanvas.height * 0.33) hero.velocity_y= hero.velocity_y - Quickness; } MyEvent.preventDefault(); } addEventListener("keydown", MyKeyDownHandler); // listen for keystrokes addEventListener("keyup", MyKeyUpHandler); // listen for keys released myCanvas.addEventListener("touchstart", MyTouchHandler); myCanvas.addEventListener("touchmove", MyTouchHandler); // listen for anything about touches myCanvas.addEventListener("touchend", MyTouchHandler); setInterval(Do_a_Frame, 1000/FPS); // set my frame renderer myCanvas.width = window.innerWidth - 20; // fill the entire browser width myCanvas.height = window.innerHeight - 20; // fill the entire browser height </script> </body> </html>