zoukankan      html  css  js  c++  java
  • javascript飞机大战-----009游戏结束

    /*
    游戏引擎
     */
    var Engine = {
        //刚开始的游戏状态
        gameStatus:false,
        //所以敌机
        enemy:{},
        //子弹
        bullet:{},
        //得分
        scroe:0,
        //背景图片
        game:document.querySelector('.game'),
        //页面得分
        textScroe:document.querySelector('.score'),
    
        //初始化
        init:function(){
            this.gameStart();
        },
        //游戏开始
        gameStart:function(){
            var _this = this;
            //点击图片的时候判断游戏状态
            this.game.onclick = function(){
                if(!_this.gameStatus){
                    _this.gameStatus = true;
                    //移动移动
                    _this.bgMove();
                    _this.handleMove();
                    _this.createPlane();
                }
            }
        },
        //背景移动
        bgMove:function(){
            var y=0;
            var _this = this;
            this.bgTimer = setInterval(function(){
                y+=2;
                _this.game.style['background-position-y']=y+'px';
            },50)
        },
        createPlane:function(){
            //创建敌机和英雄机
            Hero.init();
    
            //创建敌机
            this.createTimer = setInterval(function(){
                var num = parseInt(Math.random()*15)+1;
                switch (num) {
                    case 1:
                    case 3:
                    case 5:
                    case 7:
                    case 9:
                        new SmallEnemy().init();
                        break;
                    case 2:
                    case 4:
                    case 6:
                        new MiddleEnemy().init();
                    case 8:
                    case 12:
                        new LargeEnemy().init();
    
                    
                        
                }
            },500)
        },
        //所有敌机和子弹都要动
        handleMove:function(){
            var _this=this;
             this.moveTimer = setInterval(function(){
                //创建所有子弹
                for(var i in _this.bullet){
                    _this.bullet[i].move()
                }
                //c创建所有敌机动
                for(var i in _this.enemy){
                    _this.enemy[i].move()
                }
    
            },30)
        },
        //碰撞检测
        isCompact:function(obj1,obj2){
            var l1 = obj1.offsetLeft>obj2.offsetLeft+obj2.offsetWidth;
            var l2 = obj2.offsetLeft>obj1.offsetLeft+obj1.offsetWidth;
            var t1 = obj1.offsetTop>obj2.offsetTop+obj2.offsetHeight;
            var t2 = obj2.offsetTop>obj1.offsetTop+obj1.offsetHeight;
            if(l1||l2||t1||t2){
                return false;
            }else{
                return true;
            }
        },
        //更新得分
        updateScroe:function(scroe){
    
            this.scroe+=scroe;
    
            this.textScroe.innerHTML="分数"+this.scroe;
        },
        gameOver:function(){
            //停止创建敌机
            clearInterval(this.createTimer);
    
            //子弹停止
            clearInterval(this.moveTimer);
        }
    };
    Engine.init();

    子弹停止

    /*
    英雄机:因为英雄机只有一辆所以不需要用构造函数
     */
    var Hero = {
        //初始图片
        self:null,
        //初始left
        left:0,
        //初始top
        top:0,
        //生命值
        life:3,
        //加载进来的图和爆照的图
        imgs:['image/hero.gif','image/hero-bang.gif'],
        //获得到自己的红星
        allHero:document.querySelectorAll('.life>img'),
        //初始化
        init:function(){
            //创建一个元素
            var img = document.createElement('img');
            //将图片路径赋值给它
            img.src=this.imgs[0];
            //插入到game中
            Engine.game.appendChild(img);
            //赋值给英雄机的初始图片
            this.self = img;
            //当图片加载完成以后获取图片的高度和宽度
            var _this = this;//在函数里面this的指向会改变,所以我们提前报存下来
            img.onload = function(){
                //因为上面的属性有this.left所以我们应该和图片一样赋值给它
                _this.left = (Engine.game.offsetWidth-img.offsetWidth)/2;//英雄机的left中心点等于(game的宽度-英雄机的宽度)除以2
                _this.top = Engine.game.offsetHeight-img.offsetHeight;
                img.style.left = _this.left+'px';
                img.style.top = _this.top+'px';
                //初始化的时候调用move
                _this.move();
                _this.shoot();
            };
            
        },
        //鼠标移动的时候英雄机也要移动
        move:function(){
            //类似于放大镜
            var _this = this;
            document.onmousemove = function(e){
                var e = e||event;
                var l = e.clientX - Engine.game.offsetLeft - _this.self.offsetWidth/2;
                var t = e.clientY - Engine.game.offsetTop  - _this.self.offsetHeight/2;
                //边界处理
                var lmax = Engine.game.offsetWidth-_this.self.offsetWidth;//最大边界
    
                var bmax = Engine.game.offsetHeight-_this.self.offsetHeight;//最大边界
                l = l < 0 ? 0 : (l > lmax ? lmax : l);
                t = t < 0 ? 0 : (t > bmax ? bmax : t);
    
                //赋值
                _this.self.style.left = l+'px';
                _this.self.style.top = t+'px';
    
                //更新left  top
                _this.left = l;
                _this.top = t;
            }
        },
        //发子弹
        shoot:function(){
            //每隔100毫秒发一次子弹
            var _this = this;
            this.shootTimer = setInterval(function(){
                var l = _this.left+_this.self.offsetWidth/2
                new Bullet(l,_this.top).init();
            },100)
        },
        bang:function(){
            var img = document.createElement('img');
            img.src = this.imgs[1];
            img.style.left = this.left+'px';
            img.style.top = this.top+'px';
            Engine.game.appendChild(img)
            setTimeout(function(){
                img.remove();
            },1000)
        },
        die:function(){
            this.life--;
            this.allHero = document.querySelectorAll('.life img');
            this.allHero[0].remove();
            
            console.log(this.allHeart,this.allHero[0])
            if(this.life<=0){
                this.destroy();
            }
        },
        destroy:function(){
            this.self.remove();
            this.bang();
            clearInterval(this.shootTimer);
            //游戏结束
            this.gameOver();
        }
    }
    //在游戏没开始的时候不能出现英雄机和子弹所以要放在引擎里面
    //Hero.init();
  • 相关阅读:
    mysql小数和类型转换函数
    concat()用法
    sql修改表名字段名
    having函数,case when与order by
    volatile实现原理与应用
    synchronized的实现原理与应用
    java8策略模式
    centos7快速升级gcc
    一个用户从发起请求到接收到响应,中间经过哪些服务,每个服务做什么事情
    Java注解
  • 原文地址:https://www.cnblogs.com/nanianqiming/p/7501048.html
Copyright © 2011-2022 走看看