Javascript鼠标摇晃游戏无法正常工作答案

【问题标题】：Javascript mouse shaking game not working properlyJavascript鼠标摇晃游戏无法正常工作
【发布时间】：2013-09-21 20:15:32
【问题描述】：

我正在尝试用 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/

【问题讨论】：

标签： javascript html cursor

【解决方案1】：

您正在计算调用 onmousemove 的次数，而不是指针实际移动的像素数。您需要做一些更复杂的操作：保存指针所在的位置，然后每次调用 onmousemove：首先，计算实际移动的像素数，然后重置指针位置。

【讨论】：

【解决方案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/

【讨论】：