小球漫游记——用canvas模拟自由落体运动

前端

2023-10-07 12:23:38

在 Canvas 上模拟自由落体运动：一个趣味十足且极具教育意义的交互式体验

什么是自由落体？

自由落体是指一个物体在重力作用下无任何阻力的运动。在这个引人入胜的互动式体验中，我们将利用 Canvas 元素，一个强大的 HTML5 图形工具，模拟自由落体运动。准备好踏上一个探索物理定律、代码和创造力的奇妙旅程了吗？

了解所需工具

为了构建我们的自由落体模拟器，我们需要以下工具：

文本编辑器： 用于编写代码。
网络浏览器： 用于运行代码。
Canvas 元素： 用于绘制图形。

步骤指南

创建 HTML 文件： 创建一个新文件并将其命名为 "index.html"。
添加脚本链接： 在<head>部分添加一个 <script> 标签，链接到包含代码的 "script.js" 文件。
创建 Canvas： 在<body>部分添加一个 <canvas> 元素，并设置其宽度和高度。
编写 JavaScript 代码： 在 "script.js" 文件中，编写以下代码：

// 获取 Canvas 元素
const canvas = document.getElementById("canvas");

// 获取 Canvas 上下文
const ctx = canvas.getContext("2d");

// 创建一个小球对象
const ball = {
  x: 100,
  y: 0,
  radius: 10,
  speedX: 5,
  speedY: 0,
  gravity: 0.5
};

// 更新小球的位置
function updateBall() {
  // 更新小球的速度
  ball.speedY += ball.gravity;

  // 更新小球的位置
  ball.x += ball.speedX;
  ball.y += ball.speedY;

  // 检测小球是否与地面或墙壁碰撞
  if (ball.y + ball.radius > canvas.height) {
    // 小球与地面碰撞
    ball.speedY = -ball.speedY;
  }

  if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
    // 小球与墙壁碰撞
    ball.speedX = -ball.speedX;
  }
}

// 绘制小球
function drawBall() {
  // 设置填充样式为红色
  ctx.fillStyle = "red";

  // 绘制一个圆形
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI);
  ctx.fill();
}

// 游戏循环
function gameLoop() {
  // 清空 Canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 更新小球的位置
  updateBall();

  // 绘制小球
  drawBall();

  // 继续游戏循环
  requestAnimationFrame(gameLoop);
}

// 启动游戏循环
gameLoop();