软件价值14-碰撞弹球

dracularking

已于 2024-02-21 10:15:05 修改

阅读量836

点赞数 16

分类专栏：软件价值文章标签： html javascript bouncing balls

于 2024-02-21 10:10:14 首次发布

本文链接：https://blog.csdn.net/dracularking/article/details/136203290

版权

软件价值专栏收录该内容

16 篇文章 1 订阅

订阅专栏

用html及javascript实现的碰撞弹球。鼠标点击一次就会生成一个小球，小球停止跳动后就会消失。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bouncing Balls Which Eventually Fade Out with Screen Border Adaptation</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100%;
        }
        canvas {
            background-color: white;
            display: block;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<script>
    document.addEventListener('DOMContentLoaded', () => {
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    let balls = []; // Store all balls

    function addBall(x, y) {
        let ball = {
            x: x,
            y: y,
            radius: 20,
            velocityX: (Math.random() - 0.5) * 10,
            velocityY: (Math.random() - 0.5) * 10,
            gravity: 0.5,
            damping: 0.9,
            opacity: 1, // New property for managing the fade-out effect
            onGround: false, // Tracks whether the ball is on the ground
        };
        balls.push(ball);
    }

    canvas.addEventListener('click', function(event) {
        addBall(event.clientX, event.clientY); // Add a new ball at the click position
    });

    function updateBall(ball, index) {
        if(ball.opacity <= 0){ // Remove ball if it's fully transparent
            balls.splice(index, 1);
            return;
        }

        ball.velocityY += ball.gravity;
        ball.y += ball.velocityY;
        ball.x += ball.velocityX;

        // Bounce off the floor
        if (ball.y + ball.radius > canvas.height) {
            ball.y = canvas.height - ball.radius;
            ball.velocityY *= -ball.damping;
            // Check if the ball is barely moving to start fading it out
            if(Math.abs(ball.velocityY) < 1) ball.onGround = true;
        }

        // Bounce off the walls
        if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
            ball.velocityX *= -ball.damping;
        }

        // Fade out if on the ground
        if(ball.onGround) ball.opacity -= 0.05;
    }

    function drawBall(ball) {
        ctx.fillStyle = `rgba(0, 0, 0, ${ball.opacity})`;
        ctx.beginPath();
        ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
        ctx.fill();
    }

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

        balls.forEach((ball, index) => {
            updateBall(ball, index);
            if(ball) drawBall(ball); // Check if ball wasn't removed
        });

        requestAnimationFrame(animate);
    }

    animate();
});
</script>
</body>
</html>

这段代码是一个简单的 HTML、CSS 和 JavaScript 组合，用于创建一个交互式的画布动画，实现了以下功能：

1. 在画布中点击鼠标时，会生成一个圆球，圆球的位置由鼠标点击位置决定。
2. 圆球会在画布中自由移动，并且具有重力和碰撞的物理效果。
3. 圆球在接触到画布边界时会发生反弹，保证不会越出画布范围。
4. 圆球会随着时间逐渐变淡，最终消失。

具体解释：

HTML 部分定义了一个画布元素 <canvas>，用于绘制动画。在 <body> 中的 <canvas> 元素有一个唯一的 ID gameCanvas。
CSS 部分设置了 <body> 和 <html> 的样式，将页面的外边距和内边距都设为 0，同时隐藏页面的滚动条，并将画布元素铺满整个页面。
JavaScript 部分负责实现画布动画的逻辑。它包括以下几个关键步骤：
1. 在页面加载完成后，获取画布元素的上下文对象 getContext('2d') 并设置画布的宽度和高度等于窗口的宽度和高度。
2. 定义了一个 balls 数组，用于存储所有的圆球对象。
3. 创建了一个 addBall 函数，用于向 balls 数组中添加新的圆球对象。每个圆球对象包括位置、半径、速度、重力、阻尼、透明度和是否在地面上等属性。
4. 给画布元素添加了点击事件监听器，在点击时调用 addBall 函数生成新的圆球。
5. 定义了 updateBall 函数和 drawBall 函数，分别用于更新圆球的状态和在画布上绘制圆球。
6. 创建了一个 animate 函数，用于实现动画效果。在该函数中，首先清空画布，然后遍历 balls 数组，更新每个圆球的状态并绘制到画布上。
7. 最后调用 requestAnimationFrame 函数递归调用 animate 函数，实现动画循环。

碰撞及弹起逻辑的解释：

1. 球的垂直速度 velocityY 会乘以一个阻尼系数 damping 来减缓速度，模拟碰撞后的能量损失。
2. 如果球的位置超出了画布的底部边界 y + radius > canvas.height，即球触底，会将球的位置调整到底部边界，并且垂直速度乘以一个负数以实现向上弹起的效果。这里同时检查了球的垂直速度是否小于一个很小的值 Math.abs(ball.velocityY) < 1，如果是，则将球的 onGround 属性设置为true，表示球已经触底。
3. 如果球的位置超出了画布的左侧或右侧边界 x + radius > canvas.width 或 x - radius < 0，即球触到了左侧或右侧的墙壁，会将球的水平速度 velocityX 乘以 -1，实现水平方向的反弹。

这样，在每一帧的动画循环中，球与边界的碰撞会根据上述逻辑进行处理，从而实现了球在碰撞后的弹起效果。

视频演示：

bouncing balls

总结：

这段代码实现了一个简单的圆球动画效果，圆球在画布上自由移动、反弹，并且会随着时间逐渐变淡消失。

dracularking

关注

16
点赞
踩
19

收藏

觉得还不错? 一键收藏
打赏
0
评论
软件价值14-碰撞弹球

2. 如果球的位置超出了画布的底部边界 y + radius > canvas.height，即球触底，会将球的位置调整到底部边界，并且垂直速度乘以一个负数以实现向上弹起的效果。3. 如果球的位置超出了画布的左侧或右侧边界 x + radius > canvas.width 或 x - radius < 0，即球触到了左侧或右侧的墙壁，会将球的水平速度 velocityX 乘以 -1，实现水平方向的反弹。这样，在每一帧的动画循环中，球与边界的碰撞会根据上述逻辑进行处理，从而实现了球在碰撞后的弹起效果。
复制链接

扫一扫