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

这是我的第一篇文章，我在试图完成我的代码时遇到了一些困难，我已经完成了基本的工作，但需要一些指导：有人愿意帮忙吗

这是我试图做的，但却在挣扎：我已经陷入停滞

添加键盘事件侦听器，使用WASD键更改speedX和speedY：
“W”快速增长 “S”迅速下降 “A”降低速度X “D”增加速度x

确保SpeedX和Speed Y的速度不要过快

在draw函数中，使用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();

---

查看到目前为止您所尝试的内容会很有帮助，但下面是事件侦听器部分的一些示例代码：

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'

之类的操作。

代码中没有键盘事件侦听器的痕迹。您已经尝试了什么？抱歉，这是我最基本的代码，我这样发布是因为我的键盘事件侦听器似乎不起作用。您可以将此代码放入JSFIDLE以便我们可以更轻松地提供帮助吗？一些可能有用的游戏代码可以在朋友的github帐户上找到。一旦我更好地理解了这个问题，如果你需要的话，我很乐意提供更多的帮助。