1、获取角色和怪物的坐标位置：使用JavaScript的getBoundingClientRect()方法获取角色和怪物的坐标位置。
2、计算角色和怪物的距离：使用两点间距离公式计算角色和怪物的距离。
3、判断角色是否在怪物跟踪范围内：当角色和怪物的距离小于一个特定的跟踪范围时，表示角色在怪物跟踪范围内。
4、设置角色跟踪移动速度：设置怪物每次移动的速度，使它能够朝向角色并靠近。
5、在每一帧动画中执行跟踪动作：使用JavaScript的requestAnimationFrame()方法，在每一帧动画中执行跟踪动作。
下面是一个示例代码，它展示了如何实现自动跟踪功能：
// 获取角色和怪物的坐标位置
var characterRect = character.getBoundingClientRect()
var monsterRect = monster.getBoundingClientRect()
// 计算角色和怪物的距离
var distance = Math.sqrt(Math.pow(characterRect.x - monsterRect.x, 2) + Math.pow(characterRect.y - monsterRect.y, 2))
// 判断角色是否在怪物跟踪范围内
if (distance <TRACKING_RANGE) {
// 设置角色跟踪移动速度
var speedX = (characterRect.x - monsterRect.x) / distance
var speedY = (characterRect.y - monsterRect.y) / distance
// 在每一帧动画中执行跟踪动作
function trackCharacter() {
// 获取当前角色和怪物的坐标位置
characterRect = character.getBoundingClientRect()
monsterRect = monster.getBoundingClientRect()
// 计算角色和怪物的距离
distance = Math.sqrt(Math.pow(characterRect.x - monsterRect.x, 2) + Math.pow(characterRect.y - monsterRect.y, 2))
// 判断角色是否在怪物跟踪范围内
if (distance <TRACKING_RANGE) {
// 更新怪物的坐标位置
monster.style.left = monsterRect.x + speedX + "px"
monster.style.top = monsterRect.y + speedY + "px"
// 继续跟踪角色
requestAnimationFrame(trackCharacter)
}
}
trackCharacter()
}
获取你鼠标点击位置的left与top值，然后更改角色图片的left与top值。通过getElementById获取角色图片元素。照葫芦画瓢知道吗？你参考参考超级玛丽是怎么做的。超级玛丽是根据“→”键位控制图片，其实就是更改了原来图片的top与left值。同理，你只要得到鼠标点击部位的top与left值，那么再传给角色，角色就会移动过去。建议参考超级玛丽 javascript代码，思路：根据请求来进行判断用户的客户端，从而进行选择访问方法。
代码及注释如下：
<script type="text/javascript"><!--
//平台、设备和操作系统
var system = {
win: false,
mac: false,
xll: false,
ipad:false
}
//检测平台
var p = navigator.platform
system.win = p.indexOf("Win") == 0
system.mac = p.indexOf("Mac") == 0
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0)
system.ipad = (navigator.userAgent.match(/iPad/i) != null)?true:false
//跳转语句，如果是PC访问就自动跳转到所要访问的页面
if (system.win || system.mac || system.xll||system.ipad) {
//默认访问电脑端浏览
} else {
window.location.href = "手机端浏览的地址"
}
-->
</script>
