获取你鼠标点击位置的left与top值，然后更改角色的left与top值。通过getElementById获取角色元素。照葫芦画瓢知道吗？你参考参考超级玛丽是怎么做的。超级玛丽是根据“→”键位控制，其实就是更改了原来的top与left值。同理，你只要得到鼠标点击部位的top与left值，那么再传给角色，角色就会移动过去。建议参考超级玛丽 javascript代码，
如下参考：
1页面复制有一个id为c2的div，下面有一个子div，下面有一个按钮，事件是用来点击100个adddiv。
2在event函数中，定义一个内容为degreediv字符的字符串变量。
3然后使用jquery的append将已知的div字符串添加到c2div，如下所示。
4运行页面，现在只看到一个div，如下图所示。
5单击下面的按钮来触发添加div的逻辑，如下所示。
documentbodyonclick=function(){
var obj=documentelementFromPoint(eventclientX,eventclientY);
alert(objtagName)
}
IE chrome 兼容，火狐要兼容，我目前所知的办法非常复杂，也没有仔细研究过。
你可以去搜 索下 elementFromPoint这个火狐兼容的办法。
有两种方法
1 用组件的title属性, 这个是HTML中自带的提示属性, 当鼠标停留在组件上的时候, 就会d出提示, 比如<div title="小明">name</div>, 当鼠标停留在div上的时候, 就会有一个小黄框, 显示"小明"
2上面的提示框很不好看, 而且功能很固定, 所以你可以在组建上加一个onmouseover的事件, 记录鼠标的位置, 我写了一个例子, 你看看是不是你需要的:
<script>
var mouseX;
var mouseY;
function showName() {
var infoDiv = documentgetElementById('infoDiv');
infoDivinnerHTML = 'This is the name!';
infoDivstyleleft = mouseX;
infoDivstyletop = mouseY;
infoDivstyledisplay = "block";
}
function mouseOver(obj) {
// 此处记录鼠标停留在组建上的时候的位置, 可以自己通过加减常量来控制离鼠标的距离
mouseX = eventclientX;
mouseY = eventclientY;
}
</script>
<div onclick="showName()" onmouseover="mouseOver()" >Click here to display name</div>
<!-- 用来显示名字的DIV, 根据需要可以修改格式和布局 -->
<div id="infoDiv" style="display: none; position: absolute; width: 100px; height: 50px; background-color: #F1F19B;"></div>
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>获取鼠标在Canvas中的坐标位置</title>
<style>
#canvas{
border:1px solid #ccc;
width:300px;
height:300px;
overflow:hidden;
}
</style>
<script>
function get_canvas(ev,obj){
m_clientX = evclientX-objoffsetLeft;
m_clientY = evclientY-objoffsetTop;
documentgetElementById("tips")innerHTML = "当前坐标：X："+ m_clientX + " ,Y：" +m_clientY;
}
</script>
</head>
<body>
<div id="tips"></div>
<div id="canvas" onmousemove="get_canvas(event,this)"></div>
</body>
</html>
兼容IE8+
用 javascript 获取当前页面上鼠标（光标）位置在许多情况下都会用到，比如拖放，悬停提示（tooltip） 等等。当然，这里我们依然要面对浏览器的兼容问题，在不同的浏览器下，对这些相关的属性处理方式也不同。
参考资料
首页 → 网络编程 → JavaScript → javascript技巧 → js获取鼠标位置实例详解脚本之家[引用时间2018-1-18]
以上就是关于HTML5里面用JavaScript实现当鼠标点击，角色移动到鼠标点击的位置，要怎么实现全部的内容，包括:HTML5里面用JavaScript实现当鼠标点击，角色移动到鼠标点击的位置，要怎么实现、js如何实现：在页面中任意位置点击鼠标，则在该位置显示一个div、js中怎样获取鼠标当前点击的标签的值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）