day28飞机大战-游戏引擎.js

//游戏引擎
function GameEngine(){
    if( !GameEngine.instance ){
        GameEngine.instance = {
            body : $id("main"),//游戏背景
            oUl : $id("options"),//菜单ul
            logo : create("div"),//飞机大战图标
            plane : create("div"),//放烟雾飞机 
            level : 0,
            enemes : new Set(), //定义一个容器 用于存放所有创建出来的敌机
            initMenu : function(){
                //点击不同的菜单 记录游戏等级  使用事件委托
                this.oUl.addEventListener( "click" , function(e){
                    //获取事件对象
                    var e = e || event;
                    //获取事件源
                    var target = e.target || e.srcElement;
                    //明确事件源
                    if( target.tagName.toLowerCase() == "li" ){
                        //记录游戏等级 获取自定义属性level的值
                        this.level = target.getAttribute("level");
                        
                        //菜单消失
                        this.oUl.remove();
                        
                        //引出logo和动画飞机 以及背景移动   
                        this.loading();
                    }
                }.bind(this) )
            },
            loading : function(){
                //描述div 
                this.logo.className = "logo";
                this.plane.className = "loading";
                //添加到游戏引擎  appendChild  调用append方法
                this.append( this.logo );
                this.append( this.plane );
                
                //飞机拉线效果
                var index = 1;
                var timer = setInterval( function(){
                    this.plane.style.backgroundImage = `url(images/loading${++index}.png)`;
                    if( index == 3 ){
                        index = 0;
                    }
                }.bind(this) , 700 )
                
                
                //背景移动
                var count = 0;
                setInterval( function(){
                    this.body.style.backgroundPositionY = ++count + "px";
                }.bind(this),30 )
                
                //经过一段时间后 引擎的加载动画和logo结束  游戏开始
                setTimeout( function(){
                    this.logo.remove();//删除图标
                    this.plane.remove();
                    clearInterval( timer );//停止飞机拉线
                    
                    //游戏开始
                    this.gameStart();
                }.bind(this),3000 )
            },
            append : function(ele){ //功能是添加某个元素到游戏引擎中
                this.body.appendChild( ele );
            },
            gameStart : function(){
                //战斗机出场
                new MyPlane().init().move("mouse").fire();
                //敌机出场
                this.autoCreateEnemy();
            },
            autoCreateEnemy : function(){ //敌机出场 自动创建敌机
                //使用定时器控制敌机出场速度
                setInterval( function(){
                    if( Math.random() > 0.7 ){ //5000以内 出现大型敌机的概率为 30%
                        var en = new Enemy("big");//创建敌机
                        this.enemes.add( en );//将敌机存入到set集合中
                        en.init().move();//调用敌机的创建和移动方法
                    }
                }.bind(this),5000 )
                
                setInterval( function(){
                    if( Math.random() > 0.3 ){
                        //将move方法的返回值(new出来的对象)存入到set集合中
                        this.enemes.add( new Enemy("middle").init().move() );
                    }
                }.bind(this),2500 )
                
                setInterval( function(){
                    if( Math.random() > 0.2 ){
                        this.enemes.add( new Enemy("small").init().move() );
                    }
                }.bind(this),1000 )
            },
            width : function(){ //获取引擎的宽度
                return this.body.offsetWidth;
            },
            height :function(){//获取引擎的高度
                return  this.body.offsetHeight;
            },
            left : function(){//获取引擎相对于 大body的距离
                return this.body.offsetLeft;
            }
        }
    }
    
    return GameEngine.instance;
}

 

上一篇:[Day28]数据库(数据库、表及表数据、SQL语句)


下一篇:springboot中怎么使用mybatisPlus