html5使用canvas实现小球碰撞反弹实例

缺乏、安全感 2022-06-01 23:42 268阅读 0赞

使用 html5 中的 canvas, 实现小球相互碰撞并反弹,反弹算法比较简单.

index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Bouncing balls</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>Bouncing balls</h1>
        <canvas></canvas>
    
        <script src="main.js"></script>
    </body>
    </html>

style.css

html, body { 
        margin: 0;
        padding: 0;
    }
    
    html { 
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        height: 100%;
    }
    
    body { 
        overflow: hidden;
        height: inherit;
    }
    
    h1 { 
        font-size: 2rem;
        letter-spacing: -1px;
        position: absolute;
        margin: 0;
        top: -4px;
        right: 5px;
        color: transparent;
        text-shadow: 0 0 4px white;
    }

main.js

var canvas = document.querySelector("canvas");
    var ctx = canvas.getContext("2d");
    
    var WIDTH = document.documentElement.clientWidth;
    var HEIGHT = document.documentElement.clientHeight;
    
    canvas.width = WIDTH;
    canvas.height = HEIGHT;
    
    var config = { 
        speedMin: -7,
        speedMax: 7,
        ballMin: 10,
        ballMax: 20,
        ballCount: 30
    };
    
    /** * function to generate random number * * @param max * @param min * @returns {*} */
    function random (min, max) { 
        return Math.floor(Math.random() * (max - min)) + min;
    }
    
    /** * define Ball constructor * * @param x * @param y * @param velX * @param velY * @param color * @param size */
    function Ball (x, y, velX, velY, color, size) { 
        this.x = x;
        this.y = y;
        this.velX = velX;
        this.velY = velY;
        this.color = color;
        this.size = size;
    }
    
    /** * define Ball draw method */
    Ball.prototype.draw = function () { 
        ctx.beginPath();
        ctx.fillStyle = this.color;
        ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
        ctx.fill();
    };
    
    /** * define Ball update method */
    Ball.prototype.update = function () { 
        if ((this.x + this.size) >= WIDTH) { 
            this.velX = -this.velX;
        }
        if ((this.x - this.size) <= 0) { 
            this.velX = -this.velX;
        }
    
        if ((this.y + this.size) >= HEIGHT) { 
            this.velY = -this.velY;
        }
        if ((this.y - this.size) <= 0) { 
            this.velY = -this.velY;
        }
    
        this.x += this.velX;
        this.y += this.velY;
    };
    
    /** * define Ball collision detection */
    Ball.prototype.collisionDetect = function () { 
        for (var j = 0; j < balls.length; j++) { 
            var ball = balls[j];
            if (this !== ball) {  // be care of this line, we can't compare one with itself
                var dxv = this.x + this.velX - (ball.x + ball.velX); //detect the next step which will updated
                var dyv = this.y + this.velY - (ball.y + ball.velY);
                var distance = Math.sqrt(dxv * dxv + dyv * dyv);
    
                if (distance <= this.size + ball.size) { 
                    ball.color = this.color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) +')';
    
                    // rebound the balls when collision
                    var dvx = this.velX - ball.velX;
                    var dvy = this.velY - ball.velY;
                    var dx = this.x - ball.x; // but when update just use this step
                    var dy = this.y - ball.y;
                    var xx_yy = dx * dx + dy * dy;
                    var v_dvx = (dvx * dx * dx + dvy * dx * dy) / xx_yy;
                    var v_dvy = (dvy * dy * dy + dvx * dx * dy) / xx_yy;
                    this.velX = checkSpeed(this.velX - v_dvx);
                    this.velY = checkSpeed(this.velY - v_dvy);
                    ball.velX = checkSpeed(ball.velX + v_dvx);
                    ball.velY = checkSpeed(ball.velY + v_dvy);
                }
            }
        }
    };
    
    /** * validate the speed * * @param speed * @returns {*} */
    function checkSpeed (speed) { 
        if (speed > config.speedMax) { 
            speed = config.speedMax;
        } else if (speed < config.speedMin) { 
            speed = config.speedMin;
        }
        return speed;
    }
    
    // define array to store balls
    var balls = [];
    
    /** * draw the balls loops */
    function loop () { 
        ctx.fillStyle = "rgba(0, 0, 0, 0.25)";
        ctx.fillRect(0, 0, WIDTH, HEIGHT);
    
        while (balls.length < config.ballCount) { 
            var b_var = createBall();
            var ball = new Ball(
                b_var.x,
                b_var.y,
                random(config.speedMin, config.speedMax),
                random(config.speedMin, config.speedMax),
                "rgb(" + random(0, 255) + "," + random(0, 255) + "," + random(0, 255) + ")",
                b_var.r
            );
            balls.push(ball);
        }
    
        for (var i = 0; i < balls.length; i++) { 
            balls[i].draw();
            balls[i].collisionDetect(); //detect before update
            balls[i].update();
        }
    
        // run again and again to realize the effect of the animation
        requestAnimationFrame(loop);
    }
    
    var createdBalls = [];
    
    /** * ensure the created ball will not collision * * @returns { {x: *, y: *, r: *}} */
    function createBall () { 
        var x = random(0, WIDTH);
        var y = random(0, HEIGHT);
        var r = random(config.ballMin, config.ballMax);
        for (var i = 0; i < createdBalls.length; i++) { 
            var dx = createdBalls[i].x - x;
            var dy = createdBalls[i].y - y;
            var distance = Math.sqrt(dx * dx + dy * dy);
    
            if (distance < createdBalls[i].r + r) { 
                return createBall();
            }
        }
        var ball = { 
            x: x,
            y: y,
            r: r
        };
        createdBalls.push(ball);
        return ball;
    }
    
    
    loop();

效果图:  
![这里写图片描述][SouthEast]

[SouthEast]: /images/20220602/3f72cc520c1341489e18868534038c59.png

发表评论取消回复

表情：

评论列表（有 0 条评论，268人围观）

还没有评论，来说两句吧...

相关阅读

相关小球落地反弹问题（java实现）

题目描述一球从100米高度自由落下，每次落地后反跳回原高度的一半；再落下，求它在第10次落地时，共经过多少米？第10次反弹多高？ > 图解： > > ![36b

迈不过友情╰/ 2023年09月27日 14:17/ 0 赞/ 132 阅读

相关 canvas重力小球 html+css+js

先看效果（完整代码在底部）：因为录屏软件的原因，动画看着有点迟钝，其实是动画很顺畅的~ https://space.bilibili.com/176586698

墨蓝/ 2022年11月17日 14:52/ 0 赞/ 197 阅读

相关 canvas小球连线碰撞效果 html+css+js

先看效果（完整代码在底部）： canvas小球连线碰撞完整源代码 html+css+js [这是我的B站地址~热烈欢迎][B] 实现（看注释，可一步一步跟着实

傷城~/ 2022年11月13日 00:58/ 0 赞/ 227 阅读

相关 html5使用canvas实现小球碰撞反弹实例

使用 html5 中的 canvas, 实现小球相互碰撞并反弹,反弹算法比较简单. index.html <!DOCTYPE html> <html lan

缺乏、安全感/ 2022年06月01日 23:42/ 0 赞/ 269 阅读

相关 Js写的两个小球碰撞(Canvas)

效果图: ![20180510102045447][] <!DOCTYPE html> <html> <head> <meta

不念不忘少年蓝@/ 2022年05月25日 07:18/ 0 赞/ 316 阅读

相关 HTML5之canvas彩色动感小球

一：代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t

╰+哭是因爲堅強的太久メ/ 2022年05月13日 05:24/ 0 赞/ 271 阅读

相关【Java】碰撞小球游戏

package 游戏; import javax.swing.; import java.awt.; public clas

我会带着你远行/ 2022年01月31日 07:13/ 0 赞/ 342 阅读

相关 canvas画布实现创建20个小球,小球在画布内碰壁反弹

![70][] <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-

曾经终败给现在/ 2021年09月16日 04:22/ 0 赞/ 442 阅读

相关小球碰撞（面向对象+canvas+插件封装）

一、html代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

缺乏、安全感/ 2021年09月15日 11:26/ 0 赞/ 439 阅读

相关绘制canvas彩色泡泡小球碰撞

globalCompositeOperation带来的不一样的烟花 ![20170224163016894][] 一.知识点 1.动画： setInterval(

墨蓝/ 2021年09月11日 07:54/ 0 赞/ 459 阅读