S2JS - Responding to keys : Staying on-screen3

The top of the canvas is y=0, and the left side is x=0. Comparing against zero is easy.

But the bottom and right of the canvas is something completely different. You might think the answer is:

if (MyEvent.keyCode == 39 && x_pos < 300) {x_pos = x_pos + 10;} // right

That would certainly work at the moment, but it's a sub-optimal approach because one day the canvas might not be 300 pixels wide. For example, you might be writing a game that runs on desktop computers, iPads, smartphones and a whole variety of things with different dimensions.

A better approach is:

if (MyEvent.keyCode == 39 && x_pos < myCanvas.width) {x_pos = x_pos + 10;} // right

The code below includes this change. Try driving the cat off the right side of the screen. Does it work? Why not?!

<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 < myCanvas.width) {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>