HTML5 холст, как дать ему границу?

Question

для школьного задания Я делаю игру в кайте.

Я - полный javascript noob, и мне действительно нужна помощь.

поэтому я нахожусь в точке, что у меня есть изображение, движущееся, нажимая кнопки со стрелками. проблема в том, что мое изображение может выйти за пределы холста, и я хочу, чтобы это не было.

У меня действительно есть идея nooooo, как это сделать, я пробовал несколько учебных пособий, но, похоже, это не работает.

window.onload = function() { 

var canvas = document.getElementById("game"); 
window.addEventListener('keydown', keyDown, true); 

var context = canvas.getContext("2d"); 
var kite = document.getElementById("kite"); 

var kite = new Image(); 
kite.src = "kite.png"; 

context.drawImage(kite, 250, 300, 300, 150); 

var x = 250; 
var y = 300; 

function keyDown(e){ 

// up 
    if (e.keyCode == 38) { 
     clearCanvas(); 
     y = y - 3; 
     context.drawImage(kite, x, y, 300, 150);  
    } 

// down 
    if (e.keyCode == 40) { 
     clearCanvas(); 
     y = y + 3; 
     context.drawImage(kite, x, y, 300, 150); 
    } 

// left 
    if (e.keyCode == 37) { 
     clearCanvas(); 
     x = x - 10; 
     context.drawImage(kite, x, y, 300, 150); 
    } 

// right 
    if (e.keyCode == 39) { 
     clearCanvas(); 
     x = x + 10; 
     context.drawImage(kite, x, y, 300, 150); 
    } 

} 

function clearCanvas() { 
    canvas.width = canvas.width; 
} 



}; 

я действительно очень признателен, если кто-то может помочь мне с этим: D

Answer 1

Вы должны были бы сделать что-то вдоль этих линий для каждого нажатия клавиши, когда вы регулируете переменную x или y. Уведомление о новом заявлении if:

// 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); 
}