javascript - 用 jquery 移动 div

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 正如你所说的你想坚持使用 jQuery。

Answer 2

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

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

工作演示 示例代码

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

.animate()