添加一个键盘事件侦听器，该侦听器使用WASD键更改speedX和speedY

Question

这是我的第一篇文章，我有一点麻烦，试图完成我的代码，我已经基本完成，但需要一些指导:有人愿意帮助吗?

这是我试图做的，但挣扎:我已经站住了!

添加一个键盘事件监听器，使用WASD键改变speedX和speedY:
"W"增加SpeedY'S'减少速度"A"减少SpeedX'D'增加SpeedX

确保SpeedX和Speed Y不要太快

在绘制函数中，使用speedX和speedY变量更改x和y位置。

如果圆圈在画布外，则将其移动到另一侧。例如，如果球在画布的右侧，那么将它移动到另一侧。在移动之前，要确保球完全离开边缘，否则它可能会爆裂。

下面是我到目前为止的代码:

var canvas;
var ctx;
var width  = 320;
var height = 240;
var speedX  = 0;    //how fast the ball is moving in the horizontal direction
var speedY  = 0;    //how fast the ball is moving in the vertical direction
var radius  = 10;

var x   = width  / 2  - radius;  //starting horizontal position
var y   = height / 2  - radius;  //starting vertical position

var circleColor             = "#FF0000";
var rectangleColorBg        = "#FFFFFF";
var rectangleColorStroke    = "#000000";

function init() {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    return setInterval(draw, 10);
}

function circle(x,y,r, color) {
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(x, y, r, 0, Math.PI*2, true);
    ctx.fill();
}
function rect(x,y,w,h) {
    ctx.fillStyle   = rectangleColorBg;
    ctx.strokeStyle = rectangleColorStroke;
    ctx.beginPath();
    ctx.rect(x,y,w,h);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
}

function draw() {
  //update based on speedX and speed y
  //update if the ball position is not inside the canvase.
  //draw the background - see function above
  rect(0,0,width,height);
  //
  //draw the circle - see function above
  circle(x, y, radius, circleColor);
}

init();

Answer 1

看看您到目前为止所做的尝试是有帮助的，但这里是事件侦听器部分的一些示例代码:

document.addEventListener('keydown', function(event) {
    if(event.keyCode == 37) {
        // Move ('left');
    }
    else if(event.keyCode == 39) {
        // Move ('right');
    }
    else if(event.keyCode == 38) {
        // Move ('up');
    }
    else if(event.keyCode == 40) {
        // Move ('down');
    }
}

你对事件监听器了解多少了?你也可以做'keyup'等