在javascript中逼真的鼠标移动坐标？ [英] Realistic mouse movement coordinates in javascript?
问题描述
在javascript中，有没有办法可以创建变量和模拟平滑鼠标移动的功能？即，假设函数模拟用户从浏览器窗口的左下角开始，然后慢慢地随机移动鼠标...
In javascript, is there a way I can create a variable and a function that "simulates" smooth mouse movement? i.e., say the function simulates a user starts from lower left corner of the browser window, and then moves mouse in a random direction slowly...
该函数将返回x和鼠标在每次调用时移动的下一个位置的值（可能会使用像setInterval这样的东西来继续调用它以获得下一个鼠标位置）。运动应该限制在屏幕的宽度和高度，假设鼠标永远不会离开它。
The function would return x and y value of the next position the mouse would move each time it is called (would probably use something like setInterval to keep calling it to get the next mouse position). Movement should be restricted to the width and height of the screen, assuming the mouse never going off of it.
我不想要的是鼠标跳过超级快到处都是。我喜欢返回平稳的动作/位置。
What I don't want is the mouse to be skipping super fast all over the place. I like smooth movements/positions being returned.
推荐答案
逼真的鼠标移动并不意味着没有上下文：
A "realistic mouse movement" doesn't mean anything without context :
每个鼠标用户对此设备都有不同的行为，他们甚至不会根据屏幕上显示的内容做同样的手势。
Every mouse user have different behaviors with this device, and they won't even do the same gestures given what they have on their screen.
如果你进行FPS游戏，整个水平屏幕上的移动大多数都在一个很小的垂直范围内。
这是我在玩FPS游戏时录制我的鼠标动作制作的滴水画。
If you take an FPS game, the movements will in majority be in a small vertical range, along the whole horizontal screen.
Here is a "drip painting" I made by recording my mouse movements while playing some FPS game.
如果我们采用谷歌主页，我甚至不使用鼠标。输入已经集中，我只使用我的键盘。
If we take the google home page however, I don't even use the mouse. The input is already focused, and I just use my keyboard.
在一些无限滚动的网站上，我的鼠标可以在几十分钟内保持在同一位置，只是在某个时刻转到某个链接。
On some infinite scrolling websites, my mouse can stay at the same position for dozens of minutes and just go to a link at some point.
我认为为了实现更逼真的鼠标移动，你必须记录所有用户的手势，然后重新调整它们。
I think that to get the more realistic mouse movements possible, you would have to record all your users' gestures, and repro them.
此外，一个好的策略可能是获得更有可能吸引用户光标的元素的坐标（如SO问题下的关闭链接）并制作移动到这些元素的坐标。
Also, a good strategy could be to get the coordinates of the elements that will attract user's cursor the more likely (like the "close" link under SO's question) and make movements go to those elements' coordinates.
无论如何，我在这里制作了一个使用 Math.random（）的片段和$ code> requestAnimationFrame（）为了使对象平稳移动，有时暂停和变速。
Anyway, here I made a snippet which uses Math.random() and requestAnimationFrame() in order to make an object move smoothly, with some times of pausing, and variable speeds.
// 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>
这篇关于在javascript中逼真的鼠标移动坐标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
