如何防止可移动角色离开屏幕

Question

我目前有一个对象，我可以使用键盘上的箭头键移动，但是，对象移出屏幕。如何让对象保留在屏幕上？

$(document).ready(function(){

    $(document).keydown(function(key) {
        switch(parseInt(key.which,10)) {
            case 37:
                $('img').animate({left: "-=30px"}, 'fast');
                break;
            case 38:
                $('img').animate({top: '-=30px'},'fast');
                break;
            case 39:
                $('img').animate({left: '+=30px'},'fast');
                break;
            case 40:
                $('img').animate({top: '+=30px'},'fast');
                break;
        }
    });
});

Answer 1

Fiddle

我删除了动画，因为在动画期间，position（）。left将给出相同的旧值，left位置值仅在动画后更新。因此，在这种情况下，尽管代码存在，图片仍可移出窗口。如果你需要使用动画，你应该考虑一些超时功能。