javascript - moving svg box with js -


this svg box can move using arrow keys.

i want box stop when arrows realeased, , continue moving accordingly key presed.

this app uses svg, js, , jquery.

i have looked , have found no answer. please cause.

$(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: //  						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>

the code doesn't seem work here, may want visit http://codepen.io/julian-a-avar/pen/pqzvxp see in action, , may want check editor, because said before, the preview doesn't seem work here!!!

i make loop seperate , set variables determine keys pressed.

use keydown set variables true , keyup set variables false.

something similar this:

$(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: //                         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: //                         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++;   }   });

notice setinterval checking variables determine methods call move box.

here codepen example

question 2

how adjust speed of moving block?

one way adjust speed set variable determines how x or y changes each pass in setinterval. make variable n , setting value higher makes block move faster , lower makes move slower.

additionally, asked if there ways shorten code. there numerous ways code improved if creative. below i've provided example variable n , provided 1 way shorten code. instead of having variables every key pressed have 2 variables horizontal , vertical axis:

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

and here codepen of changes

also i'd recommend looking basic game algos (like 80's arcade games, ie space invaders, etc) have kind of game logic.

if you're interested, video on vimeo pretty cool , example of kind of dev, developer creating space invaders real time in javascript


Comments

Post a Comment

Popular posts from this blog

c++ - Difference between pre and post decrement in recursive function argument -

i have following sample code used pre-decrement void function(int c) { if(c == 0) { return; } else { cout << "dp" << c << endl; function(--c); cout << c << endl; return; } } this function give output input 4 : dp3 dp2 dp1 dp0 0 1 2 3 but when use post decrement void function(int c) { if(c == 0) { return; } else { cout << "dp" << c << endl; function(c--); cout << c << endl; return; } } output goes in infinite loop dp4 can explain me in detail why happens ? this happens because function(c--) called same value of c , when finishes c decremented. recursively called, hence called same value no chance of return , hit stack overflow error. assume this, int x = 1, y = 0; y = x++ result y == 1 , x == 2. if y = ++x , bot x , y 2.
Read more

php - Nothing but 'run(); ' when browsing to my local project, how do I fix this? -

i added new project. made mistake in projectname.conf file in sites-available apache2, led me reinstalling apache2. after reinstalling , re-enabling projects on every page of every project .. <body> run(); </body> .. i've run composer update, restarted service, restarted pc, checked config files, tried disabling new project. there nothing in error log, , access.log: 127.0.0.1 - - [15/may/2015:01:40:47 +0200] "get / http/1.1" 304 181 "-" "mozilla/5.0 (x11; ubuntu; linux x86_64; rv:38.0) gecko/20100101 firefox/38.0" maybe i'm forgetting apache2 reinstall? don't think did different last time installed it. looks haven't setup php correctly. take @ this great guide , maybe you're forgetting link php config apache2.
Read more

php - How can I echo out this array? -

i don't know how go grabbing data in variable , put foreach loop. class tree{ private $info = array( array('name'=>'jim','state'=>'nu','company'=>'nu','phone'=>array('cell'=>'5615111111','office'=>'5611111111'),'email'=>array('primary'=>'exs@example.com','ex@there.com')), array('name'=>'joe smith','city'=>'phoenix','phone'=>'4805551111','email'=>'jsmith@some_email.com'), array('name'=>'john doe','city'=>'chandler','company'=>'doe co.','email'=>array('jdoe@gmail.com','personal'=>'email@email.com'),'phone'=>'6025550002') ); } if you're inside of class, can access private variable using $this->variablename . example, i...
Read more