javascript – 用js移动svg框

2023年7月30日 147次阅读

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

我希望这个盒子在箭头被释放时停止,并继续相应地移动到前面的键.

这个应用程序使用svg,js和jquery.

我看了,没找到答案.请帮助事业.

$(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++;
  }
  }
});
body {
	margin: 0;
	overflow: hidden;
}

svg {
	background-color: black;
	width: 100vw;
	height: 100vh;
}

#block_green {
	fill: black;
	stroke: #00ff00;
	stroke-width: .5px;
}
<!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>

代码在这里似乎不起作用,所以你可能想访问http://codepen.io/julian-a-avar/pen/PqZvxp以查看它的运行情况,你可能想检查一个编辑器,因为正如我之前所说,预览似乎不起作用!!!

最佳答案 我会使循环分离并设置变量来确定按下哪些键.

使用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

如何调整移动块的速度？

调整速度的一种方法是设置一个变量,用于确定setInterval中每次传递的x或y变化量.因此,设置另一个变量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

点赞