前端动画Canvas小球碰撞

广州前端开发工资水平|实施工程师转前端开发容易吗?|web前端开发 调试工具

html 代码

<!DOCTYPE html>
<head>
    <meta charset=”UTF-8″>
    <title>h5前端开发会用到动画吗:canvas</title>
    <script type=”text/javascript” src=”http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js”></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body,
        html {
            width: 100%;
            height: 100%;
        }
        canvas {
            display: block;
        }
        #mycanvas {
            background: #001022;
        }
        #mybuttons {
            position: absolute;
            bottom: 20px;
            left: 20px;
        }
        #mybuttons button {
            padding: 5px;
        }
    </style>
</head>
<body>
    <canvas id=”mycanvas” width=”500″ height=”500″></canvas>
    <div id=”mybuttons”>
        <button id=”startAnimation”>开始</button>
        <button id=”stopAnimation”>停止</button>
    </div>
</body>
<script>
    $(function () {
        var canvas = $(‘#mycanvas’);
        var ctx = canvas.get(0).getContext(‘2d’);
        var canvasWidth = canvas.width();
        var canvasHeight = canvas.height();
        $(window).resize(resizeCanvas);
        function resizeCanvas() {
            $(‘#mycanvas’).attr(‘height’, $(window).get(0).innerHeight);
            $(‘#mycanvas’).attr(‘width’, $(window).get(0).innerWidth);
            canvasWidth = canvas.width();
            canvasHeight = canvas.height();
        }
        resizeCanvas();
        var playAnimation = true;
        var startButton = $(“#startAnimation”);
        var stopButton = $(“#stopAnimation”);
        startButton.hide();
        startButton.click(function () {
            $(this).hide();
            stopButton.show();
            playAnimation = true;
            animate();
        })
        stopButton.click(function () {
            $(this).hide();
            startButton.show();
            playAnimation = false;
        })
        var Asteroid = function (x, y, radius, mass, vX, vY, aX, aY) {
            this.x = x;
            this.y = y;
            this.radius = radius;
            this.mass = mass;
            this.vX = vX;
            this.vY = vY;
            this.aX = aX;
            this.aY = aY;
        }
        var asteroid = new Array();
        for (var i = 0; i < 40; i++) {
            var x = 20 + (Math.random() * (canvasWidth – 40));
            var y = 20 + (Math.random() * (canvasHeight – 40));
            var radius = 5 + Math.random() * 10;
            var mass = radius / 2;
            var vX = Math.random() * 4 – 2;
            var vY = Math.random() * 4 – 2;
            var aX = 0;
            var aY = 0;
            asteroid.push(new Asteroid(x, y, radius, mass, vX, vY, aX, aY));
        }
        function animate() {
            ctx.clearRect(0, 0, canvasWidth, canvasHeight);
            ctx.fillStyle = ‘rgb(255,255,255)’;
            var asteroidLength = asteroid.length;
            for (var i = 0; i < asteroidLength; i++) {
                var tmpAsteroid = asteroid[i];
                tmpAsteroid.x += tmpAsteroid.vX;
                tmpAsteroid.y += tmpAsteroid.vY;
                // if(Math.abs(tmpAsteroid.vX)>0.1){
                // tmpAsteroid.vX*=0.9;
                // }else{
                // tmpAsteroid.vX=0;
                // };
                // if(Math.abs(tmpAsteroid.vY)>0.1){
                // tmpAsteroid.vY*=0.9;
                // }else{
                // tmpAsteroid.vY=0;
                // };
                for (var j = i + 1; j < asteroidLength; j++) {
                    var tmpAsteroidB = asteroid[j];
                    var dX = tmpAsteroidB.x – tmpAsteroid.x;
                    var dY = tmpAsteroidB.y – tmpAsteroid.y;
                    var distance = Math.sqrt((dX * dX) + (dY * dY));
                    if (distance < tmpAsteroid.radius + tmpAsteroidB.radius) {
                        var angle = Math.atan2(dY, dX);
                        var sine = Math.sin(angle);
                        var cosine = Math.cos(angle);
                        var x = 0;
                        var y = 0;
                        var xB = dX * cosine + dY * sine;
                        var yB = dY * cosine – dX * sine;
                        var vX = tmpAsteroid.vX * cosine + tmpAsteroid.vY * sine;
                        var vY = tmpAsteroid.vY * cosine – tmpAsteroid.vX * sine;
                        var vXb = tmpAsteroidB.vX * cosine + tmpAsteroidB.vY * sine;
                        var vYb = tmpAsteroidB.vY * cosine – tmpAsteroidB.vX * sine;
                        var vTotal = vX – vXb;
                        vX = ((tmpAsteroid.mass – tmpAsteroidB.mass) * vX + 2 * tmpAsteroidB.mass * vXb) / (tmpAsteroid.mass +
                            tmpAsteroidB.mass)
                        vXb = vTotal + vX;
                        xB = x + (tmpAsteroid.radius + tmpAsteroidB.radius);
                        tmpAsteroid.x = tmpAsteroid.x + (x * cosine – y * sine);
                        tmpAsteroid.y = tmpAsteroid.y + (y * cosine + x * sine);
                        tmpAsteroidB.x = tmpAsteroid.x + (xB * cosine – yB * sine);
                        tmpAsteroidB.y = tmpAsteroid.y + (yB * cosine + xB * sine);
                        tmpAsteroid.vX = vX * cosine – vY * sine;
                        tmpAsteroid.vY = vY * cosine + vX * sine;
                        tmpAsteroidB.vX = vXb * cosine – vYb * sine;
                        tmpAsteroidB.vY = vYb * cosine + vXb * sine;
                    }
                }
                if (tmpAsteroid.x – tmpAsteroid.radius < 0) {
                    tmpAsteroid.x = tmpAsteroid.radius;
                    tmpAsteroid.vX *= -1;
                    tmpAsteroid.aX *= -1;
                } else if (tmpAsteroid.x + tmpAsteroid.radius > canvasWidth) {
                    tmpAsteroid.x = canvasWidth – tmpAsteroid.radius;
                    tmpAsteroid.vX *= -1;
                    tmpAsteroid.aX *= -1;
                }
                if (tmpAsteroid.y – tmpAsteroid.radius < 0) {
                    tmpAsteroid.y = tmpAsteroid.radius;
                    tmpAsteroid.vY *= -1;
                    tmpAsteroid.aY *= -1;
                } else if (tmpAsteroid.y + tmpAsteroid.radius > canvasHeight) {
                    tmpAsteroid.y = canvasHeight – tmpAsteroid.radius;
                    tmpAsteroid.vY *= -1;
                    tmpAsteroid.aY *= -1;
                }
                if (Math.abs(tmpAsteroid.vX) < 10) {
                    tmpAsteroid.vX += tmpAsteroid.aX;
                }
                if (Math.abs(tmpAsteroid.vY) < 10) {
                    tmpAsteroid.vY += tmpAsteroid.aY;
                }
                ctx.beginPath();
                ctx.arc(tmpAsteroid.x, tmpAsteroid.y, tmpAsteroid.radius, 0, Math.PI * 2, false);
                ctx.closePath();
                ctx.fill();
            }
            if (playAnimation) {
                setTimeout(animate, 33);
            }
        }
        animate();
    })
</script>
</html>

前端开发app有那些|前端h5混合开发app|安卓app开发 属于前端后端

» 本文来自:前端开发者 » 《前端动画Canvas小球碰撞》
» 本文链接地址:https://www.rokub.com/4223.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!