I've been searching for a way to make an svg box move to all directions using js. I have seen many tutorials on how to do it grid like, but I want it so have a square that can turn, move forward, backwards and sideways. In terms of movement, I want to be like https://www.chromeexperiments.com/experiment/arena5 except there will be a square instead of a triangle and there will be no enemies.

My problem is that I don't know how to make an svg square move fluidly and without a grid, but the movement will only use keyboard, no mouse. Please be patient I'm new to js gaming.

Here is the most reason version of what I've trying, this is svg, right now I'm trying to make it in canvas.http://codepen.io/julian-a-avar/pen/PqZvxp

  • \$\begingroup\$ Why don't you make just a fluid movement? Moving it in squares will need probably more work. You can just use regular js DOM movement. \$\endgroup\$
    – Trader
    May 14, 2015 at 8:48
  • \$\begingroup\$ @Trader Could you please elaborate? \$\endgroup\$ May 14, 2015 at 21:25
  • \$\begingroup\$ Can you post a jsfiddle example? Maybe I could then code you some kind of solution. \$\endgroup\$
    – Trader
    May 15, 2015 at 17:33
  • \$\begingroup\$ @Trader Example of what I'm woring right now? \$\endgroup\$ May 15, 2015 at 21:24
  • \$\begingroup\$ Yes, a small example of what you are trying to do. \$\endgroup\$
    – Trader
    May 15, 2015 at 21:31

1 Answer 1


I've edited your example, you can now rotate using the keys, it uses CSS3 rotations.

If you want to move more fluid, you can either update the move() faster, or add some easing animations.

You can still make several improvements, but here is one solution:


The css rotation code:

$("#block_green").css({'-webkit-transform' : 'rotate('+ rotation +'deg)','-moz-transform' : 'rotate('+ rotation +'deg)','-ms-transform' : 'rotate('+ rotation +'deg)','transform' : 'rotate('+ rotation +'deg)'});
  • \$\begingroup\$ Thank you so much!!! But, I'm kind of new to css3. I've noticed that the axis of rotation seems to be at coords(0, 0) of the svg, how can I set the axis of rotation right in the middle of the ship? \$\endgroup\$ May 18, 2015 at 16:51

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .