私はプログラミングが初めてで、矢印キーを押してキャンバスの周りに正方形を移動できるコードを作成しようとしています。正方形を動かすことはできますが、その動きはあまりスムーズではありません。一度に 10 ピクセルずつ移動させているので、10 フレームの差の各位置の間にアニメーションがないため、ぎくしゃくした感じがする理由は理解できますが、より小さな増分で移動させると遠くまで移動できます。遅すぎる。私がこれまでに行ったことは以下のとおりです。
window.onload = function init() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
setInterval(gameLoop,50);
window.addEventListener('keydown',whatKey,true);
}
avatarX = 400
avatarY = 300
function gameLoop() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 800
canvas.height = 600
ctx.fillRect(avatarX,avatarY,50,50);
}
function whatKey(e) {
switch(e.keyCode) {
case 37:
avatarX = avatarX - 10;
break;
case 39:
avatarX = avatarX + 10;
break;
case 40:
avatarY = avatarY + 10;
break;
case 38:
avatarY = avatarY - 10;
break;
}
}
矢印キーを右に押すたびに、正方形がその方向に一定の速度でスムーズに移動するようにします。助けてくれてありがとう!