很高兴能够为你介绍 “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技术站