svg太空船游戏机芯2d

我一直在寻找一种方法来使一个svg框移动到所有使用js的方向。 我已经看过很多关于如何做网格的教程,但我希望它有一个可以转动,向前,向后和侧向的方形。 在运动方面,我想要像https://www.chromeexperiments.com/experiment/arena5,除了会有一个正方形而不是三角形,没有敌人。

我的问题是,我不知道如何使一个svg广场stream动,没有网格,但运动只会使用键盘,没有鼠标。 请耐心等待我是js游戏的新手。

这里是我尝试的版本的最大原因,这是svg,现在我正在试图在canvas上。 http://codepen.io/julian-a-avar/pen/PqZvxp

我编辑了你的例子,你现在可以使用键旋转,它使用CSS3旋转。

如果你想移动更多的stream体,你可以更快的移动(),或者添加一些缓animation。

你仍然可以做一些改进,但是这里有一个解决scheme:

http://codepen.io/anon/pen/jPraGK

CSS旋转代码:

$("#block_green").css({'-webkit-transform' : 'rotate('+ rotation +'deg)','-moz-transform' : 'rotate('+ rotation +'deg)','-ms-transform' : 'rotate('+ rotation +'deg)','transform' : 'rotate('+ rotation +'deg)'});