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 に答える