S2JS - Responding to keys : Going off-screen

Scratch likes to keep sprites at least partly visible on the stage at all times. If you try to move a sprite too far off-stage, Scratch keeps the edge of it slightly visible. Scratch is trying to be helpful, but sometimes it gets in the way.

Javascript is quite different.

Try driving the cat a long way to the right -- off the canvas and even further.

Now drive it back to the left and you'll notice it won't immediately reappear until it's travelled all the necessary distance back.

With Javascript, it's possible for things to be located yards off the screen in any direction

(Remember to click on the canvas with your mouse so it gets the keystrokes)

<head> <title> My new Web Page </title> </head> <body> <canvas id=myCanvas width=300 height=300 style="background-color: pink;"> </canvas> <script> var ctx = myCanvas.getContext("2d"); var x_pos = 0; var y_pos = 0; var MyImg = new Image(); MyImg.src = "http://s2js.com/img/etc/cat_grumpy.png"; function MyTimer () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); ctx.drawImage(MyImg, x_pos, y_pos); } function MyKeyDownHandler (MyEvent) { if (MyEvent.keyCode == 37) {x_pos = x_pos - 10;} // left if (MyEvent.keyCode == 38) {y_pos = y_pos - 10;} // up if (MyEvent.keyCode == 39) {x_pos = x_pos + 10;} // right if (MyEvent.keyCode == 40) {y_pos = y_pos + 10;} // down } setInterval(MyTimer, 40); addEventListener("keydown", MyKeyDownHandler); </script> </body> </html>