使用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

您可以通过以下方式完成此类动作......

＆＃13;

＆＃13;

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;
    }
});

＆＃13;

canvas {
  border: 1px solid black;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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