Geek Answers Handbook

Moving svg box with js

This is a svg window that can be moved using the arrow keys.

I want this flag to stop when the arrows are played again and continue to move according to the assigned key.

This app uses svg, js and jquery.

I have looked and could not find the answer. Please help the case.

$(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>
Run codeHide result

The code does not work here, so you can visit http://codepen.io/julian-a-avar/pen/PqZvxp to see it in action, and you may want to check the editor because, as I said, Preview not working here !!!

+4
source share
1 answer

, , 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

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 , .. Space Invaders ..). .

, vimeo , , javascript

+2

More articles:


All Articles