Question

我尝试创建一个简单的点击式HTML游戏，我想在屏幕上移动我的角色。现在，我可以使用按钮来完成它，但我想放置带有hrefs的图像，我的角色在没有按钮的情况下移动。例如，当我点击这些男人时，我想马里奥会向男人们移动。我的代码是这样的：

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>  
<center>
<button id="go2"><-</button> 
<button id="go">-></button> 
</center>  
<script> 
$( "#go" ).click(function() { 
  $('#Walk').attr('src','https://orig02.deviantart.net/8996/f/2014/244/d/e/mario_by_nintentofu-d7xicg0.gif') 
  $( "#Prota" ).animate({ 
    left: "550", 
  }, 4500 ); 
}); 
$( "#go2" ).click(function() { 
  $('#Walk').attr('src','https://orig02.deviantart.net/8996/f/2014/244/d/e/mario_by_nintentofu-d7xicg0.gif') 
  $( "#Prota" ).animate({ 
    left: "0", 
  }, 4500 ); 
}); 
</script>  

</div>
<div id='Fondo' style="position:absolute;z-index:99999999999999;margin-left: 0px; margin-top: 0px; background-color:#000000; height:600; width:800">
<img src="https://orig00.deviantart.net/6ddc/f/2018/003/4/b/principepio_by_darklordwriter-dbyrqix.png" alt="" />
</div>
<div id='Objetivo' style="position:absolute;z-index:99999999999999;margin-left: 225px; margin-top: 400px; height:100; width:100">
<img src="https://vignette.wikia.nocookie.net/finalfantasy/images/d/d0/FFRK_Thief_FFI.png" alt="">
</div>
<div id='Prota' style="position:absolute;z-index:99999999999999;margin-left: 0px; margin-top: 400px; height:100; width:100">
<img src="https://orig02.deviantart.net/8996/f/2014/244/d/e/mario_by_nintentofu-d7xicg0.gif" alt="" id='Walk'>
</div>

任何人都可以帮助我吗？非常感谢！

Answer 1

这是一个基本示例，您将一个事件侦听器添加到您希望Mario步行到的对象，然后使用offsetLeft属性查找移动他的位置（相对来说）。在这里，我减去了offsetWidth值，所以马里奥不能站在他的上方。如果Mario从右侧接近，您可能需要检查它，而是添加offsetWidth值。

$("#Objetivo").click(function () {
  
  $( "#Prota" ).animate({ 
    left: this.offsetLeft - this.offsetWidth
  }, 1000 );     

});

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>  

<div id='Fondo' style="position:absolute;z-index:99999999999999;margin-left: 0px; margin-top: 0px; background-color:#000000; height:600; width:800">
<img src="https://orig00.deviantart.net/6ddc/f/2018/003/4/b/principepio_by_darklordwriter-dbyrqix.png" alt="" />
</div>
<div id='Objetivo' style="position:absolute;z-index:99999999999999;margin-left: 225px; margin-top: 400px; height:100; width:100">
<img src="https://vignette.wikia.nocookie.net/finalfantasy/images/d/d0/FFRK_Thief_FFI.png" alt="">
</div>
<div id='Prota' style="position:absolute;z-index:99999999999999;margin-left: 0px; margin-top: 400px; height:100; width:100">
<img src="https://orig02.deviantart.net/8996/f/2014/244/d/e/mario_by_nintentofu-d7xicg0.gif" alt="" id='Walk'>
</div>

JavaScript：如何使用HREF移动DIV？

1 个答案: