キーハンドラを使用した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 
    } 

2つの "if"ステートメントを反転します。

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

この場合、その逆は真です。左矢印キーが押されるまで、オブジェクトは右に移動しません。

お互いに依存することなく、両方のボタンが反応しやすいようにしたいと思います。なぜこのようなことが起こり、どのように修正できますか？

Answer 1

右と左の押された変数を定義する必要があります。今すぐ最初の未定義の変数に遭遇すると、あなたのコードはdraw関数でエラーになります。

rightPressed firstおよびrightPressedが未定義の場合、エラーがスローされ、コードの実行が停止します。つまり、rightPressedが定義されていない間はleftPressedをチェックすることはありません。右矢印を押すと、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;