/*
創建子彈:因為子彈不是只創建一個所以要用構造函數

註意一點：子彈發射的位置應該是英雄機的正中央的位置，所以需要傳點東西進來
 */
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();
        }
    },
    destroy:function(){
        //銷毀
    }

}

英雄機更新的部分

/*
英雄機：因為英雄機只有一輛所以不需要用構造函數
 */
var Hero = {
    //初始圖片
    self:null,
    //初始left
    left:0,
    //初始top
    top:0,
    //生命值
    life:3,
    //加載進來的圖和爆照的圖
    imgs:[‘image/hero.gif‘,‘image/hero-bang.gif‘],
    //初始化
    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)
    }
}
//在遊戲沒有開始的時候不能出現英雄機和子彈所以不能再這裏面調用他的初始方法,要在引擎裏面調用
//Hero.init();

英雄機更新部分

1、更新了發射子彈

2、在英雄機加載進來的時候移動和發射子彈

//發子彈
    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)
    }


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();
        };
        

引擎更新

/*
遊戲引擎
 */
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(){
　　　　//創建敵機和英雄機
　　　　Hear.init();
　　},
    //所有敵機和子彈都要動
    handleMove:function(){
        var _this=this;
        var timer = setInterval(function(){
            for(var i in _this.bullet){
                _this.bullet[i].move()
            }
        },30)
    }
};
Engine.init();

引擎更新部分

//所有敵機和子彈都要動
    handleMove:function(){
        var _this=this;
        var timer = setInterval(function(){
            for(var i in _this.bullet){
                _this.bullet[i].move()
            }
        },30)
    }


//遊戲開始
    gameStart:function(){
        var _this = this;
        //點擊圖片的時候判斷遊戲狀態
        this.game.onclick = function(){
            if(!_this.gameStatus){
                _this.gameStatus = true;
                //移動移動
                _this.bgMove();
                _this.handleMove();
            }
        }
    },

javascript飛機大戰-----004創建子彈對象