Question

我正在编写一个带有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>

如果我不想发布这么长的代码，请告诉我。

Answer 1

你所缺少的是一个“游戏循环”。

在决定是否以及何时在画布周围移动形状时，您需要使用键事件来跟踪在任何给定时刻哪些键已关闭，然后检查键从基于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/

gameLoop()函数将运行20毫秒左右（您可以根据需要改变它，但这足够快以获得相当平滑的动画）。每次运行时，它会检查是否有任何键是关闭的，如果是，则调整相关的位置变量和重新绘制。如果您有其他自动移动的对象（例如，在游戏中可能有坏人），您也可以在gameLoop()函数中更新它们。

Answer 2

这不是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;
});

Answer 3

我相信你所看到的是一把钥匙的重复率。这是在用户的操作系统中设置的 - 而不是浏览器。基本上，除了要求用户更改它之外，你无能为力。

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

修改

这不是你问题的答案，但我会把它留在这里，因为重复率仍然是问题。请注意，@ nnnnnn显示有一个可行的解决方法。

是否有可能使JQuery keydown响应更快？

3 个答案: