JavaScript中的關鍵處理程序問題

Question

我是JavaScript新手，並且製作了這個簡單的代碼。我打算在畫布上有一個紅色圓圈，可以用箭頭鍵左右移動。

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
var x = canvas.width/2; 
var y = canvas.height/2; 
var d = 30; 
var v = 2; 

document.addEventListener("keydown", keyDownHandler, false); 
document.addEventListener("keyup", keyUpHandler, false); 

function keyDownHandler(e) { 
    if(e.keyCode == 39) { 
     rightPressed = true; 
    } 
    if(e.keyCode == 37) { 
     leftPressed = true; 
    } 
} 
function keyUpHandler(e) { 
    if(e.keyCode == 39) { 
     rightPressed = false; 
    } 
    if(e.keyCode == 37) { 
     leftPressed = false; 
    } 
} 

function drawBall() { 
    ctx.beginPath(); 
    ctx.arc(x, y, d, 0, Math.PI*2); 
    ctx.fillStyle = "#FF0000"; 
    ctx.fill(); 
    ctx.closePath(); 
} 

function draw() { 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    drawBall(); 
    if(rightPressed) { 
    x += v 
    } 
    if(leftPressed) { 
    x -= v 
    } 
} 

setInterval(draw, 10); 

原來正是我想要的方式，除了一兩件事：當運行的代碼，它不會向左箭頭，直到右箭頭已被按下回應被按下。我試着拿這段代碼

if(rightPressed) { 
    x += v 
    } 
    if(leftPressed) { 
    x -= v 
    } 

和翻轉兩個「if」語句。

if(leftPressed) { 
    x -= v 
    } 
    if(rightPressed) { 
    x += v 
    } 

在這種情況下，反過來是正確的。在按下左箭頭鍵之前，物體不會向右移動。

我希望兩個按鈕都能夠響應，而不依賴於彼此。爲什麼會發生這種情況，我該如何解決？

Answer 1

您需要定義右和左按下的變量。當它遇到第一個未定義的變量時，你的代碼在繪圖函數上出錯。

當您首先處理rightPressed且rightPressed未定義時，會拋出錯誤並停止代碼執行。這意味着它將永遠不會檢查leftPressed而rightPressed是未定義的。一旦你點擊右箭頭，rightPressed現在有一個值，兩個檢查開始工作。

解決方法是將變量定義添加到其他頂部。

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
var x = canvas.width/2; 
var y = canvas.height/2; 
var d = 30; 
var v = 2; 
var rightPressed = false; 
var leftPressed = false;