javascript中逼真的鼠标移动坐标？

Question

在javascript中，有没有办法创建一个变量和一个“模拟”平滑鼠标移动的函数？即，假设该函数模拟用户从浏览器窗口的左下角开始，然后在随机方向上缓慢移动鼠标......

该函数将返回鼠标每次调用时将移动的下一个位置的 x 和 y 值（可能会使用 setInterval 之类的东西来继续调用它以获取下一个鼠标位置）。移动应该限制在屏幕的宽度和高度上，假设鼠标永远不会离开它。

我不想要的是鼠标在整个地方超快地跳跃。我喜欢平滑的动作/位置被返回。

Answer 1

“逼真的鼠标移动”在没有上下文的情况下没有任何意义：

每个鼠标用户对这个设备都有不同的行为，他们甚至不会根据他们屏幕上的内容做出相同的手势。

如果您玩 FPS 游戏，则大部分移动将在较小的垂直范围内，沿着整个水平屏幕。
这是我在玩一些 FPS 游戏时通过记录我的鼠标移动而制作的“滴水画”。

但是，如果我们访问google 主页，我什至不使用鼠标。输入已经集中，我只是使用我的键盘。

在一些无限滚动的网站上，我的鼠标可以在同一个位置停留几十分钟，然后在某个时候转到一个链接。

我认为要获得更逼真的鼠标移动，您必须记录所有用户的手势，并重新制作它们。

此外，一个好的策略可能是获取更有可能吸引用户光标的元素的坐标（如 SO 问题下的“关闭”链接），并使移动到这些元素的坐标。

无论如何，在这里我制作了一个片段，它使用Math.random()和requestAnimationFrame()为了使物体平滑移动，有一些暂停和变速。

// Canvas is here only to show the output of  function
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
document.body.appendChild(canvas);
var maxX = canvas.width = window.innerWidth;
var maxY = canvas.height = window.innerHeight;

window.onresize = function(){  
  maxX = canvas.width = window.innerWidth;
  maxY = canvas.height = window.innerHeight;
  }
gc.onclick = function(){
  var coords = mouse.getCoords();
  out.innerHTML = 'x : '+coords.x+'<br>y : '+coords.y;
  }

var Mouse = function() {
  var that = {},
    size = 15,
    border = size / 2,
    maxSpeed = 50, // pixels per frame
    maxTimePause = 5000; // ms

  that.draw = function() {
    if (that.paused)
      return;
    that.update();
    // just for the example
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    if(show.checked){
      ctx.drawImage(that.img, that.x - border, that.y - border, size, size)
      }
    // use requestAnimationFrame for smooth update
    requestAnimationFrame(that.draw);
  }

  that.update = function() {
    // take a random position, in the same direction
    that.x += Math.random() * that.speedX;
    that.y += Math.random() * that.speedY;
    // if we're out of bounds or the interval has passed
    if (that.x <= border || that.x >= maxX - border || that.y <= 0 || that.y >= maxY - border || ++that.i > that.interval)
      that.reset();
  }
  that.reset = function() {
    that.i = 0; // reset the counter
    that.interval = Math.random() * 50; // reset the interval
    that.speedX = (Math.random() * (maxSpeed)) - (maxSpeed / 2); // reset the horizontal direction
    that.speedY = (Math.random() * (maxSpeed)) - (maxSpeed / 2); // reset the vertical direction
    // we're in one of the corner, and random returned farther out of bounds
    if (that.x <= border && that.speedX < 0 || that.x >= maxX - border && that.speedX > 0)
    // change the direction
      that.speedX *= -1;
    if (that.y <= border && that.speedY < 0 || that.y >= maxY - border && that.speedY > 0)
      that.speedY *= -1;
    // check if the interval was complete
    if (that.x > border && that.x < maxX - border && that.y > border && that.y < maxY - border) {
      if (Math.random() > .5) {
        // set a pause and remove it after some time
        that.paused = true;
        setTimeout(function() {
          that.paused = false;
          that.draw();
        }, (Math.random() * maxTimePause));

      }
    }
  }

  that.init = function() {
    that.x = 0;
    that.y = 0;
    that.img = new Image();
    that.img.src ="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAABJUlEQVRIic2WXbHEIAyFI6ESKgEJkVIJlYCTSqiESIiESqiEb19gL9Od3f5R5mbmPPHwBTgnIPJfChiAGbCkCQgtG7BpmgAWIALaDDyOI2bGuq40BasqIoKZATgwNAWHEEjHbkBsBhYRVJUYIwBNwVlFaVOwiDDPMylmQ1OwquY7d0CBrglYkuEeidoeOKt61I6Cq0ftKFhqR+0MOKuo2BQsInnndvnOr4JvR+0qWO5G7Q44K0XtOXDf96jqh9z9WXAy1FJ8l0qd+zbtvU7lWs7wIzkuh8SvpqqDi3zGndPQauDkzvdESm8xZvbh4mVZ7k8ud/+aR0C3YPk7mVvgkCZPVrdZV3dHVem6bju1roMPNmbAmq8kG+/ynD7ZwNsAVVz9dL0AhBrZq7F+CSQAAAAASUVORK5CYII=";
    that.reset();
  }
  that.getCoords = function(){
    return {x: that.x, y:that.y};
  }
  that.init()
  return that;
}
var mouse = new Mouse()
mouse.draw();

html,body {margin: 0}
canvas {position: absolute; top:0; left:0;z-index:-1}
#out{font-size: 0.8em}

<label for="show">Display cursor</label><input name="show" type="checkbox" id="show" checked="true"/><br>
<button id="gc">get cursor Coords</button>
<p id="out"></p>