Pressing key not triggering script in Javascript

Question

I am learning java script at the moment and don't know the problem. The spaceship is not moving and there is no error? When I press w on my keyboard, it doesn't do anything. I think the problem is by "document.onekeydown =function(e) {" but I don't know what the problem is.

let KEY_SPACE = false;
let KEY_W = false;
let KEY_S = false;
let canvas;
let ctx;
let backgroundImage = new Image();

let spaceship = {
  x: 50,
  y: 200,
  width: 100,
  height: 100,
  src: 'img/spaceship.png'
};
let rock = {
  x: 100,
  y: 200,
  width: 200,
  height: 80,
  src: 'img/rock.png'
};


document.onekeydown = function(e) {
  console.log(e.keyCode);
  if (e.keyCode == 32) {
    KEY_SPACE = true;
  }
  if (e.keyCode == 87) { ** I THINK THE PROBLEM IS HERE... **
      KEY_W = true;
  }
  if (e.keyCode == 83) {
    KEY_S = true;
  }
};
document.onekeyup = function(e) {
  console.log(e.keyCode);
  if (e.keyCode == 32) {
    KEY_SPACE = false;
  }
  if (e.keyCode == 87) {
    KEY_W = false;
  }
  if (e.keyCode == 83) {
    KEY_S = false;
  }
};

function startgame() {
  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');
  loadImages();
  draw();
  setInterval(function update() {
    if (KEY_W) {
      spaceship.y -= 1;
    }

    if (KEY_S) {
      spaceship.y = 1;
    }
    console.log("Hi");
  }, 1000);



}

function loadImages() {
  backgroundImage.src = 'img/bg.png';
  spaceship.img = new Image();
  spaceship.img.src = spaceship.src;
  rock.img = new Image();
  rock.img.src = rock.src;
}

function draw() {
  requestAnimationFrame(draw);
  ctx.drawImage(backgroundImage, -100, 0, 874, 562);
  ctx.drawImage(spaceship.img, spaceship.x, spaceship.y, spaceship.width, spaceship.height);
}

canvas {
  background-color: darkgrey;
}

<body onload="startgame()">
  <canvas id="canvas" width=" 720" height="480"></canvas>
</body>

It’s onkeydown; “on the event ‘keydown’, do this” — Ben West
– Ben West, Commented Apr 19, 2021 at 20:25

Oscar Umhin · Accepted Answer · 2021-04-19 20:24:21Z

1

At first, the method onekeydown() seems not to exist, you probably mean onkeydown()? Second, you only check the key input every second, this is not robust as you might miss inputs or produce input lags. Thus, you should consider to change the spaceship's value directly in the onkeydown() and onkeyup() methods.

answered Apr 19, 2021 at 20:24

Oscar Umhin

421 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Laux Over a year ago

Thank You soo much👏

Waseem Almoliky · Accepted Answer · 2021-04-19 23:15:04Z

as @Oscar Umhin mentioned see this

let KEY_SPACE = false;
let KEY_W = false;
let KEY_S = false;
let canvas;
let ctx;
let backgroundImage = new Image();

let spaceship = {
  x: 50,
  y: 200,
  width: 100,
  height: 100,
  src: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSknVdXFn_hKNZqIkhf2n2mJ7seozp3S3pzJwQSFPJHCKVrgkEMJ1QOR8CLCSrOXbdGpE0&usqp=CAU'
};
let rock = {
  x: 100,
  y: 200,
  width: 200,
  height: 80,
  src: 'https://img.favpng.com/18/3/2/asteroid-space-rock-outer-space-comet-png-favpng-xTh5n6HtQqakzdAebMJ4Tn5Eb_t.jpg'
};


document.onkeydown = function(e) {
  console.log(e.keyCode);
  if (e.keyCode == 32) {
    KEY_SPACE = true;
  }
  if (e.keyCode == 87) {
      KEY_W = true;
  }
  if (e.keyCode == 83) {
    KEY_S = true;
  }
  update();
};
document.onkeyup = function(e) {
  console.log(e.keyCode);
  if (e.keyCode == 32) {
    KEY_SPACE = false;
  }
  if (e.keyCode == 87) {
    KEY_W = false;
  }
  if (e.keyCode == 83) {
    KEY_S = false;
  }
};

function startgame() {
  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');
  loadImages();
  draw();
}
function update() {
    if (KEY_W) {
      spaceship.y -= 1;
    }

    if (KEY_S) {
      spaceship.y = 1;
    }
    console.log("Hi");
  }
  
function loadImages() {
  backgroundImage.src = 'https://orsted.com/-/media/WWW/Images/Corp/Campaign/SpaceSafari/space-safari-background.png';
  spaceship.img = new Image();
  spaceship.img.src = spaceship.src;
  rock.img = new Image();
  rock.img.src = rock.src;
}

function draw() {
  requestAnimationFrame(draw);
  ctx.drawImage(backgroundImage, -100, 0, 874, 562);
  ctx.drawImage(spaceship.img, spaceship.x, spaceship.y, spaceship.width, spaceship.height);
}

canvas {
  background-color: darkgrey;
}

<body onload="startgame()">
  <canvas id="canvas" width=" 720" height="480"></canvas>
</body>

Collectives™ on Stack Overflow

Pressing key not triggering script in Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related