js 飞机大战

说明：  本案例所需要的文件以及源代码我已上传?文件

网盘链接：https://pan.baidu.com/s/1hs7sBUs 密码: d83x

飞机大战css定义：

<style>
#container{　　
width:320px;
height:568px;
background: url(images/start.png);
margin:20px auto;
position: relative;
overflow: hidden;　　
}
#container input{
width:120px;
height: 38px;
background: #ff6600;
border:0;
color:#fff;
font-size:14px;
font-family: 微软雅黑;
position: absolute;
left: 100px;
bottom:50px;
}
#enddiv{
position: absolute;
top: 210px;
left: 75px;
border: 1px solid gray;
border-radius: 5px;
text-align: center;
background-color:#d7ddde;
display: none;
z-index: 2;
}
.plantext{
width: 160px;
height: 30px;
line-height: 30px;
font-size: 16px;
font-weight: bold;
}
#enddiv div{
width: 160px;
height: 50px;
}
#enddiv div button{
margin-top:10px ;
width: 90px;
height: 30px;
border: 1px solid gray;
border-radius: 30px;
}
#scoretext{
margin: 0;
font-family: arial;
font-size:12px;
font-weight: bold;
color:#ff6600;
position: absolute;
left: 4px;
top: 4px;
z-index: 100;
}
</style>

飞机大战： HTML代码如下：

　　<div id="container">
        <p id="scoretext"></p>
        <div id="enddiv">
            <p class="plantext">游戏结束</p>
            <div><button onclick="restartGame()" id="restart">继续</button></div>
        </div>
        <input type="button" value="开始游戏" id="startBtn">
    </div>

飞机大战 ： 调用js

//中大型飞机射击次数未实现，gameover未实现
        function startGame(container){

            var startBtn = document.getElementById("startBtn");
            startBtn.onclick = function(){
                container.style.background = "url(images/background_1.png)";
                this.style.display = "none";
                bgMove(container);
                var score = 0;
                var myplan = new MyPlan(120,480,container);
                var middleEnemy = new MiddleEnemy(container,myplan.bullets,myplan,score); //中型飞机对象实例
                var maxEnemy = new MaxEnemy(container,myplan.bullets,myplan,score);//大型飞机对象实例
                var enemy = new Enemy(container,myplan.bullets,myplan,middleEnemy,maxEnemy,score);
                enemy.init();
            }
        }
        var speed = 0;
        function bgMove(container){
            setInterval(function(){
                speed++;
                container.style.backgroundPosition = "0 " + speed + "px";
                if(speed > 568){
                    speed = 0;
                }
            },15);

        }
        function gameOver(){
            var enddiv = document.getElementById("enddiv");
            var restart = document.getElementById("restart");

            enddiv.style.display = "block";
            restart.onclick = function(){
                location.reload();
            }

        }
        var score = 0;
        function getScore(num){
            var scoretext = document.getElementById("scoretext");
            score += num;
            scoretext.innerHTML = score + "分";

        }
        onload = function(){
            var container = document.getElementById("container");

            startGame(container);

        }

飞机大战： 我放飞机创建：

Array.prototype.remove = function(value){
    for(var i = 0; i < this.length; i++){
        if(this[i] == value){
            this.splice(i,1);
        }
    }
}
function MyPlan(x , y , container){
    this.x = x;
    this.y = y;
    this.img = "images/my.gif";
    this.container = container;
    this.bullets = [];
    this.createTimer;
    this.init();
}
MyPlan.prototype = {
    init:function(){
        this.create();
        this.planMove();
        this.bullets.push(this.plan);
        var that = this;
        this.createTimer = setInterval(function(){
            that.createBullets();
        },200);
        this.createBullets();
    },
    planMove:function(){
        var that = this;
        this.container.onmousemove = function(e){
            e = e || event;
            var maxLeft = that.container.offsetWidth - that.plan.offsetWidth;
            var maxTop = that.container.offsetHeight - that.plan.offsetHeight;
            var planX = Math.max(Math.min(e.clientX - that.container.offsetLeft - that.plan.offsetWidth / 2,maxLeft),0);
            var planY = Math.max(Math.min(e.clientY - that.container.offsetTop - that.plan.offsetHeight / 2,maxTop),0);
            that.plan.style.left = planX + "px";
            that.plan.style.top = planY + "px";
        }
    },
    create:function(){
        this.plan = document.createElement("img");
        this.plan.src = this.img;
        this.plan.style.cssText = "position:absolute; top:" + this.y + "px; left:" + this.x + "px;";
        this.container.appendChild(this.plan);
    },
    createBullets:function(){
        this.bull = document.createElement("img");
        this.bull.src = "images/bullet1.png";
        var bullX = this.plan.offsetLeft + this.plan.offsetWidth / 2 - 6 / 2;
        var bullY = this.plan.offsetTop - 14;

        this.bull.style.cssText = "position:absolute; top:" + bullY + "px; left:" + bullX + "px;";
        this.container.appendChild(this.bull);
        this.bullets.push(this.bull);
        var bull = this.bull; //不能用that = this 对象冒充 闭包问题
        var container = this.container;
        var bullets = this.bullets;
        this.bull.timer = setInterval(function(){
            bull.style.top = bull.offsetTop - 3 + "px";
            if(bull.offsetTop <= -14){
                bullets.remove(bull);
                container.removeChild(bull);
                clearInterval(bull.timer);
            }
        },8);
    }
}

飞机大战： 敌方基本飞机创建：

function Enemy(container,bullets,myplan,middleEnemy,maxEnemy,score){
    this.container = container;
    this.img = "images/enemy1_fly_1.png";
    this.createTime = 600; //创建敌机的间隔时间
    this.bullets = bullets;
    this.dieImg = "images/enemy1_fly_3.gif";
    this.width = 34; //敌机的宽度
    this.height = 24;    //敌机的高度
    this.myplan = myplan;
    this.count = 1; //小型敌机创建个数
    this.dieCount = 1; //敌机消灭需子弹打击次数
    this.middleEnemy = middleEnemy;
    this.maxEnemy = maxEnemy;
    this.score = score;

}
Enemy.prototype = {
    init:function(){
        var that = this;
        var middleEnemy = this.middleEnemy;
        var maxEnemy = this.maxEnemy;
        var count = 0;
        setInterval(function(){
            that.create();
            count++;
            if(count % 5 == 0){
                middleEnemy.create();
            }
            if(count % 30 == 0){
                maxEnemy.create();
                count = 1;
            }
        },this.createTime);

    },
    create:function(){
        this.enemy = document.createElement("img");
        this.enemy.src = this.img;
        var enemyX = Math.random() * (this.container.offsetWidth - this.width);
        var enemyY = -1 * this.height;
        this.enemy.style.cssText = "position:absolute; left:" + enemyX + "px; top:" + enemyY + "px;";
        this.container.appendChild(this.enemy);
        var enemy = this.enemy;
        this.data_hitCount = 0;
        var container = this.container;
        var bullets = this.bullets;
        var dieImg = this.dieImg;
        var myplan = this.myplan;
        var plan = this.myplan.plan;
        var createBullets = this.myplan.createBullets;
        var dieCount = this.dieCount;
        var isremove = true; //是否可以移除敌机
        var score = this.score;
        var that = this;
        this.enemy.timer = setInterval(function(){
            enemy.style.top = enemy.offsetTop + 3 + "px";

            for(var i = 0; i < bullets.length; i++){

                if(bullets[i].offsetLeft + bullets[i].offsetWidth > enemy.offsetLeft && bullets[i].offsetLeft < enemy.offsetLeft + enemy.offsetWidth){
                    if(bullets[i].offsetTop + bullets[i].offsetHeight > enemy.offsetTop && bullets[i].offsetTop < enemy.offsetTop + enemy.offsetHeight && isremove){
                        if(i == 0){
                            plan.src = "images/myover.gif";
                            container.onmousemove = null;
                            clearInterval(myplan.createTimer);
                            gameOver();
                        }
                        else{
                            container.removeChild(bullets[i]);
                            bullets.remove(bullets[i]);
                            that.data_hitCount++;
                            if(that.data_hitCount == dieCount){
                                isremove = false;
                                enemy.src = dieImg;
                                getScore(dieCount);
                                setTimeout(function(){
                                    container.removeChild(enemy);
                                },300);
                            }
                        }
                    }
                }
            }
            if(enemy.offsetTop >= container.offsetHeight){
                container.removeChild(enemy);
                clearInterval(enemy.timer);
            }
        },30);
    }
}

飞机大战： 其他敌机创建：

function MiddleEnemy(container,bullets,myplan,score){

    Enemy.call(this,container,bullets,myplan,score);
    this.img = "images/enemy2_fly_1.png";
    this.dieImg = "images/enemy2_fly_3.gif";
    this.width = 46;  //敌机的宽度
    this.height = 60; //敌机的高度
    this.dieCount = 5;
}

MiddleEnemy.prototype = Enemy.prototype;

function MaxEnemy(container,bullets,myplan,score){

    Enemy.call(this,container,bullets,myplan,score);
    this.img = "images/enemy3_fly_1.png";
    this.dieImg = "images/enemy3_fly_3.gif";
    this.width = 110; //敌机的宽度
    this.height = 164; //敌机的高度
    this.dieCount = 10;
}
MaxEnemy.prototype = Enemy.prototype;

效果图如图所示：