Question

嗨，这是我的第一篇文章。我正在设计一个带有javascript和jquery的游戏，我目前有一个代表玩家的div，我无法弄清楚如何让角色移动我目前只有div <div id="player"></div>
我更喜欢使用jquery，但我也愿意使用常规的javascript。

编辑：我需要使用箭头键移动div。

Answer 1

你需要在jQuery中使用大量的代码，我希望你能使用其他一些基本上用于游戏开发的语言。

但是，你可以试试这个：

div {
  margin-left: 100px;
}

这将为div设置100px的边距。

$('#player').hover(function () {
 $(this).css('margin-left', '200px');
});

这会将div从左侧移动到100px以上。您可以使用animate为此设置动画或减慢此过程，以使其看起来像是在移动。通过这种方式，你将有机会改变图像，使其看起来像是在移动他的身体（手臂，腿等）。

然后让他跳跃使用：

$('#player').click(function () {
  $(this).css('margin-bottom', '50px');
});

但这不会很酷。因为只有图像移动才不会像移动身体部位那样动起来。

我猜animate将是jQuery中游戏开发的基本和必要的工具，因为这可以让你在时间间隔创建功能，你可以改变图像，这样玩家看起来就像运动一样。移动，而不仅仅是从一个地方到另一个地方。

使用常规JS将需要比jQuery更多的代码。所以你继续运行jQuery。

这是一个您可能想要检查的插件！

http://gamequeryjs.com/正如你所说，你想要坚持使用jQuery。

Answer 2

最好的方法是使用JQuery .animate()

描述：执行一组CSS属性的自定义动画

working demo 示例代码

 $( "#player" ).click(function(){
      $( this ).animate({ "left": "+=50px" }, "slow" );
 });

.animate()

用jquery移动div

2 个答案: