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/

该gameLoop()函数将运行 20 毫秒左右（您可以根据需要改变它，但这对于相当流畅的动画来说已经足够快了）。每次运行时，它都会检查是否有任何键被按下，如果是，则调整相关的位置变量并重新绘制。如果您有其他自动移动的对象（例如，在游戏中可能有坏人），您也会在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

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

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

编辑

这不是您问题的答案，但我将把它留在这里，因为重复率仍然是问题。请注意，@nnnnnn 表明存在可行的解决方法。

于 2012-11-24T04:29:42.410 回答