Question

我正在制作游戏，我想将一个元素（实际上是角色）移动到我点击页面的任何地方。（实际上是mousedown）

我相信使用脚本可以改变元素在mousedown上的位置，但我不知道该怎么做。

我需要一个简单的工作示例，然后我会弄清楚如何使其适应我的网站，但我找不到一个。

我尝试了一些简单的移动，并找到了如何使用键盘移动它的教程，但它不是我想要的，也找不到如何使用鼠标。

我在这里测试它，虽然我正在快速编写代码并且大部分时间都没有工作： http://chusmix.com/game/movechar.php

一些建议，代码，链接任何东西都会受到欢迎。感谢

Answer 1

你走了：

HTML：

<div id="area">
    <img src="http://placekitten.com/80/80" id="character">
</div>

JavaScript的：

var area = $('#area')[0];
    character = $('#character')[0];

$(area).click(function(e) {
    if ( e.target !== this ) { return; }
    var charWidth = $(character).width(),
        max = $(this).width() - charWidth,
        x = e.offsetX - charWidth/2,
        y = e.offsetY - charWidth/2;
    $(character).css({
        left: x < 0 ? 0 : x > max ? max : x,
        top: y < 0 ? 0 : y > max ? max : y
    });  
});

现场演示： http://jsfiddle.net/WUjKM/2/show/

不过，我知道这是jQuery :/。如果您需要非jQuery解决方案，请告诉我，我会重写它。

Answer 2

我设法只使用javascript：

<html>
<head>
<script type="text/javascript">
function showCoords(evt){
  document.getElementById("character").style.left = evt.pageX;
  document.getElementById("character").style.top = evt.pageY;
}
</script>
</head>

<body onmousedown="showCoords(event)">
<div id="character" style="position: absolute; top: 100px; width: 80px; height: 40px; background:black;"> Char </div>
</body>
</html>

感谢所有答案

如何将元素移动到用户点击的位置？

2 个答案: