如同篮球一样，用 HTML、CSS 和 JavaScript 实现物体反弹效果

2024-02-06 12:51:03

我们每天都会看到篮球在球场上以完美的弧线落下和反弹，但你是否曾经想过如何用代码实现这个效果呢？

借助 HTML、CSS 和 JavaScript 的力量，我们可以创造出逼真的篮球反弹效果。准备好开始了吗？让我们开始吧！

HTML 代码：

在 HTML 中，我们将创建一个 div 元素作为篮球。

<div class="basketball"></div>

CSS 代码：

接下来，我们使用 CSS 来设置篮球的外观和位置。

.basketball {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: orange;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

JavaScript 代码：

最后，我们使用 JavaScript 来实现篮球的反弹效果。

// 获取篮球元素
const basketball = document.querySelector('.basketball');

// 设置篮球的初始位置
let x = 50;
let y = 50;

// 设置篮球的速度和方向
let dx = 2;
let dy = 2;

// 篮球反弹函数
function bounce() {
  // 更新篮球的位置
  x += dx;
  y += dy;

  // 如果篮球碰到顶部或底部，反转垂直方向的速度
  if (y <= 0 || y >= 100) {
    dy = -dy;
  }

  // 如果篮球碰到左右两侧，反转水平方向的速度
  if (x <= 0 || x >= 100) {
    dx = -dx;
  }

  // 将篮球的位置应用到元素上
  basketball.style.left = `${x}%`;
  basketball.style.top = `${y}%`;

  // 每 10 毫秒调用一次反弹函数
  setTimeout(bounce, 10);
}

// 启动反弹函数
bounce();