用JS实现烟花爆炸

最新推荐文章于 2023-05-13 13:49:16 发布

易安sparkle

最新推荐文章于 2023-05-13 13:49:16 发布

阅读量764

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/weixin_43675447/article/details/90695671

版权

js 专栏收录该内容

56 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            width: 100%;
            height: 100%;
            background-color: black;
            overflow: hidden;
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    var canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    var content2d = canvas.getContext("2d");
    var balls = [];  //存储对象
    //小球的基本属性
    function ball() {
        this.x = null;
        this.y = null;
        this.angle = null;
        this.vx=null;
        this.vy=null;
        this.r = null;
        this.color = null;
        this.init = function (x, y) {
            //初始化属性值
            this.x = x;
            this.y = y;
            //随机角度
            this.angle = Math.random() * Math.PI * 2;
            //随机小球的大小
            this.r = this.randomNum(10,25);
            this.vx=(this.randomNum(6,12)+Math.random()*0.5)*Math.cos(this.angle);
            this.vy=(this.randomNum(6,12)+Math.random()*0.5)*Math.sin(this.angle);
            this.color = this.randomColor();
        };
        //随机小球颜色
        this.randomColor = function () {
            return "#" + parseInt(Math.random() * 16777216).toString(16);
        };
        //随机大小
        this.randomNum = function (min, max) {
            return Math.random() * max + min;
        };
        //重绘时需移动
        this.move=function(){
            this.x+=this.vx;
            this.y+=this.vy;
            this.r-=0.3;
            this.vx*=0.93;
            this.vy*=0.93;
        }
    }
    //创建小球
    function createBall(x, y) {
        var count = parseInt(Math.random() * 30 + 10);
        for (var i = 0; i < count; i++) {
            var b = new ball();
            b.init(x, y);
            balls.push(b);
        }
    }
    //画小球
    function Draw(){
        for(var i=0;i<balls.length;i++){
            var circle=balls[i];
            circle.move();
            content2d.beginPath();
            content2d.fillStyle=circle.color;
            content2d.arc(circle.x,circle.y,circle.r,0,Math.PI*2);
            content2d.fill();
            content2d.closePath();
        }
    }
    //移除小球
    function removeBall(){
        for(var i=0;i<balls.length;i++){
            var circle=balls[i];
            if(circle.r<0.3){
                balls.splice(i,1);
                i--;
            }
        }
    }
    //计时器，即重绘
    loop();
    function loop(){
        //清除整个canvas
        content2d.clearRect(0,0,canvas.width,canvas.height);
        Draw();
        removeBall();
        window.requestAnimationFrame(loop);
    }
    canvas.onmouseup = function (e) {
        var x = e.pageX;
        var y = e.pageY;
        createBall(x, y);
    }
</script>
</body>
</html>