1. 程式人生 > >javascript飛機大戰-----008積分

javascript飛機大戰-----008積分

for bsp 類型 math sco die() const fse lar

/*
創建敵機:
 */
function Enemy(blood,speed,imgs,scroe){
    //敵機left
    this.left = 0;
    //敵機top
    this.top = 0;
    //敵機血量
    this.blood = blood;
    //敵機速度
    this.speed = speed;
    //敵機圖片集合
    this.imgs = imgs;//爆炸前和爆炸後
    //分數
    this.scroe = scroe;
}
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(); //統計得分 Engine.updateScroe(this.scroe); //從內存消失 delete Engine.enemy[this.id]; } }

每架飛機的分數

/*
創建所有類型的飛機
 */
function SmallEnemy(){
    var s = parseInt(Math.random()*3+3);
    Enemy.call(this,1,s,[‘image/enemy1.png‘,‘image/enemy1-bang.gif‘],10)
}
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‘],20)
}
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‘],50)
}
LargeEnemy.prototype = {
    constructor:LargeEnemy,
    __proto__:Enemy.prototype
}

更新得分

/*
遊戲引擎
 */
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();

        //創建敵機
        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;
        }
    },
    //更新得分
    updateScroe:function(scroe){
        
        this.scroe+=scroe;
        
        this.textScroe.innerHTML="分數"+this.scroe;
    }
};
Engine.init();

javascript飛機大戰-----008積分