JavaScript onkeydown関数が機能しない

キャンバスサークルを移動できないのはなぜですか？リスナーに何が問題なのかのヒントを教えてください。私はいくつかの間違いを犯したことを理解していますが、それらを気にしないことを理解しています。JavaScript onkeydown関数が機能しない

<!DOCTYPE html> 
<html> 
<head> 
    <title>epicGame</title> 
</head> 
<body> 
<canvas id="myCanvas" width="600px" height="600px" style="border:1px solid black"></canvas> 
<script type="text/javascript"> 
var c = document.getElementById("myCanvas"); 
var ctx = c.getContext('2d'); 
function drawCircle(){ 
ctx.beginPath(); 
ctx.fillStyle="red"; 
ctx.fill(); 
} 
var velX=50; 
var Player1={ 
    x:150, 
    y:70, 
    velX:20, 
    velY:5, 
    hp:20, 
    startAngle:40, 
}; 
function drawPlayer1(){ 
    ctx.beginPath(); 
    ctx.arc(Player1.x,Player1.y,Player1.startAngle,0,2*Math.PI); 
    ctx.fillStyle="red"; 
    ctx.fill(); 
} 
function move(key){ 
    if(key.keyCode=="32"){ 
     updatePosition(); 
    } 
} 
function updatePosition(){ 
    Player1.x+=Player1.velX; 
     ctx.arc(Player1.x,Player1.y,Player1.startAngle,0,2*Math.PI); 
} 
drawPlayer1(); 

window.addEventListener("keydown",move,false); 
</script> 
</body> 
</html>

出典

2017-09-17 Giorgi Macharashvili

あなたはどんなデバッグをしましたか？ハンドラが実行されているかどうか確認してください。実行中の場合は、ハンドラの条件が真であるかどうかを確認してください。そうであれば、更新機能が動作しているかどうかチェックしてください。 – Carcigenicate

あなたはまた、すべてのプレイヤーを1回だけドローするように見えます。値が更新されているかどうかを確認しましたが、プレーヤーは再び描画されていませんか？ – Carcigenicate

あなたがキー

var c = document.getElementById('myCanvas'); 
var ctx = c.getContext('2d'); 

// since the circle are always red, set ctx.fillStyle to red 
ctx.fillStyle = 'red'; 

var Player1={ 
    x: 150, 
    y: 70, 
    velX: 20, 
    velY: 5, 
    hp: 20, 
    startAngle: 40, 
}; 

function drawPlayer1(){ 

    ctx.beginPath(); 
    ctx.arc(Player1.x, Player1.y, Player1.startAngle, 0, 2 * Math.PI); 
    ctx.fill(); 
} 

function move(event){ 

    // the event.keyCode is Deprecated, use event.code or event.key 
    if(event.code === 'Space' || event.key === ' '){ 
     updatePosition(); 
    } 
} 

function updatePosition(){ 

    // update Player1's property 
    Player1.x += Player1.velX; 

    // erase the canvas 
    ctx.clearRect(0, 0, c.width, c.height); 

    // redraw Player1 
    drawPlayer1(); 
} 

// bind event 
window.addEventListener('keydown', move, false); 

// initialize 
drawPlayer1();

についてはを押したときにキャンバスを再描画するのを忘れ

<canvas id="myCanvas" width="600" height="600" style="border: 1px solid black;"></canvas>

キャンバスの幅と高さ（単位）、「PX」を追加する必要はありませんKeyboardEventについてもっと知りたい方はMDN KeyboardEvent

出典

2017-09-18 01:20:45

ラスタライズされていないパスに別の弧を追加するだけで、プレーヤを再描画することはありません。

変更するには、このコードブロックは：

function updatePosition(){ 
    Player1.x+=Player1.velX; 
    drawPlayer1();   // call the render method instead 
}

免責事項：

function updatePosition(){ 
    Player1.x+=Player1.velX; 
    ctx.arc(Player1.x,Player1.y,Player1.startAngle,0,2*Math.PI); 
}

代わりdrawPlayer1()メソッドを呼び出すためのコードの他の部分を見ていませんでした。

出典

2017-09-17 23:37:02 K3N

JavaScript onkeydown関数が機能しない

答えて

関連する問題