S2JS - Responding to keys : Staying within all the margins

Now we're nicely comparing the left of the image with the left of the canvas:

x_pos > 0

Comparing the top of the image with the top of the canvas:

y_pos > 0

Comparing the right of the image with the right of the canvas:

x_pos+MyImg.width < myCanvas.width

And the bottom of the image with the bottom of the canvas:

y_pos+MyImg.height < myCanvas.height

Try driving the cat around - it's almost perfect.

In fact, it's still going a small amount too far, because we should be comparing with the canvas width minus the step size (10), but it's good enough for now.

<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 > 0) {x_pos = x_pos - 10;} // left if (MyEvent.keyCode == 38 && y_pos > 0) {y_pos = y_pos - 10;} // up if (MyEvent.keyCode == 39 && x_pos+MyImg.width < myCanvas.width) {x_pos = x_pos + 10;} // right if (MyEvent.keyCode == 40 && y_pos+MyImg.height < myCanvas.height) {y_pos = y_pos + 10;} // down } setInterval(MyTimer, 40); addEventListener("keydown", MyKeyDownHandler); </script> </body> </html>