Question

我正在尝试在Javascript中创建鼠标抖动游戏，您尝试尽可能快地移动光标。理想情况下，您可以为光标移动的每个像素获得一个点。

但是，我的原型没有按预期工作。在原型中，每次光标在按钮上移动时，都会给出这些点。当我慢慢移动光标时，它的工作原理（每像素一个点），但是当我更快地移动光标时，事情就开始出错了。例如，按钮的高度为300像素。只需在按钮上垂直向下滑动光标就可以获得300分，但实际上，我只能获得6分或7分。

我想弄清楚为什么会这样。这可能是显示器刷新率的硬件问题吗？如果问题不是硬件，我如何修改代码以使游戏按预期工作？

源代码：

<form name='score'><input name='scorer' type='text' value='0' style='border:none; font-size:22pt; text-align:center;' readonly></form><p>
<p id="scorearea"><button style="font-size:32pt;width:100%;height:300px;" onmousemove=document.score.scorer.value++>Prototype</button></p>

原型的jsFiddle：http://jsfiddle.net/MADBt/

Answer 1

您正在计算调用 onmousemove 的次数，但不计算指针实际移动的像素数。你需要做一些更复杂的事情：保存指针所在的位置，然后每次调用 onmousemove ：首先，计算实际移动的像素数，然后重置指针位置。 / p>

Answer 2

您遇到浏览器报告onmousemove事件的频率限制。有关详细信息，请参阅this StackOverflow answer。

您应该做的是在每次移动后存储当前鼠标位置，然后在事件处理程序中，您可以计算每次移动的像素数。在jQuery中它看起来像这样：

var prevX, prevY, score = 0;
$('button').mousemove(function(e) {
    if (prevX === undefined || prevY === undefined) {
        score += 1;
    } else {
        dx = Math.abs(e.pageX - prevX);
        dy = Math.abs(e.pageY - prevY);
        score += Math.floor(Math.sqrt(dx * dx + dy * dy));
    }
    prevX = e.pageX;
    prevY = e.pageY;
    console.log(score);
    $('input').val(score);
});

查看http://jsfiddle.net/MADBt/1/

Javascript鼠标抖动游戏无法正常工作

2 个答案: