js实现数字自由落体弹跳canvas动画效果代码-html代码-BFW代码库

js实现数字自由落体弹跳canvas动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现数字自由落体弹跳canvas动画效果代码

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

<html>
<head>
    <style>
        html, body {
            touch-action: none;
            content-zooming: none;
            margin: 0;
            padding: 0;
            background: #333;
            position: absolute;
            width: 100%;
            height: 100%;
        }

        #screen {
            width: 100%;
            height: 100%;
            margin: auto auto;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: #000;
            cursor: pointer;
        }
    </style>

</head>
<body>
    <canvas id="screen" width="642" height="679"></canvas><script>
        ! function () {
            "use strict";

            /* ==== screen setup ==== */

            var screen = {
                elem: document.getElementById("screen"),
                width: 0,
                height: 0,
                top: 0,
                left: 0,
                resize: function () {
                    var o = screen.elem;
                    screen.width = o.offsetWidth;
                    screen.height = o.offsetHeight;
                    for (screen.left = 0, screen.top = 0; o != null; o = o.offsetParent) {
                        screen.left += o.offsetLeft;
                        screen.top += o.offsetTop;
                    }
                    screen.elem.width = screen.width;
                    screen.elem.height = screen.height;
                    if (PHY2D) {
                        PHY2D.deleteStatic();
                        PHY2D.rectangle(screen.width / 2, screen.height + 50, screen.width, 100, 0, 0);
                        PHY2D.rectangle(screen.width / 2, -screen.height * 2, screen.width, 100, 0, 0);
                        PHY2D.rectangle(-50, 0, 100, screen.height * 4, 0, 0);
                        PHY2D.rectangle(screen.width + 50, 0, 100, screen.height * 4, 0, 0);
                    }
                }
            }

            screen.elem.onselectstart = function () {
                return false;
            }
            screen.elem.ondrag = function () {
                return false;
            }
            var ctx = screen.elem.getContext("2d");
            window.addEventListener('resize', screen.resize, false);

            /* ==== pointer setup ==== */

            var pointer = {
                pos:
                {
                    x: 0,
                    y: 0
                },
                active: false,
                down: function (e, touch) {
                    e.preventDefault();
                    var p = touch ? e.touches[0]: e;
                    (!touch && document.setCapture) && document.setCapture();
                    this.pos.x = p.clientX - screen.left;
                    this.pos.y = p.clientY - screen.top;
                    this.active = true;
                },
                up: function (e, touch) {
                    e.preventDefault();
                    (!touch && document.releaseCapture) && document.releaseCapture();
                    this.active = false;
                },
                move: function (e, touch) {
                    e.preventDefault();
              .........完整代码请登录后点击上方下载按钮下载查看