如何使用 HTML 和 JavaScript 构建弹跳球？

简介

弹跳球是一个简单但有趣的小游戏，玩家需要控制球跳跃以避开障碍物。在这篇文章中，我们将介绍如何使用 HTML 和 JavaScript 来构建弹跳球小游戏。

HTML 结构

首先，我们需要在 HTML 文件中添加一个画布元素，用于绘制游戏界面。代码如下：

<canvas id="canvas" width="400" height="400"></canvas>

JavaScript 实现

接下来，我们需要编写 JavaScript 代码来实现弹跳球的逻辑。我们首先需要定义 Ball 类，表示游戏中的球。代码如下：

class Ball {
  constructor(x, y, radius, color) {
    this.x = x; // 球的 x 坐标
    this.y = y; // 球的 y 坐标
    this.vx = 0; // 球的 x 轴速度
    this.vy = 0; // 球的 y 轴速度
    this.radius = radius; // 球的半径
    this.color = color; // 球的颜色
  }

  // 向上跳跃
  jump() {
    this.vy = -10;
  }

  // 更新球的位置和速度
  update() {
    this.vy += 0.5; // y 轴速度逐渐增加（模拟重力）
    this.x += this.vx; // 更新 x 坐标
    this.y += this.vy; // 更新 y 坐标

    // 边界检测
    if (this.y + this.radius > canvas.height) {
      this.y = canvas.height - this.radius;
      this.vy = -Math.abs(this.vy) * 0.8; // 弹跳后速度减小（模拟能量损失）
    }
    if (this.x + this.radius > canvas.width) {
      this.x = canvas.width - this.radius;
      this.vx = -Math.abs(this.vx); // 撞到墙壁后速度反向
    }
    if (this.x - this.radius < 0) {
      this.x = this.radius;
      this.vx = Math.abs(this.vx); // 撞到墙壁后速度反向
    }
  }

  // 绘制球
  draw(ctx) {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = this.color;
    ctx.fill();
    ctx.closePath();
  }
}

接着，我们需要实例化 Ball 类，并在画布上绘制球。代码如下：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const ball = new Ball(canvas.width / 2, canvas.height / 2, 20, 'red');

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
  ball.draw(ctx); // 绘制球
  ball.update(); // 更新球的位置和速度
  requestAnimationFrame(draw); // 循环绘制
}

draw(); // 开始游戏循环

现在，我们已经能够看到球在画布上弹跳了，但是我们无法控制球跳跃。接下来，我们需要添加键盘事件监听器来控制球的跳跃。代码如下：

// 添加键盘事件监听器
document.addEventListener('keydown', (event) => {
  if (event.code === 'Space') {
    ball.jump(); // 按下空格键跳跃
  }
});

现在，我们已经完成了弹跳球小游戏的制作。完整代码如下：

<canvas id="canvas" width="400" height="400"></canvas>

<script>
  class Ball {
    constructor(x, y, radius, color) {
      this.x = x; // 球的 x 坐标
      this.y = y; // 球的 y 坐标
      this.vx = 0; // 球的 x 轴速度
      this.vy = 0; // 球的 y 轴速度
      this.radius = radius; // 球的半径
      this.color = color; // 球的颜色
    }

    // 向上跳跃
    jump() {
      this.vy = -10;
    }

    // 更新球的位置和速度
    update() {
      this.vy += 0.5; // y 轴速度逐渐增加（模拟重力）
      this.x += this.vx; // 更新 x 坐标
      this.y += this.vy; // 更新 y 坐标

      // 边界检测
      if (this.y + this.radius > canvas.height) {
        this.y = canvas.height - this.radius;
        this.vy = -Math.abs(this.vy) * 0.8; // 弹跳后速度减小（模拟能量损失）
      }
      if (this.x + this.radius > canvas.width) {
        this.x = canvas.width - this.radius;
        this.vx = -Math.abs(this.vx); // 撞到墙壁后速度反向
      }
      if (this.x - this.radius < 0) {
        this.x = this.radius;
        this.vx = Math.abs(this.vx); // 撞到墙壁后速度反向
      }
    }

    // 绘制球
    draw(ctx) {
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
      ctx.fillStyle = this.color;
      ctx.fill();
      ctx.closePath();
    }
  }

  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');

  const ball = new Ball(canvas.width / 2, canvas.height / 2, 20, 'red');

  function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
    ball.draw(ctx); // 绘制球
    ball.update(); // 更新球的位置和速度
    requestAnimationFrame(draw); // 循环绘制
  }

  // 添加键盘事件监听器
  document.addEventListener('keydown', (event) => {
    if (event.code === 'Space') {
      ball.jump(); // 按下空格键跳跃
    }
  });

  draw(); // 开始游戏循环
</script>

结语

通过本文的介绍，我们学习了如何使用 HTML 和 JavaScript 来构建弹跳球小游戏。希望这篇文章对你有所帮助！