title: I am trying to move my character with the arrow keys but it doesn't move
body: <p>I want to make my character move using the arrow keys, but it is not working and I have no idea why.</p>
  
  <p>This is for an offline shooter game I'm trying to make. I have tried not using objects but this will soon become multiplayer so I don't want to make new files constantly.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var img = new Image();
  var x = 0;
  var y = 0;
  var Keys = {
    up: false,
    down: false,
    left: false,
    right: false
  };
  img.src = "images/char1.png";
  
  let player = function player(x, y) {
    this.x = x;
    this.y = y;
    this.speed = 5;
    this.health = 100;
  };
  
  window.onkeydown = function(e) {
    var kc = e.keyCode;
    e.preventDefault();
  
    if (kc === 37) {
      Keys.left = true;
    } else if (kc === 38) {
      Keys.up = true;
    } else if (kc === 39) {
      Keys.right = true;
    } else if (kc === 40) {
      Keys.down = true;    
    }
  };
  
  window.onkeyup = function(e) {
    var kc = e.keyCode;
    e.preventDefault();
  
    if (kc === 37) {
      Keys.left = false;
    } else if (kc === 38) {
      Keys.up = false;
    } else if (kc === 39) {
      Keys.right = false;
    } else if (kc === 40) {
      Keys.down = false;
    }
  };
  
  function move() {
    if (Keys.left) {
      x -= player.speed;
    }else if (Keys.right) {
      x += player.speed;
    }else if (Keys.up) {
      y -= player.speed;
    }else if (Keys.down) {
      y += player.speed;    
    }
  }
  function renderObject() {
    ctx.drawImage(img, 0, 0, 32, 48, 0, 0, 32, 48);
  }
  
  function draw() {
    renderObject();
    move();
  }
  
  setInterval(draw, 10);
  </code></pre>
  
  <p>I expect the character to move when I press the arrow keys, but it doesn't move at all.</p>