Javascript - how to smoothen out ship movement

Question

Im making a basic game http://www.jasonhuman.co.za/lazerlazer

The idea is to learn more about javascript and the canvas

The problem im having is that i bound onkeypress on the body element it only allows for a single keypress to be picked up at a time and its not all that smooth - the ship lags for a second before starting its movement

how can i make it that the ship immediatly starts moving in the correct direction as soon as the keypress happens?

here is my code that controls the keypress event:

  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

As @Rob Baille says, listen for keydown rather than keypress events.

Your delay is caused because you're reloading the images with every keypress.

Instead preload all the images just once.

Then set your playerImg to the appropriate image as needed in the key handler.

Also, you repeated images/playerFW.png...was that intentional?

Here's an example of your code refactored using an image preloader:

// 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

Well there are two ways I know on how to approach this. You can update your frames more often or you can use a different key down method. To update your frames faster

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

This declares as a variable the number of times per second that we step the animation, as stated above. This next bit of code is how to reder the initial state.

render(); // render the initial state.

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

 }

Every reder code will be a bit different your function render(){ might be different it is how to uptdate the system. The other way to do a key down method can be found here How to use spacebar and if statements in JS?