Question

我正在制作基本游戏 http://www.jasonhuman.co.za/lazerlazer

我们的想法是了解有关javascript和画布的更多信息

我遇到的问题是我在body元素上绑定了onkeypress 它只允许一次拾取一个按键并不是那么顺利 - 船在开始运动之前会滞后一秒

我怎样才能使船立即开始向正确的方向移动一旦按键发生了吗？

这是我控制按键事件的代码：

  function keyPress(e){
    //w=119, s = 115, a = 97, d = 100
    if(e.charCode==119){
      player[0].ypos -=15;
      playerImg.src = 'images/playerUp.png';
      engines.play();
    }
    if(e.charCode==115){
      player[0].ypos +=15;
      playerImg.src = 'images/playerDown.png';
      engines.play();
    }
    if(e.charCode==97){
      player[0].xpos-=15;
      playerImg.src = 'images/playerFW.png';
      engines.play();
    }
    if(e.charCode==100){
      player[0].xpos+=15;
      playerImg.src = 'images/playerFW.png';
      engines.play();
    }
    //fire a bullet
    if(e.charCode==32)
    {
      //fire a bullet
      bullets.push(new init(player[0].xpos+88,player[0].ypos+25));
      //gunshots
      var gunshot = new Audio('lazer.mp3');
      gunshot.play();
    }
  }

Answer 1

正如@Rob Baille所说，听听keydown而不是按键事件。

您的延迟是因为您在每次按键时重新加载图像。

而是仅预加载所有图像一次。

然后根据需要在密钥处理程序中将playerImg设置为适当的图像。

另外，你重复了images / playerFW.png ......那是故意的吗？

以下是使用图片预加载器重构代码的示例：

// image loader

var imageURLs=[];  // put the paths to your images here
var imagesOK=0;
var imgs=[];
imageURLs.push("images/playerUp.png");
imageURLs.push("images/playerDown.png");
imageURLs.push("images/playerFW.png");
imageURLs.push("images/playerFW.png");
loadAllImages(start);

function loadAllImages(callback){
    for (var i=0; i<imageURLs.length; i++) {
        var img = new Image();
        imgs.push(img);
        img.onload = function(){ 
            imagesOK++; 
            if (imagesOK>=imageURLs.length ) {
                callback();
            }
        };
        img.onerror=function(){alert("image load failed");} 
        img.crossOrigin="anonymous";
        img.src = imageURLs[i];
    }      
}

function start(){

    // All images have been fully pre-loaded
    // Allow the game to begin

    // Maybe hide the "Play" button until this function is triggered

}


function keyPress(e){
  //w=119, s = 115, a = 97, d = 100
  if(e.charCode==119){
    player[0].ypos -=15;
    playerImg = imgs[0];
    engines.play();
  }
  if(e.charCode==115){
    player[0].ypos +=15;
    playerImg = imgs[1];
    engines.play();
  }
  if(e.charCode==97){
    player[0].xpos-=15;
    playerImg = imgs[2];
    engines.play();
  }
  if(e.charCode==100){
    player[0].xpos+=15;
    playerImg = imgs[3];
    engines.play();
  }
  //fire a bullet
  if(e.charCode==32)
  {
    //fire a bullet
    bullets.push(new init(player[0].xpos+88,player[0].ypos+25));
    //gunshots
    var gunshot = new Audio('lazer.mp3');
    gunshot.play();
  }
}

Answer 2

我知道如何处理这两种方式。您可以更频繁地更新帧，也可以使用不同的按键方法。更快地更新您的框架

var sim_interval = 1 / 40; // number of times per second that we step the animation.

如上所述，这会将我们步进动画的每秒次数声明为变量。下一段代码是如何重新编写初始状态。

render(); // render the initial state.

  interval_callback_id = window.setInterval(step, sim_interval); // set the callback and save the identifier.

 }

每个reder代码都会有点不同你的函数render（）{可能会有所不同，它是如何升级系统的。可以在How to use spacebar and if statements in JS?

找到执行按键方法的另一种方法

Javascript - 如何平滑船舶运动

2 个答案: