从零开始编写一个弹跳小球小游戏，用Canvas实现弹球弹跳

见解分享

2023-05-03 04:20:36

亲自动手打造你的弹球游戏：使用 Canvas 轻松实现

想象一下，小球在屏幕上欢快地弹跳，带来无穷的乐趣！没错，制作一款弹球游戏并不是遥不可及的梦想，凭借 Canvas 的强大功能，我们就能轻松实现。让我们踏上这段编程之旅，见证小球在你的指令下自由飞舞。

准备工作：一个空白画布

创建一个 HTML 文件（index.html）和一个 JavaScript 文件（script.js）。
在 HTML 文件中，创建 <canvas> 元素，为它指定合适的宽高。
在 JavaScript 文件中，获取画布元素和它的上下文。

创造你的小球

定义一个小球对象，包括其位置、半径、颜色、以及 x 和 y 方向的速度。

绘制小球和更新位置

定义 drawBall() 函数来绘制小球。
定义 updateBall() 函数来更新小球的位置，并检测小球是否触碰到边界。
定义 drawCanvas() 函数来清除画布并绘制小球。

让小球动起来

定义 updateCanvas() 函数来更新小球的位置和绘制画布。
使用 requestAnimationFrame() 不断调用 updateCanvas() 函数，让小球动起来。

开始游戏

在 JavaScript 文件的末尾调用 updateCanvas() 函数，启动游戏。

代码示例：

// 获取画布元素
const canvas = document.getElementById('canvas');

// 获取画布上下文
const ctx = canvas.getContext('2d');

// 创建一个小球对象
const ball = {
  x: 250,
  y: 250,
  radius: 10,
  color: 'red',
  speedX: 5,
  speedY: 5
};

// 绘制小球
function drawBall() {
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI);
  ctx.fillStyle = ball.color;
  ctx.fill();
}

// 更新小球的位置
function updateBall() {
  // 更新小球的x坐标
  ball.x += ball.speedX;

  // 更新小球的y坐标
  ball.y += ball.speedY;

  // 检测小球是否碰到左右边界
  if (ball.x < 0 || ball.x > canvas.width) {
    ball.speedX = -ball.speedX;
  }

  // 检测小球是否碰到上下边界
  if (ball.y < 0 || ball.y > canvas.height) {
    ball.speedY = -ball.speedY;
  }
}

// 绘制画布
function drawCanvas() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制小球
  drawBall();
}

// 更新画布
function updateCanvas() {
  // 更新小球的位置
  updateBall();

  // 绘制画布
  drawCanvas();

  // 请求浏览器在下一次重绘之前调用updateCanvas函数
  requestAnimationFrame(updateCanvas);
}

// 启动游戏
updateCanvas();