Игра встряхивания мыши Javascript не работает должным образом

Question

Игра встряхивания мыши Javascript не работает должным образом

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/

Applecot 21 сен. 2013, в 23:06

Источник

Теги:

javascript

html

cursor

2 ответа

Ещё вопросы

Eric P · Answer 1 · 2013-09-21T19-44-00.000Z

Вы используете лимит браузера на частоте, с которой он сообщает о событии onmousemove. См. qaru.site/questions/423579/... для получения более подробной информации.

То, что вы должны сделать, это сохранить текущую позицию мыши после каждого перемещения, а затем в обработчике событий вы можете подсчитать количество перемещенных пикселей каждый раз. В 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/

Demetrius Amadeus · Answer 2 · 2013-09-21T18-37-00.000Z

Вы подсчитываете количество вызовов, на которые называет mumemove, но не число пикселов, на которые движется указатель. Вам нужно сделать немного сложнее: сохранить позицию, в которой находится указатель, а затем каждый раз, когда вызывается onmousemove: сначала вычислите количество фактически перемещенных пикселей и второй сбросьте позицию указателя.