canvas 无规则小球碰撞

1、利用canvas制造不同大小、随机颜色、随机速度的无规则小球碰撞，代码如下：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>不同颜色大小的小球碰撞效果</title>
    </head>
    <style type="text/css">
        #myCanvas {
            border: 1px solid #000000;
        }
    </style>
    <body>
        <canvas id="myCanvas" width="500" height="500">浏览器不支持Canvas</canvas>
    </body>
</html>


<script type="text/javascript">
    var car = document.getElementById("myCanvas");

    var ctx = car.getContext("2d");
    var h = 500;
    var w = 500;

    //产生随机值
    function rNumber(num) {
        return Math.random() * num;
    }

    function Bobble() {
        //起始点x
        this.x = rNumber(400) + 50; //(50,450)
        //起始点y
        this.y = rNumber(400) + 50; //(50,450)
        //半径
        this.r = rNumber(40) + 10; //(10,50)

        //小球运动速度（X方向）
        this.speedX = rNumber(4) + 2; //(2,6)
        //小球运动速度（Y方向）
        this.speedY = rNumber(4) + 2; //(2,6)

        //随机颜色
        this.color = randomHexColor();
    }

    // show() : 创造小球
    Bobble.prototype.show = function() {
        motion(this.x, this.y, this.r, this.color)
    }

    // run() : 小球运动
    Bobble.prototype.run = function() {

        //改变X的坐标
        this.x = this.x + this.speedX;

        //当x的位置加上半径大于等于总宽度的时候，代表小球刚好与右边边框相碰
        //当x的位置加上半径小于等于0的时候，代表小球刚好与左边边框相碰
        if (this.r + this.x >= w || this.x - this.r <= 0) {
            //当判断成立时，代表速度要取相反值，小球才会进行反方向运动
            this.speedX = -this.speedX;
        }

        //Y方向的位置变化规律同X方向的位置变化一样

        this.y = this.y + this.speedY;

        if (this.r + this.y >= h || this.y - this.r <= 0) {
            this.speedY = -this.speedY;
        }

    }

    //创建完小球后，把对应小球的对象储存起来
    var newData = [];
    //制造100个小球，这里可以修改成你想要的数量
    for (var i = 0; i < 100; i++) {
        var bobble = new Bobble();
        //添加小球对象
        newData.push(bobble);
        //创建小球
        bobble.show();
    }

    setInterval(() => {
        //清除内容
        ctx.clearRect(0, 0, w, h);
        for (var i = 0; i < newData.length; i++) {
            var ball = newData[i];
            //小球运动
            ball.run();
            //小球产生新的位置
            ball.show()
        }
    }, 10)


    //创建小球的方法
    function motion(x, y, r, color) {
        ctx.beginPath();
        ctx.arc(x, y, r, 0, Math.PI * 2);

        ctx.fillStyle = color;
        ctx.fill();

        ctx.strokeStyle = color;
        ctx.stroke();
        ctx.closePath();
    }

    //随机生成十六进制颜色
    function randomHexColor() {
        //生成ffffff以内16进制数
        var hex = Math.floor(Math.random() * 16777216).toString(16);
        //while循环判断hex位数，少于6位前面加0凑够6位
        while (hex.length < 6) {
            hex = '0' + hex;
        }
        //返回‘#'开头16进制颜色
        return '#' + hex;
    }
</script>
posted @ 2021-07-07 15:07 凌晨的粥阅读(252) 评论(0) 收藏举报
刷新页面返回顶部
凌晨！

canvas 无规则小球碰撞

公告
