JS实现小球的弹性碰撞效果是一项比较基础的前端交互效果,而且很实用。以下是实现该效果的几个步骤:
步骤一:绘制小球
在 HTML 中添加一个 canvas 元素,然后在 JS 中使用 Canvas API 绘制小球。例如:
<canvas id="canvas" width="500" height="500"></canvas>
<script>
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const ball = {
x: 50,
y: 50,
r: 20,
vx: 5,
vy: 2
};
function drawBall() {
context.beginPath();
context.arc(ball.x, ball.y, ball.r, 0, Math.PI * 2);
context.closePath();
context.fill();
}
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
ball.x += ball.vx;
ball.y += ball.vy;
requestAnimationFrame(draw);
}
draw();
</script>
ball
是一个球的对象,包含了球的位置、半径和速度。drawBall()
函数用来绘制小球,draw()
函数用来不停地绘制小球和更新小球的状态。
步骤二:添加碰撞检测
在小球的运动过程中,我们需要检测小球是否与墙壁发生碰撞。如果小球碰到了墙壁,我们需要把小球的速度取反,以实现弹性碰撞效果。例如:
function checkCollision() {
if(ball.x + ball.vx > canvas.width - ball.r || ball.x + ball.vx < ball.r) {
ball.vx = -ball.vx;
}
if(ball.y + ball.vy > canvas.height - ball.r || ball.y + ball.vy < ball.r) {
ball.vy = -ball.vy;
}
}
function draw() {
// ...
checkCollision();
ball.x += ball.vx;
ball.y += ball.vy;
requestAnimationFrame(draw);
}
checkCollision()
函数用来检测球体是否与边界相交,并修改球的速度以实现弹性碰撞效果。在这个函数中,我们首先判断小球是否触碰到了右边界或左边界,如果是,则将小球的速度 x 分量取反。接着,我们检测小球是否碰到了下边界或上边界,如果是,则将小球的速度 y 分量取反。
步骤三:添加障碍物
除了墙壁,我们还可以添加一些障碍物,用来增加小球的碰撞效果。例如,我们可以在 canvas 中添加一个矩形,并检测小球是否与矩形相交。如果小球触碰到了该矩形,我们也需要将小球的速度取反以实现弹性碰撞。以下是示例代码:
const obstacle = {
x: 150,
y: 200,
width: 100,
height: 100
};
function drawObstacle() {
context.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
}
function checkCollisionWithObstacle() {
if (ball.x + ball.r > obstacle.x &&
ball.x - ball.r < obstacle.x + obstacle.width &&
ball.y + ball.r > obstacle.y &&
ball.y - ball.r < obstacle.y + obstacle.height) {
// 检测到碰撞
const disX = Math.abs(ball.x - obstacle.x - obstacle.width/2);
const disY = Math.abs(ball.y - obstacle.y - obstacle.height/2);
if(disX <= (obstacle.width/2 + ball.r) && disY <= (obstacle.height/2 + ball.r)) {
if(disX > disY) {
ball.vx = -ball.vx;
} else {
ball.vy = -ball.vy;
}
}
}
}
function draw() {
// ...
drawObstacle();
checkCollisionWithObstacle();
checkCollision();
ball.x += ball.vx;
ball.y += ball.vy;
requestAnimationFrame(draw);
}
在此示例中,在画布上绘制了一个矩形障碍物,并添加了 checkCollisionWithObstacle()
函数来检测小球是否与矩形相交。如果小球与障碍物相交,我们需要找出两者之间的距离,以便确定小球相对于障碍物的位置。然后,根据球体与障碍物相交时的位置不同,我们将小球的速度 x 或 y 分量取反,实现弹性碰撞效果。
完成上述步骤后,你就可以得到一个具有弹性碰撞效果的小球了。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS实现小球的弹性碰撞效果 - Python技术站