8

私は楽しみのために小さな HTML/JavaScript/CSS3 プロジェクトに取り組んでいます。私は基本的に、ブラウザ ウィンドウで回転するホイールを作ろうとしています。ホイールを制御するために、カーソル キーのキーアップ イベントとキーダウン イベントを使用しています (ホイールを左右に回し、上下に前後にロールします)。

今のところ問題なく動作していますが、大きな問題が 2 つあります。ホイールを前方に回転させたいとします。停止せずに少し右に回転させたい場合は、上キーを押したまま右カーソル キーを押します。これを行うと、両方のイベントが登録されて回転し続ける前に、動きが一時停止します。

これは問題の 1 つです。主な問題は、前のアクションを実行した後でホイールが適切な角度になったときに、右のカーソル キーを放すと、ブラウザが両方のキーを離したものとして登録し、ホイールがじっとしている。これは、それがどのように見えるかの jsFiddle です: http://jsfiddle.net/UKqwu/1/。私はコードが混乱していることを知っていますが、それは進行中の作業/学習経験であり、プログラミングを始めて 1 か月ほどしか経っていません。

とにかく助けてくれてありがとう。私が知る限り、現時点ではChromeでのみ機能します。この段階では、互換性の問題を修正することはあまり気にしていません。

4

3 に答える 3

1

したがって、発生しているのは基本的にオペレーティングシステムに組み込まれている制限ですが、簡単な回避策があります。最初に制限について説明し、次に回避策について説明します。

（テキストボックス内で）「j」ボタンを押したままにすると、最初に「j」が表示され、少し遅れて「jjjjjjjjjjjjjjjjjjjj」が表示されます。

これはあなたが経験しているのと同じ問題です。イベントは1回発生し、しばらく待ってから、さらに何度も発生します。

ただし、解決策は簡単です。イベントが発生したときにホイールを動かす代わりに...常に更新し、どのキーが上下しているかを個別に追跡します。

キーハンドラーは次のようになります...

function KeyHandler() {
  this.left = false;
  this.right= false;
  ...
  function onKeyDown(e) {
    if (e.keyCode == 37) {
      this.left = true;
    }
    ...
  }
  function onKeyUp(e) {
    if (e.keyCode == 37) {
      this.left = false;
    }
    ...
  }
}

（キーハンドラーを本体または任意の要素にアタッチします）

あなたのホイールには、次のような更新機能があります...

wheel.update = function() {
  // the wheel is turning left
  if (wheel.keyhandler.left) {
    // make the appropriate adjustments
  }
}

そして、ゲームはこのようなものになるでしょう...

wheel = new Wheel;
setInterval(function() {
  wheel.update();
},100);

そうすれば、ホイールは常にキーの現在の状態に基づいて更新され、発生しているイベントの制限に依存する必要はありません。:)

于 2012-08-02T20:02:39.827 に答える
0

あなたが直面している問題は、ゲームが 2 つのキーの押下検出を必要としているのに、コードが 1 つのキーの押下を検出することを意図しているためです。

この行を e のサイズのループに入れます。これにより、押されたすべてのキーが 1 に設定されます。現在、1 つのキーの押下のみが検出され、一度に 1 つのキーが処理されます。

keys[e.keyCode] = 1;

このスレッドをチェックしてください。必要なものが得られるかもしれません。そのjqueryですが、概念的には役立つかもしれません。mもjsでこれに取り組んでいます...何か新しいものがあれば共有します...

jQueryで単一のキープレスイベントで複数のキーを検出する

あなたが実際にプログラミングを始めて 1 か月の場合、あなたのコードとコンセプトはクールです。

于 2012-08-06T04:13:07.823 に答える
0

これは私がかつて書いた簡単なゲームのスニペットです

//key codes
var KEY_LEFT = 37;
var KEY_RIGHT = 39;
var KEY_A = 65;
var KEY_D = 68;
var KEY_SPACE = 32;

var keys = {};

function onKeyDown(e)
{
    e = e || window.event;
    var key = window.event.keyCode || e.which; // ie

    keys[key] = true;
}

function onKeyUp(e)
{
    var key = window.event.keyCode || e.which; // ie

    delete keys[key];
}

これにより、現在のすべての主要な状態が追跡されます。次に、ゲームの「ティック」は、キーイベントに移動して適切なキーをチェックするのではなく、 setTimeout() にあります。

function gameTick()
{
    // update paddle angles
if (keys[KEY_LEFT])
    {
        // move left
    }

if (keys[KEY_RIGHT])
    {
        // move right
    }
}

これがゲームです。

于 2012-07-31T23:21:14.170 に答える