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();
                    var p = touch ? e.touches[0]: e;
                    if (this.active) {
                        this.pos.x = p.clientX - screen.left;
                        this.pos.y = p.clientY - screen.top;
                    }
                }
            }

            if ('ontouchstart' in window) {
                screen.elem.ontouchstart = function (e) {
                    pointer.down(e, true);
                }.bind(pointer);
                screen.elem.ontouchmove = function (e) {
                    pointer.move(e, true);
                }.bind(pointer);
                screen.elem.ontouchend = function (e) {
                    pointer.up(e, true);
                }.bind(pointer);
                screen.elem.ontouchcancel = function (e) {
                    pointer.up(e, true);
                }.bind(pointer);
            }
            document.addEventListener("mousedown", function (e) {
                pointer.down(e, false);
            }.bind(pointer), true);
            document.addEventListener("mousemove", function (e) {
                pointer.move(e, false);
            }.bind(pointer), true);
            document.addEventListener("mouseup", function (e) {
                pointer.up(e, false);
            }.bind(pointer), true);

            /* ==== vector 2D library ==== */

            function Vector(x, y) {
                this.x = x || 0.0;
                this.y = y || 0.0;
            }
            Vector.prototype = {
                set: function (x, y) {
                    this.x = x;
                    this.y = y;
                    return this;
                },
                dot: function (v) {
                    return this.x * v.x + this.y * v.y;
                },
                lenSqr: function () {
                    return this.x * this.x + this.y * this.y;
                },
                transform: function (v, m) {
                    this.x = m.cos * v.x - m.sin * v.y + m.pos.x;
                    this.y = m.sin * v.x + m.cos * v.y + m.pos.y;
                    return this;
                },
                rotate: function (v, m) {
                    this.x = m.cos * v.x - m.sin * v.y;
                    .........完整代码请登录后点击上方下载按钮下载查看