试图使键盘的画布移动-javascript

Z时代
2024-01-10
分类：问答

我知道有很多问题已经问到了这个问题，但它并没有回答为什么我的代码无法工作。我无法把头围住它。这里是我的代码，当我按a或d键时什么也没有发生。试图使键盘的画布移动-javascript

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>

回答：

您正在抓取event.keyCode变得太早，从错误的地方。

相反，接受参数在draw功能，并使用which属性（如果有和truthy）或keyCode属性，直接上：

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); 
}