用 jQuery 手写一个小游戏：挑战你的反应能力，趣味无穷！

前端

2023-10-05 21:32:17

体验游戏开发的乐趣：用 jQuery 手写一个小游戏

概览

准备踏上激动人心的游戏开发之旅了吗？让我们通过使用 jQuery 手写一个小游戏来释放你的创造力，同时深入了解这一强大的 JavaScript 库。这款简单易懂的游戏将让你在闲暇时间尽情放松，并挑战你的反应能力。

游戏玩法

游戏的规则明了直白：

游戏伊始，你将看到一个球和两块板子。
上方的电脑板子会自动跟随球移动。
球与板子碰撞后会反弹回来。
当球接触到你的板子时，也会反弹出去。
一旦球触及上下边界，游戏宣告结束。

代码实现

为了构建这个游戏，我们将利用 JavaScript 的继承机制。首先，我们定义一个名为 GameObject 的基础类，它包含有关元素位置、速度和大小等属性和方法。

class GameObject {
  constructor($el) {
    this.$el = $el;
    this.x = $el.offset().left;
    this.y = $el.offset().top;
    this.width = $el.width();
    this.height = $el.height();
    this.speed = 5;
  }

  move(x, y) {
    this.$el.offset({
      left: x,
      top: y
    });
  }

  update() {
    this.x += this.speed;
    this.y += this.speed;
    this.$el.offset({
      left: this.x,
      top: this.y
    });
  }
}

接下来，我们定义一个 Ball 类，它继承自 GameObject。Ball 类将控制球的移动和碰撞检测。

class Ball extends GameObject {
  constructor($el) {
    super($el);
    this.speed = 10;
    this.directionX = 1;
    this.directionY = 1;
  }

  update() {
    this.x += this.speed * this.directionX;
    this.y += this.speed * this.directionY;

    // 检测球是否撞击了上下边界
    if (this.y < 0 || this.y > $(window).height() - this.height) {
      this.directionY *= -1;
    }

    // 检测球是否撞击了左右边界
    if (this.x < 0 || this.x > $(window).width() - this.width) {
      this.directionX *= -1;
    }

    this.$el.offset({
      left: this.x,
      top: this.y
    });
  }
}

最后，我们定义一个 Paddle 类，同样继承自 GameObject。Paddle 类负责控制板子的移动和碰撞检测。

class Paddle extends GameObject {
  constructor($el) {
    super($el);
    this.speed = 5;
  }

  update() {
    this.x += this.speed * this.direction;

    // 检测板子是否撞击了左右边界
    if (this.x < 0 || this.x > $(window).width() - this.width) {
      this.direction *= -1;
    }

    this.$el.offset({
      left: this.x,
      top: this.y
    });
  }
}

在游戏主函数中，我们实例化一个 Ball 对象和两个 Paddle 对象，并持续更新它们的坐标，让游戏得以运行。

$(document).ready(function() {
  const ball = new Ball($('.ball'));
  const playerPaddle = new Paddle($('.player-paddle'));
  const computerPaddle = new Paddle($('.computer-paddle'));

  function gameLoop() {
    ball.update();
    playerPaddle.update();
    computerPaddle.update();

    // 检测球是否撞击了板子
    if (ball.isCollidingWith(playerPaddle)) {
      ball.directionX *= -1;
    }
    if (ball.isCollidingWith(computerPaddle)) {
      ball.directionX *= -1;
    }

    // 检测游戏是否结束
    if (ball.y < 0 || ball.y > $(window).height()) {
      alert('游戏结束！');
      clearInterval(intervalId);
    }

    requestAnimationFrame(gameLoop);
  }

  const intervalId = setInterval(gameLoop, 1000 / 60);
});