在 JavaScript 中使对象在画布上移动

Question

我正在尝试用 JavaScript 制作一个简单的游戏，您可以在其中使用箭头键在画布上移动一个对象（圆/球）。我花了很多时间研究和编码，但到目前为止没有运气，所以我希望你们能帮助我。现在，我只是尝试使用箭头键 [上、下、左、右] 来移动对象/球。任何人都能够弄清楚，为什么这不起作用？非常感谢您。

var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");

canvas.width = canvas.height = 500;

//the circle
function circle() {
    ctx.beginPath();
    ctx.arc(50, 50, 25, 0, Math.PI * 2, true);
    ctx.fillStyle = "blue";
    ctx.fill();
}

circle();

//move function for going left
window.addEventListener("keydown", function(event) {
    if (event.keyCode == 37) {
      circle.x = 1;
    }
})

Answer 1

你可以通过以下方式完成这样的运动......

var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
var x = 50,
    y = 50,
    radius = 15,
    speed = 3;

function circle() {
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2, true);
    ctx.fillStyle = "#07C";
    ctx.fill();
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    circle();
    requestAnimationFrame(draw);
}

draw();

window.addEventListener("keydown", function(e) {
    switch (e.key) {
        case 'ArrowUp':
            if (y > radius) y -= speed;
            break;
        case 'ArrowDown':
            if (y < canvas.height - radius) y += speed;
            break;
        case 'ArrowLeft':
            if (x > radius) x -= speed;
            break;
        case 'ArrowRight':
            if (x < canvas.width - radius) x += speed;
            break;
    }
});

canvas {
  border: 1px solid black;
}

<canvas id="mycanvas" width="200" height="200"></canvas>

^{抱歉没有给出任何解释}