javascript实现10个球随机运动、碰撞实例详解

2023年6月10日下午4:17 • JavaScript

很高兴能够为你介绍 “JavaScript实现10个球随机运动、碰撞实例详解” 的完整攻略。该攻略详细介绍了如何使用JavaScript实现10个球的随机运动和碰撞效果。下面我们来一步步详细讲解该攻略的实现过程。

HTML文件

首先，我们需要在HTML文件中创建一个 <canvas> 元素用于绘制球的运动轨迹。代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>10个小球</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="mycanvas" width="600" height="400"></canvas>
    <script src="./script.js"></script>
</body>
</html>

这里我们创建了一个 id 为 mycanvas 的 <canvas> 元素，宽度为 600，高度为 400。

JavaScript文件

接着我们需要在JavaScript文件中编写代码来实现10个随机球的运动效果。代码如下：

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

let x = [];
let y = [];
let dx = [];
let dy = [];
let radius = [];
for (let i = 0; i < 10; i++) {
  x[i] = Math.random() * canvas.width;
  y[i] = Math.random() * canvas.height;
  dx[i] = (Math.random() - 0.5) * 10;
  dy[i] = (Math.random() - 0.5) * 10;
  radius[i] = Math.random() * 40 + 10;
}

function animate() {
  requestAnimationFrame(animate);
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for (let i = 0; i < 10; i++) {
    ctx.beginPath();
    ctx.arc(x[i], y[i], radius[i], 0, Math.PI * 2, false);
    ctx.fillStyle = 'blue';
    ctx.fill();

    if (x[i] + radius[i] > canvas.width || x[i] - radius[i] < 0) {
      dx[i] = -dx[i];
    }

    if (y[i] + radius[i] > canvas.height || y[i] - radius[i] < 0) {
      dy[i] = -dy[i];
    }

    x[i] += dx[i];
    y[i] += dy[i];
  }
}

animate();

首先，我们获取了 <canvas> 元素并创建了 2d 上下文对象。然后定义了 x，y，dx，dy 和 radius 这五个数组来保存每个球的位置、速度和大小。

接着，我们使用 for 循环来生成10个随机球的位置、速度和大小。球的位置由随机生成的 x 和 y 坐标确定，速度由随机生成的 dx 和 dy 坐标方向和速率共同决定，大小由随机生成的 radius 决定。

在 animate 函数中，我们使用 requestAnimationFrame 方法来循环执行 animate 函数。每次循环开始前，我们使用 clearRect 方法清空画布。然后对于每个球，我们绘制出它的圆形，并填充颜色为蓝色。

接着，我们判断球是否碰到了画布的边界，如果是，就反转方向。最后，我们将球的位置更新为 x 和 y 坐标加上对应的速度。

这样，我们就实现了10个球的随机运动效果。

下面是两条示例说明：

示例一：改变球的颜色

for (let i = 0; i < 10; i++) {
  // ...
  let color = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`
  // 多了这一行代码，用随机颜色填充每个球
  ctx.fillStyle = color;
  ctx.fill();
  // ...
}

在每次绘制球时，我们随机生成一个颜色，然后使用 fillStyle 属性将球填充为该颜色。

示例二：添加交互

canvas.addEventListener('mousemove', function(event) {
  for (let i = 0; i < 10; i++) {
    if (Math.abs(event.clientX - x[i]) < 50 && Math.abs(event.clientY - y[i]) < 50) {
      dx[i] = (event.clientX - x[i]) / 10;
      dy[i] = (event.clientY - y[i]) / 10;
    }
  }
});

我们使用 addEventListener 方法为 canvas 元素绑定 mousemove 事件。在事件处理函数中，我们遍历所有球，如果鼠标距离球的中心小于 50，则将球的速度设置为鼠标指针与球中心之间的向量的 1/10。这样就可以在鼠标移动时通过球的反应来增加交互性。

以上就是“JavaScript实现10个球随机运动、碰撞实例详解”的完整攻略，希望能对你的学习有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript实现10个球随机运动、碰撞实例详解 - Python技术站