如何制作可移动元素，并将其绑定到屏幕尺寸？

Question

我正在制作一个带有卡通图像的简单网页，用户可以在其中移动。我想使用箭头键移动图像，然后使用jQuery将移动绑定到可用的屏幕/窗口/文档大小。在下面的代码中，第1至4行的常量不起作用，我不知道为什么！

let width = Math.max($(document).width(), $(window).width());
let height = Math.max($(document).height(), $(window).height());
let height = $(window).height();
let width = $(window).width();

//Below is code which allows for the character to move: 
$(document).keydown(function(key) {
    document.write(Math.max($(document).height(), $(window)
        .height()));
    document.write(Math.max($(document).width(), $(window)
        .width()));
    switch (parseInt(key.which, 10)) {
        // Left arrow key pressed             
        case 37:
            if ($('img').position().left > 0) {
                $('img').animate({
                    left: "-=20px"
                }, 'fast');
            }
            break;
            // Up Arrow Pressed             
        case 38:
            $('img').animate({
                top: '-=20px'
            }, 'fast');
            break;
            // Right Arrow Pressed             
        case 39:
            if ($('img').position().left < width) {
                $('img').animate({
                    left: '+=20px'
                }, 'fast');
            }
            break;
            // Down Arrow Pressed             
        case 40:
            $('img').animate({
                top: '+=20px'
            }, 'fast');
            break;
    }
});