Canvas实现小球的自由落体

最新推荐文章于 2023-11-21 11:37:48 发布

小鸟哗啦啦

最新推荐文章于 2023-11-21 11:37:48 发布

阅读量493

点赞数

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

本文链接：https://blog.csdn.net/vampire10086/article/details/107949522

版权

canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas实现小球的自由落体</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        canvas {
            display: block;
        }
    </style>
</head>


<body>
    <canvas id="canvas" width="600px" height="600px"></canvas>

    <script>
        let canvas = document.getElementById("canvas");
        let Gravity = 0.8;
        let Firction = 0.9;

        function randomIntFronRange(low, high) {
            return Math.floor(Math.random() * (high - low + 1) + low)

        }

        canvas.width = window.innerWidth;
        canvas.Height = window.innerHeight;
        let ctx = canvas.getContext("2d");
        let colorArray = ["rgb(83,126,255)", "rgb(3,35,128)", "rgb(6,69,255)", "rgb(41,63,128)", "rgb(11,56,255)"]


        // var mouse = {};
        // let maxRadius = 26;
        document.addEventListener("mousedown", function (event) {
            ctx.clearRect(0, 0, canvas.width, canvas.Height);
            init();

        });
        document.addEventListener("resize", function () {
            canvas.width = window.innerWidth;
            canvas.Height = window.innerHeight;
            init();

        })

        function Ball(x, y, dx, dy, radius, color) {
            this.x = x;
            this.y = y;
            this.dy = dy
            this.dx = dx;
            this.radius = radius;
            this.color = color;


            this.draw = function () {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
                ctx.fillStyle = this.color;
                ctx.fill();
                ctx.closePath();
            }

            this.update = function () {
                if (this.y + this.radius + this.dy + Gravity > canvas.height) {
                    this.dy = -this.dy;
                    this.dy *= Firction;
                    this.dx *= Firction;

                } else {
                    this.dy += Gravity;

                }

                if (this.x + this.radius + this.dx >= canvas.width || this.x - this.radius + this.dx <= 0) {
                    this.dx = -this.dx;

                }
                this.y += this.dy;
                this.x += this.dx;
                // if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
                //     this.dx = -this.dx
                // }
                // if (this.y + this.radius > canvas.Height || this.y - this.radius < 0) {
                //     this.dy = -this.dy;

                // }

                // this.x += this.dx;
                // this.y += this.dy;
                this.draw();

                // if (mouse.x - this.x < 50 && mouse.x - this.x > -50 && mouse.y - this.y < 50 && mouse.y - this.y > -
                //     50) {

                //     if (this.radius < maxRadius) {
                //         this.radius += 1;
                //     }
                // } else if (this.radius > this.minRadius) {
                //     this.radius -= 1
                // }

            }
        }



        // let ball = new Ball(canvas.width / 2, canvas.height / 2, 10, 100, "blue");
        let ballArray = [];

        function init() {

            for (let i = 0; i < 366; i++) {
                // let radius = Math.random() * 1 + 5;
                let radius = randomIntFronRange(2, 8);
                let x = randomIntFronRange(radius, canvas.width - radius)
                // let x = Math.random() * (canvas.width - 2 * radius) + radius;
                // let y = Math.random() * (canvas.Height - 2 * radius) + radius;
                let y = randomIntFronRange(radius, canvas.height - radius);
                let dx = randomIntFronRange(-5, 5);
                let dy = randomIntFronRange(1, 2)
                // let dy = Math.random() * 5 + 10;
                let color = colorArray[Math.floor(Math.random() * 5)];
                ballArray.push(new Ball(x, y, dx, dy, radius, color));
            }
        }
        init();

        function animation() {
            requestAnimationFrame(animation);
            ctx.clearRect(0, 0, canvas.width, canvas.Height);
            //ball.update();
            for (let n of ballArray) {
                n.update();
                //n.draw();
            }
        }
        animation();


        // let run = function () {
        //     // ctx.clearRect(0,0,canvas.Width,canvas.Height);
        //     num++;        


        // }
        // run();
        // setInterval(run,10);
    </script>

</body>

</html>

来源：http://www.jq22.com/webqd6697

小鸟哗啦啦

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Canvas实现小球的自由落体

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>canvas实现小球的自由落体</title> <style> * { .
复制链接

扫一扫