I need help with keydown and keyup events

JavaScript
13

Ok, the main problem is that you’re calling your draw function on every frame, but it’s doing a lot more than draw :slight_smile: e.g. you’re binding the keypress - so when get around to pressing a key you’re running that function thousands of times and it will grind to a halt when you run out of memory.

Here is the crux of the game loop, the loop runs as fast as it can(60fps) and then on each frame you update the state of the world based on the inputs and then draw

function update(dt) {
  // STAND ANIMATION
  count += 32;
  if (count == 480) {
    count = 0;
  }
}

function draw(dt) {
  ctx.drawImage(pic, 0, 0);
  ctx.drawImage(img, count, sy, sw, sh, xpos, ypos, dw, dh);
}

function loop(timestamp) {
  var now = new Date().getTime();
  var dt = now - time;

  update(dt);
  draw(dt);

  time = now;
  window.requestAnimationFrame(loop);
}
var time = new Date().getTime();
window.requestAnimationFrame(loop);

Rather than keypresses trying to move things they should only save their state changes.

var rightKeyDown = false;
var leftKeyDown = false;

function keydown(event) {
  if (event.keyCode == 39) {
    rightKeyDown = true;
  }
  else if (event.keyCode == 37) {
    leftKeyDown = true;
  }
}
function keyup(event) {
  if (event.keyCode == 39) {
    rightKeyDown = false;
  }
  else if (event.keyCode == 37) {
    leftKeyDown = false;
  }
}

window.addEventListener("keydown", keydown, false);
window.addEventListener("keyup", keyup, false);

And then your update function does the updates.

function update(dt) {
  if (rightKeyDown) {
    xpos += moveSpeed * dt;
  }
  if (leftKeyDown) {
    xpos -= moveSpeed * dt;
  }

  // STAND AMIMATION
  count += 32;
  if (count == 480) {
    count = 0;
  }
}

Putting that all together gives you this

<html>
 <head>
   <meta charset="utf-8">
 </head>
 <body>
<canvas id="canvas" width="640" height="400"></canvas>
<canvas id="toy" width="18" height="32"></canvas>
<script type="application/javascript">
var moveSpeed=.1;

var sy=64;
var sw=32;
var sh=32;
var ypos=353;
var dw=32;
var dh=32;
var xpos=50;
var count=0;

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// Preload images
var pic = new Image();
var img=  new Image();
pic.src = "Img/Background.png";
img.src = "Img/Spritesheet1.png";

var rightKeyDown = false;
var leftKeyDown = false;

function keydown(event) {
  if (event.keyCode == 39) {
    rightKeyDown = true;
  }
  else if (event.keyCode == 37) {
    leftKeyDown = true;
  }
}
function keyup(event) {
  if (event.keyCode == 39) {
    rightKeyDown = false;
  }
  else if (event.keyCode == 37) {
    leftKeyDown = false;
  }
}

window.addEventListener("keydown", keydown, false);
window.addEventListener("keyup", keyup, false);

function update(dt) {
  if (rightKeyDown) {
    xpos += moveSpeed * dt;
  }
  if (leftKeyDown) {
    xpos -= moveSpeed * dt;
  }

  // STAND AMIMATION
  count += 32;
  if (count == 480) {
    count = 0;
  }
}

function draw(dt) {
  ctx.drawImage(pic, 0, 0);
  ctx.drawImage(img, count, sy, sw, sh, xpos, ypos, dw, dh);
}

function loop(timestamp) {
  var now = new Date().getTime();
  var dt = now - time;

  update(dt);
  draw(dt);

  time = now;
  window.requestAnimationFrame(loop);
}
var time = new Date().getTime();
window.requestAnimationFrame(loop);

</script>
</body>
</html>

Do yourself a favour and watch https://vimeo.com/105955605 it will teach you a lot about making games in js. Moving to a more Object Oriented approach will help you clean things up and not rely on global variables for all the state.

2 Likes