фиксация изображения координата внутри холста

Question

Я пытаюсь выяснить, как исправить координаты изображений, чтобы она не выходила за границу холста, но я не могу найти хорошее решение.

Это то, что у меня есть:

function update(event) { 

    if (event.keyCode == 38) { //going up 
     if (py - speed < 0) { 
      py = speed; return 
     } 
     py -= speed; 
    } 
    if (event.keyCode == 37) { //going left 
     if (px < speed) { 
      px = speed; 
      return; 
     } 
     px -= speed; 
    } 
    if (event.keyCode == 40) { //going down 
     if (py > ch-(ph+speed)) { 
      py = ch-(ph-speed); return 
     } 
     py += speed; 
    } 

    if (event.keyCode == 39) { //going right 
     if (px+pw > cw) { 
      px = (cw - pw); 
      return 
     } 
     px += speed; 
    } 
    $("#position").html(px + " " + py); 
    render(); 
} 

Вот мой JS скрипку: http://jsfiddle.net/phjUL/2/

Answer 1

Я думаю, что лучший способ заключается в переместить его первым затем проверить, если это выходит за границы и переместить его назад. http://jsfiddle.net/phjUL/3/

 function update(event) { 

      if (event.keyCode == 38) { //going up 
       py -= speed; 
       if(py < 0) { 
        py = 0; 
       } 
      } 
      if (event.keyCode == 37) { //going left 
       px -= speed; 
       if(px < 0) { 
        px = 0; 
       } 
      } 
      if (event.keyCode == 40) { //going down 
       py += speed; 
       if(py > ch - ph) { 
        py = ch - ph; 
       } 
      } 
      if (event.keyCode == 39) { //going right 
       px += speed; 
       if(px > cw - pw) { 
        px = cw - pw; 
       } 
      } 

      $("#position").html(px + ", " + py); 
      render(); 
     } 

Answer 2

Вы можете просто зажать px и py в заданном диапазоне после примененного все изменения к ним. Например. прямо перед вызовом render в методе обновления, зажать свои значения, как это:

// this will clamp px to a value between 0 and cw (canvas width) 
px = Math.max(0, Math.min(px, cw)); 

// clamp py to a value between 0 and canvas height 
py = Math.max(0, Math.min(py, ch)); 

Вашего метод обновление будет выглядеть следующим образом:

function update(event) { 
    if (event.keyCode == 38) { //going up 
     py -= speed; 
    } 
    if (event.keyCode == 37) { //going left 
     px -= speed; 
    } 
    if (event.keyCode == 40) { //going down 
     py += speed; 
    } 
    if (event.keyCode == 39) { //going right 
     px += speed; 
    } 
    px = Math.max(0, Math.min(px, cw)); 
    py = Math.max(0, Math.min(py, ch)); 
    $("#position").html(px + " " + py); 
    render(); 
} 

Ссылка на обновленной скрипку: http://jsfiddle.net/phjUL/4/