Question

这是我的第一篇文章，我在尝试完成代码时遇到了一些麻烦，我已经完成了基础知识，但需要一些指导：有谁愿意提供帮助？

这是我正在尝试做的事情，但却在努力：我已经停滞不前了！

添加一个键盘事件监听器，使用WASD键更改speedX和speedY：
'W'增加SpeedY 'S'减少SpeedY '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'等。

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

1 个答案: