码迷,mamicode.com
首页 > 编程语言 > 详细

javascript飞机大战-----006创建敌机

时间:2017-09-10 14:20:41      阅读:189      评论:0      收藏:0      [点我收藏+]

标签:div   stat   set   creat   --   小型   img   elf   ini   

先写一个敌机类

/*
创建敌机:
 */
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();
        }
    },
    destroy:function(){
        //销毁
        //从页面小时
        this.self.remove();
        //从内存消失
        delete Engine.bullet[this.id];
    }

}

在去创建小型 中型 大型敌机

/*
创建所有类型的飞机
 */
function SmallEnemy(){
    var s = parseInt(Math.random()*3+3);
    Enemy.call(this,1,s,[‘image/enemy1.png‘,‘image/enemy1-bang.gif‘])
}
SmallEnemy.prototype = {
    constructor:SmallEnemy;
    __proto__:Enemy.prototype;
}

function MiddleEnemy(){
    var s = parseInt(Math.random()*3+2);
    Enemy.call(this,5,s,[‘image/enemy2.png‘,‘image/enemy2-bang.gif‘])
}
MiddleEnemy.prototype = {
    constructor:MiddleEnemy;
    __proto__:Enemy.prototype;
}

function LargeEnemy(){
    var s = parseInt(Math.random()*2+1);
    Enemy.call(this,10,s,[‘image/enemy3.png‘,‘image/enemy3-bang.gif‘])
}
LargeEnemy.prototype = {
    constructor:LargeEnemy;
    __proto__:Enemy.prototype;
}

去引擎里面不间断的创建敌机

/*
游戏引擎
 */
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)
    }
};
Engine.init();

 

javascript飞机大战-----006创建敌机

标签:div   stat   set   creat   --   小型   img   elf   ini   

原文地址:http://www.cnblogs.com/nanianqiming/p/7500862.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!