如何在JavaScript突围游戏中将球保持在墙壁边界内？

Question

我正在创建一个Javascript突破游戏，但有一个问题是如何将球保持在墙边界内。

在运行程序时，桨工作正常，在窗口中间创建了一个静态球。直到我设置代码以将球保持在墙壁边界（顶部、左侧和右侧）内，此时，发生了错误，整个程序停止工作。

我尝试了几种if/else变体来修复它，但无法找出代码不起作用的原因。JavaScript代码如下：

function createPaddle(gw) {
  let x0 = (gw.getWidth() - PADDLE_WIDTH) / 2;
  let y0 = PADDLE_Y;
  let paddle = GRect(x0, y0, PADDLE_WIDTH, PADDLE_HEIGHT);
  paddle.setFilled(true);
  gw.add(paddle);

  let mouseMoveAction = function(e) {
    let x = e.getX() - (PADDLE_WIDTH / 2);
    let y = PADDLE_Y;
    if (x > 0 && x <= gw.getWidth() - PADDLE_WIDTH) {
      paddle.setLocation(x, y);
    }
  };
  gw.addEventListener("mousemove", mouseMoveAction);
}


function createBall(gw) {
  let centerX = gw.getWidth() / 2;
  let centerY = gw.getHeight() / 2;
  let x0 = centerX - (BALL_SIZE / 2);
  let y0 = centerY - (BALL_SIZE / 2);
  let ball = GOval(x0, y0, BALL_SIZE, BALL_SIZE);
  ball.setFilled(true);
  gw.add(ball);

  let clickAction = function(e) {
    let vy = INITIAL_Y_VELOCITY;
    let vx = randomReal(MIN_X_VELOCITY, MAX_X_VELOCITY);
    if (randomChance()) vx = -vx;

    let step = funtion() {
      if (ball.getX() > 0 && ball.getY() > 0 &&
          ball.getX() < gw.getWidth() - BALL_SIZE &&
          ball.getY() < gw.getHeight() - BALL_SIZE) {
        ball.move(vx, vy);
      } if (ball.getX() < 0 || ball.getX() > gw.getWidth() - BALL_SIZE) {
        vx = -vx;
        ball.move(vx, vy);
      } if (ball.getY() < 0) {
        vy = -vy;
        ball.move(vx, vy);
      } else if (ball.getY() > gw.getHeight() - BALL_SIZE) {
        clearInterval(timer);
      }
    };
    let timer = setInterval(step, TIME_STEP);
  };
  gw.addEventListener("click", clickAction);
}

非常感谢你的帮助。谢谢！

Answer 1

问题是输入错误：

let step = funtion()

将其更改为：

let step = function()

考虑使用一些IDE/编辑器，它会通知您此类输入错误。我使用了visual studio代码，该代码告诉我出了问题：

• 在修正你的打字错误之前

• 修复你的错字后