原生js实现重力感应积木游戏效果代码

代码语言:html

所属分类:游戏

代码描述:原生js实现重力感应积木游戏效果代码

代码标签: 重力 感应 积木 游戏 效果

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5重力感应积木游戏在线演示</title>
<style>
    html
{
       
overflow: hidden;
       
-ms-touch-action: none;
       
-ms-content-zooming: none;
}
body
{
       
position: absolute;
       
margin: 0;
       
padding: 0;
       
background: #000;
       
width: 100%;
       
height: 100%;
}
#screen {
       
position: absolute;
       
width: 100%;
       
height: 100%;
}
#textures, .textures {
       
visibility:hidden;
}
</style>
<script>
    // ===== ge1doot global =====
var ge1doot = ge1doot || {
        json: null,
        screen: null,
        pointer: null,
        camera: null,
        loadJS: function (url, callback, data) {
                if (typeof url == "string") url = [url];
                var load = function (src) {
                        var script = document.createElement("script");
                                if (callback) {
                                        if (script.readyState){
                                                script.onreadystatechange = function () {
                                                        if (script.readyState == "loaded" || script.readyState == "complete"){
                                                                script.onreadystatechange = null;
                                                                if (--n === 0) callback(data || false);
                                                        }
                                                }
                                        } else {
                                                script.onload = function() {
                                                        if (--n === 0) callback(data || false);
                                                }
                                        }
                                }
                                script.src = src;
                                document.getElementsByTagName("head")[0].appendChild(script);
                }
                for (var i = 0, n = url.length; i < n; i++) load(url[i]);
        }
}
// ===== html/canvas container =====

ge1doot.Screen = function (setup) {
        ge1doot.screen = this;
        this.elem = document.getElementById(setup.container) || setup.container;
        this.ctx = this.elem.tagName == "CANVAS" ? this.elem.getContext("2d") : false;
        this.style = this.elem.style;
        this.left = 0;
        this.top = 0;
        this.width = 0;
        this.height = 0;
        this.cursor = "default";
        this.setup = setup;
        this.resize = function () {
                var o = this.elem;
                this.width  = o.offsetWidth;
                this.height = o.offsetHeight;
                for (this.left = 0, this.top = 0; o != null; o = o.offsetParent) {
                        this.left += o.offsetLeft;
                        this.top  += o.offsetTop;
                }
                if (this.ctx) {
                        this.elem.width  = this.width;
                        this.elem.height = this.height;
                }
                this.setup.resize && this.setup.resize();
        }
        this.setCursor = function (type) {
                if (type !== this.cursor && 'ontouchstart' in window === false) {
                        this.cursor = type;
                        this.style.cursor = type;
                }
        }
        window.addEventListener('resize', function () {
                ge1doot.screen.resize();
        }, false);
        !this.setup.resize && this.resize();
}

// ==== unified touch events handler ====

ge1doot.Pointer = function (setup) {
        ge1doot.pointer = this;
        var self        = this;
        var body        = document.body;
        var html        = document.documentElement;
        this.setup      = setup;
        this.screen     = ge1doot.screen;
        this.elem       = this.screen.elem;
        this.X          = 0;
        this.Y          = 0;
        this.Xi         = 0;
        this.Yi         = 0;
        this.bXi        = 0;
        this.bYi        = 0;
        this.Xr         = 0;
        this.Yr         = 0;
        this.startX     = 0;
        this.startY     = 0;
        this.scale      = 0;
        this.wheelDelta = 0;
        this.isDraging  = false;
        this.hasMoved   = false;
        this.isDown     = false;
        this.evt        = false;
        var sX          = 0;
        var sY          = 0;
        // prevent default behavior
        if (setup.tap) this.elem.onclick = function () { return false; }
        if (!setup.documentMove) {
                document.ontouchmove = function(e) { e.preventDefault(); }
        }
        document.addEventListener("MSHoldVisual", function(e) { e.preventDefault(); }, false);
        if (typeof this.elem.style.msTouchAction != 'undefined') this.elem.style.msTouchAction = "none";

        this.pointerDown = function (e) {
                if (!this.isDown) {
                        if (this.elem.setCapture) this.elem.setCapture();
                        this.isDraging = false;
                        this.hasMoved = false;
                        this.isDown = true;
                        this.evt = e;
                        this.Xr = (e.clientX !== undefined ? e.clientX : e.touches[0].clientX);
                        this.Yr = (e.clientY !== undefined ? e.clientY : e.touches[0].clientY);
                        this.X  = sX = this.Xr - this.screen.left;
                        this.Y  = sY = this.Yr - this.screen.top + ((html && html.scrollTop) || body.scrollTop);
                        this.setup.down && this.setup.down(e);
                }
        }
        this.pointerMove = fun.........完整代码请登录后点击上方下载按钮下载查看

网友评论0