Versuchen, eine Leinwand verschieben mit Tastatur -JavaScript

Question

Ich weiß, es gibt eine Menge Fragen bereits zu diesem Thema, aber es beantwortet nicht, warum mein Code nicht funktioniert. Ich kann einfach nicht meinen Kopf darum wickeln. Hier ist mein Code, nichts passiert, wenn ich eine oder d Tasten drücken.

canvas = document.getElementById("canvas"); 
ctx = canvas.getContext('2d'); 
var x = 40; 
var y = 40; 
var WIDTH = 40; 
var HEIGHT = 40; 
var keycode = event.keyCode; 
ctx.fillStyle = "#FF0000"; 
ctx.fillRect(x,y,WIDTH,HEIGHT); 
document.addEventListener("keydown", draw); 
function draw(){ 
    switch(keycode){ 
    case 68: 
     x += 5; 
     break; 
    case 65: 
     x -= 5; 
     break; 
    } 
    ctx.clear(); 
    ctx.fillStyle = "#FF0000"; 
    ctx.fillRect(x,y,WIDTH,HEIGHT); 
} 

<canvas id="canvas" width="500px" height="500px"></canvas> 

Answer 1

Sie greifen event.keyCode auf eine Variable zu früh und von der falschen Stelle.

Stattdessen ein Argument in Ihrer draw Funktion übernehmen, und verwenden Sie die which Eigenschaft (falls vorhanden und truthy) oder keyCode Eigenschaft auf, die direkt:

function draw(e){ 
// Arg -------^ 
    switch(e.which || e.keyCode){ 
// Key ----^^^^^^^^^^^^^^^^^^^^ 
     case 68: 
      x += 5; 
      break; 
     case 65: 
      x -= 5; 
      break; 
    } 
    ctx.clear(); 
    ctx.fillStyle = "#FF0000"; 
    ctx.fillRect(x,y,WIDTH,HEIGHT); 
} 

Einige Browser verwenden which, andere verwenden keyCode, das ist warum suchen wir nach which und, wenn es falsch ist, für keyCode.