javascript飞机大战007爆炸效果

0 0

–>

要检验什么时候碰撞，我们必须了解什么时候不相撞。以上四种情况是不相撞的时候

首先在引擎里面写好什么时候碰撞什么时候不碰撞

/*
游戏引擎
 */
var Engine = {
    //刚开始的游戏状态
    gameStatus:false,
    //所以敌机
    enemy:{},
    //子弹
    bullet:{},
    //得分
    score:0,
    //背景图片
    game:document.querySelector(\'.game\'),
    //初始化
    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();

        //创建敌机
        var timer = 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;
        var timer = 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;
        }
    }
};
Engine.init();

002、检验子弹和敌机的碰撞

/*
创建子弹:因为子弹不是只创建一个所以要用构造函数

注意一点：子弹发射的位置应该是英雄机的正*的位置，所以需要传点东西进来
 */
function Bullet(l,t){
    this.l = l;//保留一下传进来的l
    this.t = t;//保留一下创进来的t
    //初始图片
    this.self = null;
    //子弹初始left
    this.left = 0;
    //子弹初始top
    this.top = 0;
    //子弹的速度
    this.speed = 2;
    //子弹编号 因为在引擎里面有一个专门存放子弹的对象，所以我们要给每一个子弹生成编号
    this.id = \'\';
}
Bullet.prototype = {
    constructor:Bullet,
    init:function(){
        //创建一个元素
        var img = document.createElement(\'img\');
        //将图片路径赋值给它
        img.src=\'image/bullet1.png\';
        //插入到game中
        Engine.game.appendChild(img);
        //赋值给子弹的初始图片
        this.self = img;



        //当图片加载完成以后获取图片的高度和宽度
        var _this = this;//在函数里面this的指向会改变，所以我们提前报存下来
        img.onload = function(){
            //因为上面的属性有this.left所以我们应该和图片一样赋值给它
            _this.left = _this.l-_this.self.offsetWidth/2;
            _this.top = _this.t-_this.self.offsetHeight;
            img.style.left = _this.left+\'px\';
            img.style.top = _this.top+\'px\';
        };

        //生成子弹编号并放入引擎的bullet中
        this.id = Math.random();
        Engine.bullet[this.id]=this;
    },
    //子弹移动，定时器都交给引擎去做
    move:function(){
        this.top-=2;
        this.self.style.top = this.top+\'px\';
        //越界判断
        if(this.top<=-this.self.offsetHeight){
            this.destroy();
        }
        //是否与敌机碰撞
        for(i in Engine.enemy){
            if(Engine.isCompact(this.self,Engine.enemy[i].self)){
                //子弹销毁
                this.destroy();
                //敌机销毁
                Engine.enemy[i].blood--;
                if(Engine.enemy[i].blood<=0){
                    Engine.enemy[i].destroy();
                }
                
            }
        }
    },
    destroy:function(){
        //销毁
        //从页面小时
        this.self.remove();
        //从内存消失
        delete Engine.bullet[this.id];
    }

}

英雄机爆炸

/*
英雄机：因为英雄机只有一辆所以不需要用构造函数
 */
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;
        var timer = 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();
    }
}
//在游戏没开始的时候不能出现英雄机和子弹所以要放在引擎里面
//Hero.init();

英雄机与敌机相撞

/*
创建敌机：
 */
function Enemy(blood,speed,imgs){
    //敌机left
    this.left = 0;
    //敌机top
    this.top = 0;
    //敌机血量
    this.blood = blood;
    //敌机速度
    this.speed = speed;
    //敌机图片集合
    this.imgs = imgs;//爆炸前和爆炸后
}
Enemy.prototype = {
    constructor:Enemy,
    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 = parseInt(Math.random()*(320-img.offsetWidth));
            _this.top = -img.offsetHeight;
            img.style.left = _this.left+\'px\';
            img.style.top = _this.top+\'px\';
        };

        //生成敌机编号并放入引擎的bullet中
        this.id = Math.random();
        Engine.enemy[this.id]=this;
    },
    //子弹移动，定时器都交给引擎去做
    move:function(){
        this.top+=this.speed;
        this.self.style.top = this.top+\'px\';
        //越界判断
        if(this.top>568+this.self.offsetWidth){
            this.destroy();
        }
        //判断与英雄机相撞
        if(Engine.isCompact(this.self,Hero.self)){
            //自己销毁
            this.destroy();
            //英雄机
            Hero.die();
        }
    },
    destroy:function(){
        //销毁
        //从页面小时
        this.self.remove();
        //从内存消失
        delete Engine.enemy[this.id];
    }

}

敌机爆照效果

/*
创建敌机：
 */
function Enemy(blood,speed,imgs){
    //敌机left
    this.left = 0;
    //敌机top
    this.top = 0;
    //敌机血量
    this.blood = blood;
    //敌机速度
    this.speed = speed;
    //敌机图片集合
    this.imgs = imgs;//爆炸前和爆炸后
}
Enemy.prototype = {
    constructor:Enemy,
    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 = parseInt(Math.random()*(320-img.offsetWidth));
            _this.top = -img.offsetHeight;
            img.style.left = _this.left+\'px\';
            img.style.top = _this.top+\'px\';
        };

        //生成敌机编号并放入引擎的bullet中
        this.id = Math.random();
        Engine.enemy[this.id]=this;
    },
    //子弹移动，定时器都交给引擎去做
    move:function(){
        this.top+=this.speed;
        this.self.style.top = this.top+\'px\';
        //越界判断
        if(this.top>568+this.self.offsetWidth){
            this.destroy();
        }
        //判断与英雄机相撞
        if(Engine.isCompact(this.self,Hero.self)){
            //自己销毁
            this.destroy();
            //英雄机
            Hero.die();
        }
    },
    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)
    },
    destroy:function(){
        //销毁
        //从页面小时
        this.self.remove();
        this.bang();
        //从内存消失
        delete Engine.enemy[this.id];
    }

}