You would need to do something along these lines for each keyStroke where you adjust the x
or y
variable. Notice the new if
statement:
// up
if (e.keyCode == 38) {
clearCanvas();
if (y - 3 > 0) {
y = y - 3;
}
context.drawImage(kite, x, y, 300, 150);
}
// down
if (e.keyCode == 40) {
clearCanvas();
if (y + 3 + 150 < canvas.height) {
y = y + 3;
}
context.drawImage(kite, x, y, 300, 150);
}
// left
if (e.keyCode == 37) {
clearCanvas();
if (x - 10 > 0) {
x = x - 10;
}
context.drawImage(kite, x, y, 300, 150);
}
// right
if (e.keyCode == 39) {
clearCanvas();
if (x + 10 + 300 < canvas.width) {
x = x + 10;
}
context.drawImage(kite, x, y, 300, 150);
}