Question

非常非常新的Javascript，只是想学习：）

我想要做的是在默认位置有一个图像（最终会是一个精灵），然后当我在屏幕上点击鼠标右键时，我希望图像逐渐移动到那个位置？

我做了一些研究，但没有具体找到它。

最终我希望有一个动画游戏角色，我可以使用鼠标右键在屏幕上移动。

Answer 1

就像所有其他人所说的那样远离右键单击，这是一个使用jQuery的例子。

var $follower = $("#follower"),
    mouseX = 0, 
    mouseY = 0;

$(document).click(function(e){
   mouseX = e.pageX;
   mouseY = e.pageY; 
   $follower.stop().animate({left : mouseX, top: mouseY});
});

和纯JS 更新2017使用requestAnimationFrame代替setTimeout

<强> Demo

var mouseX = 0, 
    mouseY = 0,
    follower = document.getElementById("follower"),
    xp = 0,
    yp = 0;

document.onclick = function(e){
   mouseX = e.pageX;
   mouseY = e.pageY; 
};

function animate(){
    requestAnimationFrame(animate);
    xp += (mouseX - xp) / 12;
    yp += (mouseY - yp) / 12;
    follower.style.left = xp + 'px';
    follower.style.top= yp + 'px';
}

animate();

Answer 2

最后我检查过，没有可靠的跨浏览器方式来处理右键单击，所以我建议你保持左键单击。鉴于你对Javascript非常新，你可能想要使用jQuery。为了在屏幕上设置动画对象的动画，我会指向jQuerys animate()他们有示例的地方。

Answer 3

如果可以，我会避免使用鼠标右键单击。我在Firefox和Chrome中找到了支持，但是在IE中遇到了问题。

如果你左键单击，我会使用jQuery框架（http://jquery.com/）。

您可以在页面的任何位置添加捕捉单击，然后从事件中获取坐标。使用坐标，您可以更改要移动的元素的CSS：

<html>
<head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">

jQuery(document).ready(function($){

    $(document).click(function(e){

        $('#element').animate( { "top": e.pageY + "px" }, { queue: false, duration: 1500 }).animate({ "left": e.pageX + "px" }, 1500 );

    });

</script>

</head>
<body>

<div id="element" style="width:100px; height:100px; background:red; position:absolute;"></div>

</body>
</html>

Answer 4

通常情况下，我同意弄乱鼠标右键是一个坏主意。但是在制作游戏的情况下，控制人民币实际上是完全可以接受的，如果不是这样的话。在这种情况下，控制人民币的大多数原因都会消失，它可以用来增加游戏的功能（用户首先在页面上的原因），而不是取消功能（不搞乱人民币背后的常见原因。）

那就是说，jQuery对于这类事情来说并不是最好的选择。它不适合游戏开发。相反，看看html5游戏开发。有一些不同的游戏引擎可以让这类事情变得简单，目前最好的资源列表是HTML5 Games Resource Section

Construct2甚至根本不需要太多编程理解！

将图像移动到鼠标的位置？

4 个答案: