box2d实现重力自由落体球体碰撞交互动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：box2d实现重力自由落体球体碰撞交互动画效果代码，点击屏幕位置可创建球体自由下落和碰撞运动。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>

<html>

<head>

    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="chrome=1">

    <meta http-equiv="Content-Type" content="text/html; charset = UTF-8" />

    <title></title>

    <style>

        body {

            overflow: hidden;

            background-color: #000000;



            user-select: none;

            -webkit-user-select: none;

            -moz-user-select: none;

            -o-user-select: none;

            -ms-user-select: none;



        }

    </style>

</head>

<body>



    <div id="canvas"></div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/protoclass.js"></script>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/box2d.js"></script>


    <script>
        var canvas;

        var delta = [0, 0];
        var stage = [window.screenX, window.screenY, window.innerWidth, window.innerHeight];
        getBrowserDimensions();

        var themes = [["#10222B", "#95AB63", "#BDD684", "#E2F0D6", "#F6FFE0"],
            ["#362C2A", "#732420", "#BF734C", "#FAD9A0", "#736859"],
            ["#0D1114", "#102C2E", "#695F4C", "#EBBC5E", "#FFFBB8"],
            ["#2E2F38", "#FFD63E", "#FFB54B", "#E88638", "#8A221C"],
            ["#121212", "#E6F2DA", "#C9F24B", "#4D7B85", "#23383D"],
            ["#343F40", "#736751", "#F2D7B6", "#BFAC95", "#8C3F3F"],
            ["#000000", "#2D2B2A", "#561812", "#B81111", "#FFFFFF"],
            ["#333B3A", "#B4BD51", "#543B38", "#61594D", "#B8925A"]];
        var theme;

        var worldAABB, world, iterations = 1, timeStep = 1 / 15;

        var walls = [];
        var wall_thickness = 200;
        var wallsSetted = false;

        var bodies, elements, text;

        var createMode = false;
        var destroyMode = false;

        var isMouseDown = false;
        var mouseJoint;
        var mouse = {
            x: 0,
            y: 0
        };
        var gravity = {
            x: 0,
            y: 1
        };

        var PI2 = Math.PI * 2;

        var timeOfLastTouch = 0;

        init();
        play();

        function init() {

            canvas = document.getElementById('canvas');

            document.onmousedown = onDocumentMouseDown;
            document.onmouseup = onDocumentMouseUp;
            document.onmousemove = onDocumentMouseMove;
            document.ondblclick = onDocumentDoubleClick;

            document.addEventListener('touchstart', onDocumentTouchStart, false);
            document.addEventListener('touchmove', onDocumentTouchMove, false);
            document.addEventListener('touchend', onDocumentTouchEnd, false);

            window.addEventListener('deviceorientation', onWindowDeviceOrientation, false);

            // init box2d

            worldAABB = new b2AABB();
            worldAABB.minVertex.Set(-200, -200);
            worldAABB.maxVertex.Set(window.innerWidth + 200, window.innerHeight + 200);

            world = new b2World(worldAABB, new b2Vec2(0, 0), true);

            setWalls();
            reset();
        }


        function play() {

            setInterval(loop, 1000 / 40);
        }

        function reset() {

            var i;

            if (bodies) {

                for (i = 0; i < bodies.length; i++) {

                    var body = bodies[i]
                    canvas.removeChild(body.GetUserData().element);
                    world.DestroyBody(body);
                    body = null;
                }
            }

            // color theme
            theme = themes[Math.random() * themes.length >> 0];
            document.body.style['backgroundColor'] = theme[0];

            bodies = [];
            elements = [];

            createInstructions();

            for (i = 0; i < 10; i++) {

                createBall();

            }

        }

        //

        function onDocumentMouseDown() {

            isMouseDown = true;
            return false;
        }

        function onDocumentMouseUp() {

            isMouseDown = false;
            return false;
        }

        function onDocumentMouseMove(event) {

            mouse.x = event.clientX;
            mouse.y = event.clientY;
        }

        function onDocumentDoubleClick() {

            reset();
        }

        function onDocumentTouchStart(event) {

            if (event.touches.length == 1) {

                event.preventDefault();

                // Faking double click for touch devices

                var now = new Date().getTime();

                if (now - timeOfLastTouch < 250) {

                    reset();
                    return;
                }

                timeOfLastTouch = now;

                mouse.x = event.touches[0].pageX;
                mouse.y = event.touches[0].pageY;
                isMouseDown = true;
            }
        }

        function onDocumentTouchMove(event) {

            if (event.touches.length == 1) {

                event.preventDefault();

                mouse.x = event.touches[0].pageX;
                mouse.y = event.touches[0].pageY;

            }

        }

        function onDocumentTouchEnd(event) {

            if (event.touches.length == 0) {

                event.preventDefault();
                isMouseDown = false;

            }

        }

        function onWindowDeviceOrientation(event) {

            if (event.beta) {

                gravity.x = Math.sin(event.gamma * Math.PI / 180);
                gravity.y = Math.sin((Math.PI / 4) + event.beta * Math.PI / 180);

            }

        }

        //

        function createInstructions() {

            var size = 250;

            var element = document.createElement('div');
            element.width = size;
            element.height = size;
            element.style.position = 'absolute';
            element.style.left = -200 + 'px';
            element.style.top = -200 + 'px';
            element.style.cursor = "default";

            canvas.appendChild(element);
            elements.push(element);

            var circle = document.createElement('canvas');
            circle.width = size;
            circle.height = size;

            var graphics = circle.getContext('2d');

            graphics.fillStyle = theme[3];
            graphics.beginPath();
            graphics.arc(size * .5, size * .5, size * .5, 0, PI2, true);
            graphics.closePath();
            graphics.fill();

            element.appendChild(circle);

            text = document.createElement('div');
            text.onSelectStart = null;
            text.innerHTML = '<span style="color:' + theme[0] + ';font-size:40px;">Hello!</span><br /><br /><span style="font-size:15px;"><strong>This is how it works:</strong><br /><br />1. Drag a ball.<br />2.&nbsp;Click&nbsp;on&nbsp;the&nbsp;background.<br />3. Shake your browser.<br />4. Double click.<br />5. Play!</span>';
            text.style.color = theme[1];
            text.style.position = 'absolute';
            text.style.left = '0px';
            text.style.top = '0px';
            text.style.fontFamily = 'Georgia';
            text.style.textAlign = 'center';
            element.appendChild(text);

            text.style.left = ((250 - text.clie.........完整代码请登录后点击上方下载按钮下载查看