1

JQuery と HTML5 キャンバス タグを使用して単純なページを作成しています。このページでは、上に「w」、下に「s」、左に「a」、右に「d」を押してキャンバス上の図形を移動します。私はそれをすべて機能させましたが、キーを押すと形状が一定の速度で動き始めるようにしたいと思います。現在、ある種の保留期間があり、その後動きが始まります。動きをすぐに発生させるにはどうすればよいですか？

これが私のコードの重要な部分です：

<script src="jquery.js"></script>
<script src="JQuery.print.js"></script>    
<body>
<canvas id="myCanvas" width="500" height="200" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<br><br>
start navigating<input type="text" id = "enter"/>
<div id = "soul2">
coords should pop up here
</div>
<div id = "soul3">
key should pop up here
</div>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//keypress movements
var xtriggered = 0;
var keys = {};
var north = -10;
var east = 10;
var flipednorth = 0;

$(document).ready(function(e){
  $("input").keydown(function(){
    keys[event.which] = true;
    if (event.which == 13) {
         event.preventDefault();
      }
    //press w for north
    if (event.which == 87) {
         north++;
         flipednorth--;
      }
    //press s for south
    if (event.which == 83) {
         north--;
         flipednorth++;
      }
    //press d for east
     if (event.which == 68) {
         east++;
      }
    //press a for west
    if (event.which == 65) {
         east--;
      }
     var  msg = 'x: ' + flipednorth*5 + ' y: ' + east*5;
     ctx.beginPath();
     ctx.arc(east*6,flipednorth*6,40,0,2*Math.PI);
     ctx.stroke();
     $('#soul2').html(msg);
    $('#soul3').html(event.which );
     $("input").css("background-color","#FFFFCC");
  });

  $("input").keyup(function(){
    delete keys[event.which];
    $("input").css("background-color","#D6D6FF");
  });
});

</script>

これほど長いコードを投稿するべきではないかどうか教えてください。

4

3 に答える 3

11

あなたが見逃しているのは「ゲームループ」です。

キャンバス上で図形を移動するかどうか、いつ移動するかを決定する際に、キーの上下に直接反応するのではなく、キー イベントを使用して、特定の瞬間にどのキーが押されているかを追跡し、キーの状態をsetTimeout()キーイベントとは独立して実行されるベースのループ。

keys特定のキーがいつでも押されているかどうかを追跡する変数を使用して、これを開始しました。

// in keydown
keys[event.which] = true;
// in keyup
delete keys[event.which];

...定義されていないことを除いてevent-イベントハンドラーのパラメーターにする必要があり、コードのどれも実際に値をチェックしませんkeys.

これが私が話していることの単純化されたバージョンです：

$(document).ready(function(e){
  var keys = {};

  $("input").keydown(function(event){
    keys[event.which] = true;
  }).keyup(function(event){
    delete keys[event.which];
  });

  function gameLoop() {
    // w for north
    if (keys[87]) {
       north++;
       flipednorth--;
    }
    //press s for south
    if (keys[83]) {
       north--;
       flipednorth++;
    }
    // etc. for other keys

    // code to move objects and repaint canvas goes here

    setTimeout(gameLoop, 20);
  }
  gameLoop();
});

デモ: http://jsfiddle.net/ktHdD/1/

関数は 20 ミリ秒程度で実行されgameLoop()ます (必要に応じてこれを変更できますが、適度に滑らかなアニメーションには十分な速さです)。実行するたびに、キーが押されているかどうかを確認し、押されている場合は、関連する位置変数を調整して再描画します。自動的に動き回る他のオブジェクトがある場合 (たとえば、ゲームには悪者がいる可能性があります)、それらもgameLoop()関数内で更新します。

于 2012-11-24T04:51:12.373 に答える
1

jQueryではありません。メモ帳でもまったく同じ遅延が見られます。

あなたがしなければならないことはこれです

var keydown=false;
$(document).on('keydown', function(e){
    if (!keydown) 
    {
        keydown=e.which;
        console.log('start moving and keep moving');
    }
}).on('keyup', function(){
    console.log("stop moving");
    keydown=false;
});​
于 2012-11-24T04:28:33.623 に答える
0

あなたが見ているのは、キーのリピート率だと思います。これは、ブラウザではなく、ユーザーの OS で設定されます。基本的に、ユーザーに変更を依頼する以外にできることはありません。

http://windows.microsoft.com/en-US/windows-xp/help/adjust-the-character-repeat-rate

編集

これはあなたの質問に対する答えではありませんが、リピート率が依然として問題であるため、ここでは省略します。@nnnnnn が実行可能な回避策があることを示したことに注意してください。

于 2012-11-24T04:29:42.410 に答える