p2模拟真实的物理转盘转动动画效果代码-html代码-BFW代码库

p2模拟真实的物理转盘转动动画效果代码

代码语言：html

所属分类：动画

代码描述：p2模拟真实的物理转盘转动动画效果代码

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

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

<head>

    <meta charset="UTF-8">




    <style>
        body {
            background-color: #fff;
            margin: 0;
        }

        .centered {
            position: absolute;
            margin: auto;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        #container {
            width: 768px;
            height: 768px;
        }

        #status_label {
            position: absolute;
            top: 768px;
            width: 768px;
            color: black;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 1.5em;
            text-align: center;
            pointer-events: none;
        }

        #drawing_canvas {
            position: absolute;
        }
    </style>



</head>

<body>
    <div id="container" class="centered">
        <canvas id="drawing_canvas"></canvas>
        <div id="status_label">
            loading...
        </div>
    </div>


    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p2.min.js"></script>
    <script>
        const TWO_PI = Math.PI * 2;
        const HALF_PI = Math.PI * 0.5;
        // canvas settings
        var viewWidth = 768,
        viewHeight = 768,
        viewCenterX = viewWidth * 0.5,
        viewCenterY = viewHeight * 0.5,
        drawingCanvas = document.getElementById("drawing_canvas"),
        ctx,
        timeStep = (1/60),
        time = 0;

        var ppm = 24, // pixels per meter
        physicsWidth = viewWidth / ppm,
        physicsHeight = viewHeight / ppm,
        physicsCenterX = physicsWidth * 0.5,
        physicsCenterY = physicsHeight * 0.5;

        var world;

        var wheel,
        arrow,
        mouseBody,
        mouseConstraint;

        var arrowMaterial,
        pinMaterial,
        contactMaterial;

        var wheelSpinning = false,
        wheelStopped = true;

        var particles = [];

        var statusLabel = document.getElementById('status_label');

        window.onload = function() {
            initDrawingCanvas();
            initPhysics();

            requestAnimationFrame(loop);

            statusLabel.innerHTML = 'Give it a good spin!';
        };

        function initDrawingCanvas() {
            drawingCanvas.width = viewWidth;
            drawingCanvas.height = viewHeight;
            ctx = drawingCanvas.getContext('2d');

            drawingCanvas.addEventListener('mousemove', updateMouseBodyPosition);
            drawingCanvas.addEventListener('mousedown', checkStartDrag);
            drawingCanvas.addEventListener('mouseup', checkEndDrag);
            drawingCanvas.addEventListener('mouseout', checkEndDrag);
        }

        function updateMo.........完整代码请登录后点击上方下载按钮下载查看