Javascript 用js移动svg框

这是一个svg框，可以使用箭头键移动

我希望当箭头重新松开时，此框停止，并根据所显示的键继续移动

此应用程序使用svg、js和jquery

我看了看，没有找到答案。请帮助这项事业

$（函数（）{
变量y=4；
var x=4；
var n；
var移动；
$（文档）.keydown（函数（e）{
开关（e.which）{
案例37://左
移动=设置间隔（向左移动，.1）；
打破
案例38://以上
移动=设置间隔（向上移动，.1）；
打破
案例39://对
移动=设置间隔（向右移动，.1）；
打破
案例40://向下
移动=设置间隔（向下移动，.1）；
打破
违约：
返回；
}
e、 预防默认值（）；
});
函数move_left（）{
$（“#绿色块”）.attr({
x:x
});
x--；
}
函数上移（）{
$（“#绿色块”）.attr({
y:y
});
y--；
}
函数move_right（）{
$（“#绿色块”）.attr({
x:x
});
x++；
}
函数move_down（）{
$（“#绿色块”）.attr({
y:y
});
y++；
}
}
});
正文{
保证金：0；
溢出：隐藏；
}
svg{
背景色：黑色；
宽度：100vw；
高度：100vh；
}
#布洛克绿{
填充：黑色；
行程：#00ff00；
笔划宽度：.5px；
}
我将使循环分离并设置变量，以确定按下了哪些键

使用
keydown
将变量设置为
true
和
keydup
将变量设置回
false

类似于此：

$(function() {
    var y = 4;
  var x = 4;
    var n;
    var move;
    var leftPressed = false;
    var rightPressed = false;
    var downPressed = false;
    var upPressed = false;
    setInterval(function(){
        if(leftPressed){
            move_left();
        }else if(rightPressed){
            move_right();
        }
        if(upPressed){
            move_up();
        }else if(downPressed){
            move_down();
        }
    },.01)
    $(document).keydown(function(e) {
        switch(e.which) {
            case 37: // left
                        leftPressed = true;
                break;
            case 38: // up
                        upPressed = true;
                break;
            case 39: // right
                        rightPressed =true;
                break;
            case 40: // down
                        downPressed = true;
                break;
            default:
                        return;
        }
        e.preventDefault();
    });
    $(document).keyup(function(e) {
        switch(e.which) {
            case 37: // left
                        leftPressed = false;
                break;
            case 38: // up
                        upPressed = false;
                break;
            case 39: // right
                        rightPressed =false;
                break;
            case 40: // down
                        downPressed = false;
                break;
            default:
                        return;
        }
        e.preventDefault();
    });

    function move_left() {
    $("#block_green").attr({
      x: x
    });
    x--;
  }

    function move_up() {
    $("#block_green").attr({
      y: y
    });
    y--;
  }

    function move_right() {
    $("#block_green").attr({
      x: x
    });
    x++;
  }

    function move_down() {
    $("#block_green").attr({
      y: y
    });
    y++;
  }


});

请注意，
setInterval
只是检查变量，以确定要调用哪些方法来移动框

这是一个

问题2

如何调整移动块的速度

调整速度的一种方法是设置一个变量，该变量确定
x
或
y
在
setInterval
中的每次变化量。因此，创建另一个变量
n
，将该值设置得越高，块移动得越快，设置得越低，块移动得越慢

此外，您询问是否有缩短代码的方法。如果你有创意，可能有很多方法可以改进代码。下面我提供了一个变量
n
的示例，并提供了一种缩短代码的方法。与其为每个按键设置变量，不如为水平轴和垂直轴设置两个变量：

$(function() {
    var y = 4;
  var x = 4;
    var n = 1;
    var move;
    var xDirection = 0;
    var yDirection = 0;
    setInterval(function(){
        x = x + (xDirection * n);
        y = y + (yDirection * n);
        $("#block_green").attr({
      y: y,
            x: x
    });
    },.01)
    $(document).keydown(function(e) {
            xDirection = e.which == 37 ? -1 : xDirection;
            xDirection = e.which == 39 ? 1 : xDirection;
            yDirection = e.which == 38 ? -1 : yDirection;
            yDirection = e.which == 40 ? 1 : yDirection;
        e.preventDefault();
    });
    $(document).keyup(function(e) {
        xDirection = e.which == 37 ? 0 : xDirection;
            xDirection = e.which == 39 ? 0 : xDirection;
            yDirection = e.which == 38 ? 0 : yDirection;
            yDirection = e.which == 40 ? 0 : yDirection;
        e.preventDefault();
    });
});

还有一个

此外，我还建议研究一些基本的游戏算法（如80年代的街机游戏，即《太空入侵者》，等等），它们将具有这种游戏逻辑

如果您感兴趣，vimeo上的这段视频非常酷，是此类开发的一个很好的例子，
非常好，但是速度控制呢？我修改了第21行的数字来改变速度，但不管我写了什么，它只是以同样的速度运行。我能让它更快吗？有没有办法减少代码量？因为它似乎有很多重复的代码，但当然，我不是专家，我可以进一步减少代码吗？如果是的话，你能告诉我怎么做吗？我在这里迷路了，我们正在讨论96行代码about@julianavar您可以通过调整
x
或
y
更改的值使其更快/更慢。然后，使用
n
变量，您可以设置更改后的金额。我将补充我的答案