Question

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

我希望此框在箭头重新发布时停止，并继续相应地移动到预设的键。

此应用使用svg，js和jquery。

我看了，但没有找到答案。请帮忙解决问题。

＆＃13;

$(function() {
	var y = 4;
  var x = 4;
	var n;
	var move;

	$(document).keydown(function(e) {
	    switch(e.which) {
	        case 37: // left
						move = setInterval(move_left, .1);
	        	break;
	        case 38: // up
						move = setInterval(move_up, .1);
	        	break;
	        case 39: // right
						move = setInterval(move_right, .1);
	        	break;
	        case 40: // down
						move = setInterval(move_down, .1);
	        	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++;
  }
  }
});

＆＃13;

body {
	margin: 0;
	overflow: hidden;
}

svg {
	background-color: black;
	width: 100vw;
	height: 100vh;
}

#block_green {
	fill: black;
	stroke: #00ff00;
	stroke-width: .5px;
}

＆＃13;

<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<svg>
	<rect x="4" y="4" width="80" height="60" id="block_green"/>
</svg>
</body>
</html>

＆＃13;

代码似乎无法在此处运行，因此您可能需要访问http://codepen.io/julian-a-avar/pen/PqZvxp以查看其运行情况，并且您可能需要查看编辑器，因为正如我之前所说，预览似乎不起作用 !!!

Answer 1

我会将循环分开，并设置确定按下keys的变量。

使用keydown将变量设置为true和keyup，将变量设置回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只是检查变量以确定调用哪些方法来移动框。

这是codepen with an example

问题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();
    });
});

这是另一个codepen of the changes

此外，我建议您查看一些基本的游戏算法（如80年代的街机游戏，即太空入侵者等）。他们将拥有这种游戏逻辑。

如果你有兴趣，这个关于vimeo的视频非常酷，是这种开发的一个很好的例子，developer creating space invaders real time in javascript

用js移动svg盒子

1 个答案: