JS 미니 게임

14494 단어 전단JS
;
(function (newChild) {

    function NodeConstructor() {}
        NodeConstructor.prototype = {
            constructor : NodeConstructor,
            //   px   
            pcEmAttr : ['width','height','margin','padding','left','top','right','bottom'],
            //     
            createNode : function(_type, callback) {
                let node = document.createElement(_type);
                return callback && callback.call(this, node) || node;
            }, //      
            style : function(node , attr){
                this.enmuerate(attr,function (value , key) {
                    if (this.inArray(key, this.pcEmAttr) && value / 1){
                        node.style[key] = value + 'px';
                    } else {
                        node.style[key] = value;
                    }
                })
            },
            //    ,         
            enmuerate : function(enmuerates , callback) {
                if (this.isArray(enmuerates)) {
                    for ( let i = 0 , iL = enmuerates.length; i < iL ; i++){
                        callback.call(this , enmuerates[i],i,enmuerates);
                    }
                } else {
                    for (let key in enmuerates) {
                        callback.call(this, enmuerates[key], key, enmuerates);
                    }
                }
            },
            //          
            inArray: function(value , arr){
                return new RegExp(`\\b${value}\\b`, 'i').test(arr.toString());
            },
            //         
            isArray : function (arr) {
                return arr instanceof Array;
            }
        };
/*====================================     ============================================================*/
    //   

    function Ready(){}
    Ready.prototype = NodeConstructor.prototype;
    //      
    /*-----------------------------------   --------------------------------------------------*/
    function GameConstructor() {}
    GameConstructor.prototype = new Ready();
    GameConstructor.prototype.constructor = GameConstructor;
    //     
    GameConstructor.prototype.init = function (options) {
        //           
        this.node = options.node;
        //        
        this.width = options.width || 600;//  
        this.height = options.height || 600;//  
        this.enemy = options.enemy || 4;//    
        this.level = options.level || 80;
        this.level = Math.min(this.level , 120);
        this.level = Math.max(80 , this.level);//    
        // this.style Ready prototype   
        this.style(this.node , {
            width : this.width,
            height : this.height
        });
        return this;
    };
    //   

    /****************************************    *******************************************************/
    //    
    GameConstructor.prototype.start = function () {
        //    
        this.document = document.createDocumentFragment();
        // console.dir(this.document);
        // this.document.appendChild(document.createElement('div'));//          
        //    
        this.createSelf();
        //    
        this.createEnemys();
        //        
        this.timers();
        //          
        this.node.appendChild(this.document);
        //      
        this.up();
    };
    //     
    GameConstructor.prototype.timers = function (){
        //      
        this.goTime = new Date();
        //      
        this.upTime = null;
    };
    //     
    GameConstructor.prototype.createSelf = function() {
        this.player = this.createNode('div' , function(player){
            player.className = "self";
            this.style(player,{
                width : 50,
                height : 50,
                left : this.width/2 - 25,
                top : this.height/2 -25
            });
            //     
            let that = this;
           //      
            /*
            player.addEventListener("mousedown" , function(){
                document.onmousemove = () => {
                    console.log(that);
                }
            });
            player.addEventListener("mouseup" , function(){
                document.onmousemove = null;
            });
            player.addEventListener("mouseleave" , function () {
                document.onmousemove = null;
            })
            */
            player.onmousedown = (e) => {
                let goX = e.clientX,
                    goY = e.clientY,
                    goLeft = player.offsetLeft,
                    goTop = player.offsetTop;
                that.node.onmousemove = (e) => {
                    that.style(player , {
                        left : e.clientX - goX + goLeft,
                        top : e.clientY - goY +  goTop
                    })
                };
                that.node.onmouseleave = that.node.onmouseup = () => {
                    that.node.onmousemove = null;
                }
            }
        });
        this.document.appendChild(this.player);
    };
    //    
    GameConstructor.prototype.createEnemys  = function () {
        //        
        this.enemys = new Array(this.enemy);
        //          
        this.enmuerate(this.enemys , function (value , key ,arr) {
            let attr = {
                width : this.random(45 , this.width/10),
            };
            attr.height = attr.width;
            attr.top = this.random(0 , this.height - attr.height);//top  
            //     
            if (this.random(0,1)){//      
                attr.left = this.random(0 , Math.abs(this.width/5 - attr.width));
            } else {
                attr.left = this.random(Math.abs(this.width - 2*attr.width) , Math.abs(this.width - attr.width));
            }
            //    
            let node = this.createNode('div', function (node) {
                node.className = `enemy${this.random(1, 8)}`;
                this.style(node, attr)
            });
            //    
            attr.node = node;
            //       
                //    
            attr.Xv = this.random(this.width/this.level , this.width / 120);
            attr.Yv = attr.Xv;
            if (this.half(attr.left , this.width) ){
                attr.Xv /= -1;
            }
            //    ,      
            if (this.half(attr.top , this.height)){
                attr.Yv /= -1;
            }
            //    
            this.document.appendChild(node);
            arr[key] = attr;//      
        });

        // console.log(this.enemys);
    };
    //     ,      ,     
    GameConstructor.prototype.half = function (n,m) {
        return n >= m/2;
    };
    //
    GameConstructor.prototype.random = function(n , m){
        return Math.floor(Math.random() * (Math.abs(m - n) + 1) + Math.min(n,m));
    };//      
    //      
    GameConstructor.prototype.moveEnemys = function(){
        this.enmuerate(this.enemys , function (enemy) {
            enemy.left += enemy.Xv;
            enemy.top += enemy.Yv;
            //    
            if (enemy.left <= 0) {
                enemy.left = 0;
                enemy.Xv /= -1;
            }
            if (enemy.left > this.width - enemy.width) {
                enemy.left =this.width - enemy.width;
                enemy.Xv /=-1;
            }
            if (enemy.top <= 0) {
                enemy.top = 0;
                enemy.Yv /= -1;
            }
            if (enemy.top >= this.height - enemy.height) {
                enemy.top = this.height - enemy.height;
                enemy.Yv /=-1;
            }
            //    ^
            //      
            if (enemy.Xv > 0) {
                this.style(enemy.node ,{
                    "transform": "scale(-1,1)"
                })
            } else {
                this.style(enemy.node ,{
                    "transform": "scale(1,1)"
                })
            }
            // console.log(enemy.node);
            this.style(enemy.node , {
                left : enemy.left,
                top : enemy.top
            })
        })
    };
    /****************************************    *******************************************************/
    GameConstructor.prototype.up = function () {
        //    
        this.moveEnemys();
        //    
        this.changeLevel();
        //    

        if(this.checkBom()){
            this.end();
        } else {
            this.timer = requestAnimationFrame(this.up.bind(this));
        }
        // requestAnimationFrame(this.up);
    };
    //    
    GameConstructor.prototype.changeLevel = function () {
        if (new Date() - this.upTime > 5000 || this.upTime === null) {
            // console.log("    ");
            this.enmuerate(this.enemys , function (enemy) {
                if ((Math.abs(enemy.Xv)) <= this.width / 40 && Math.abs(enemy.Yv) <= this.height / 40){
                    enemy.Xv *= this.random(0,5) / 10 + 1;
                    enemy.Yv *= this.random(0,5) / 10 + 1;
                } else {
                    enemy.Xv = Math.abs(this.random(this.width/this.level , this.width / 120));
                    enemy.Yv = Math.abs(enemy.Xv);
                }
            });
            this.upTime = new Date();

        }
    };
    //    
    GameConstructor.prototype.checkBom = function () {
        let status = false;

        //          
        if (this.player.offsetLeft <= 0) {

            status = true;
        }
        if (this.player.offsetLeft >= this.width - this.player.offsetWidth) {

            status = true;
        }
        //          
        if (this.player.offsetTop <= 0) {

            status = true;
        }
        if (this.player.offsetTop >= this.height - this.player.offsetHeight) {

            status = true;
        }
        //    
        this.enmuerate(this.enemys,function(enemy){

            if(this.isBoom(this.player,enemy.node)){
                status = true;
            }
        });
        return status;
    };
    GameConstructor.prototype.isBoom = function (node1 , node2) {
        let _left = (node1.offsetLeft + node1.offsetWidth/2) - (node2.offsetLeft + node2.offsetWidth/2),
            _top =  (node1.offsetTop + node1.offsetHeight/2) - (node2.offsetTop + node2.offsetHeight/2);


        let c = Math.sqrt(_left*_left + _top*_top);

        return c <= node1.offsetWidth/2 + node2.offsetWidth/2;
    };
    /****************************************    *******************************************************/
    GameConstructor.prototype.end = function () {
        //        
        this.node.onmousemove = null;
        //     
        cancelAnimationFrame(this.timer);
        //      
        this.endTime = new Date();
        alert("Game Over :" + (this.endTime - this.goTime) /1000 + "s" );
    };
    // windows       
    window.missGame = function (options) {
        //   gameConstructor        init
        return new GameConstructor().init(options);
    }
})();



    
          
    


/* -> -> : : : */ // const oWrap = document.getElementById("wrap"); let newGame =missGame({ node : document.querySelector('#wrap'), enemy : 2, level : 100 }); newGame.start();

좋은 웹페이지 즐겨찾기