0

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

4

2 回答 2

0

您正在违反浏览器报告onmousemove事件的频率限制。有关更多详细信息，请参阅此 StackOverflow 答案。

您应该做的是在每次移动后存储当前鼠标位置，然后在您的事件处理程序中，您可以计算每次移动的像素数。在 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/

于 2013-09-21T20:46:10.757 回答
0

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

于 2013-09-21T20:32:09.673 回答