JS 实现飞机大战

这是JS版本的飞机大战,和C#版本的思路相同,就是语言上有差别,用来巩固知识。可以将代码直接引入到HTML中就可以看到效果

//编写背景对象
function Background(width,height,X,Y){
    // 背景的宽度
    this.width=width;
    // 背景的高度
    this.height=height;
    // 背景的水平坐标
    this.X=X;
    // 背景的垂直坐标
    this.Y=Y;
    // 创建背景函数将背景存放在 draw属性上
    this.draw=(function(X,Y,width,height){
        var a=document.createElement("div");
        a.style.cssText="position:fixed;top:"+Y+"px;left:"+X+"px;"
        +width+"px;height:"+height+"px;background-color:aqua;";
        return a;
    })(this.X,this.Y,this.width,this.height);
    // 创建背景函数的绘制方法
    this.drawing=function(){
        document.body.appendChild(this.draw);
    }
}
//创建我方飞机对象
function MyPlane(width,height,X,Y){
    // 背景的宽度
    this.width=width;
    // 背景的高度
    this.height=height;
    // 背景的水平坐标
    this.X=X;
    // 背景的垂直坐标
    this.Y=Y;
    // 创建我方飞机函数将背景存放在 draw属性上
    this.draw=(function(X,Y,width,height){
        var a=document.createElement("div");
        a.style.cssText="position:fixed;top:"+Y+"px;left:"+X+"px;"
        +width+"px;height:"+height+"px;background-color:aqua;";
        return a;
    })(this.X,this.Y,this.width,this.height);
    // 创建我方飞机函数的绘制方法
    this.drawing=function(){
        document.body.appendChild(this.draw);
    }
    // 创建飞机移动函数,同时进行边缘判断
    this.move=function(x,y){
        if(x>=620&&x<=1030){
            this.X = x;
        }
        if(y>=170&&y<=730){
            this.Y = y;
        }
        this.draw.style.cssText="position:fixed;top:"
        +(this.Y-this.height/2)+"px;left:"+(this.X-this.width/2)+
        "px;"+width+"px;height:"+height+"px;background-color:red;";
    }    
}
//创建子弹对象
function MyZidan(width,height,X,Y,speed){
    //子弹的宽度
    this.width=width;
    //子弹的高度
    this.height=height;
    //子弹的水平坐标
    this.X=X;
    //子弹的垂直坐标
    this.Y=Y;
    //子弹的速度
    this.speed=speed;
    //将子弹dom存放在dram上
    this.draw=(function(X,Y,width,height){
        var a=document.createElement("div");
        a.style.cssText="position:fixed;top:"+Y+"px;left:"+X+"px;"
        +width+"px;height:"+height+"px;background-color:aqua;";
        return a;
    })(this.X,this.Y,this.width,this.height);
    //创建子弹函数的绘制方法
    this.drawing=function(){
        document.body.appendChild(this.draw);
    }
    //子弹移动函数
    this.move=function(){
        this.Y=this.Y-this.speed;
        this.draw.style.cssText="position:fixed;top:"
        +(this.Y-this.height/2)+"px;left:"+(this.X-this.width/2)+
        "px;"+width+"px;height:"+height+"px;background-color:red;";
    }
    //子弹删除函数
    this.remove=function(){
        document.body.removeChild(this.draw);
    }
}
//创建敌人飞机对象
function EnemyPlane(width,height,X,Y,speed){
    //敌人飞机的宽度
    this.width=width;
    //敌人飞机的长度
    this.height=height;
    //敌人飞机的水平坐标
    this.X=X;
    //敌人飞机的垂直坐标
    this.Y=Y;
    //敌人飞机的速度
    this.speed=speed;
    //将敌人飞机dom存放在dram上
    this.draw=(function(width,height,X,Y){
        var a=document.createElement("div");
        a.style.cssText="position:fixed;top:"+Y+"px;left:"+X+"px;"
        +width+"px;height:"+height+"px;background-color:blue;";
        return a;
    })(this.width,this.height,this.X,this.Y);
    //创建敌人飞机函数的绘制方法
    this.drawing=function(){
        document.body.appendChild(this.draw);
    }
    //敌人飞机移动函数
    this.move=function(){
        this.Y=this.Y+this.speed;
        this.draw.style.cssText="position:fixed;top:"
        +(this.Y-this.height/2)+"px;left:"+(this.X-this.width/2)+
        "px;"+width+"px;height:"+height+"px;background-color:blue;";
    }
    //敌人飞机删除函数
    this.remove=function(){
        document.body.removeChild(this.draw);
    }
}
//创建单例类
function SingleObjct(background,myPlane){
    //存放实例化背景对象
    this.background=background;
    //存放实例化我方飞机对象
    this.myPlane=myPlane;
    //存放我方飞机子弹对象列表
    this.myZidan=[];
    //添加子弹对象
    this.addZidan=function(){
        this.myZidan.push(new MyZidan(10,10,this.myPlane.X,this.myPlane.Y-20,2));
    }
    //绘制子弹函数
    this.drawMyZidan=function(){
        for(var i=0;i<this.myZidan.length;i++){
            this.myZidan[i].drawing();
        }
    }
    //子弹移动函数
    this.moveMyZidan=function(){
        for(var i=0;i<this.myZidan.length;i++){
            this.myZidan[i].move();
        }
    }
    //判断子弹是否出界,出界则将对象删除
    this.moveToBorderZidan=function(){
        for(var i=0;i<this.myZidan.length;i++){
            if(this.myZidan[i].Y<=150){
                this.myZidan[i].remove();
                this.myZidan.splice(i,1);
                return;                
            }
        }
    }
    //存放敌人飞机对象列表
    this.ListEnemyPlane=[];
    //添加敌人飞机对象方法
    this.addEnemyPlany=function(X,Y){
        var a=new EnemyPlane(20,20,X,Y,2);
        a.drawing();
        this.ListEnemyPlane.push(a);
    }
    //绘制敌人飞机函数
    this.drawEnemyPlane=function(){
        for(var i=0;i<this.ListEnemyPlane.length;i++){
            this.ListEnemyPlane[i].drawing();
        }
    }
    //移动敌人飞机函数
    this.moveEnemyPlane=function(){
        for(var i=0;i<this.ListEnemyPlane.length;i++){
            this.ListEnemyPlane[i].move();
        }
    }
    //判断敌人飞机是否出界,出界就将其移除
    this.moveToBorderEnemyPlane=function(){
        for(var i=0;i<this.ListEnemyPlane.length;i++){
            if(this.ListEnemyPlane[i].Y>=740){
                this.ListEnemyPlane[i].remove();
                this.ListEnemyPlane.splice(i,1);
            }
        }
    }
    //判断子弹和敌人飞机是否向撞
    this.PZJC=function(){
        for(var i=0;i<this.myZidan.length;i++){
            for(var j=0;j<this.ListEnemyPlane.length;j++){
                if(rectangle(this.myZidan[i].width,this.myZidan[i].height,this.myZidan[i].X,this.myZidan[i].Y,
                    this.ListEnemyPlane[j].width,this.ListEnemyPlane[j].height,
                    this.ListEnemyPlane[j].X,this.ListEnemyPlane[j].Y)){
                    this.myZidan[i].remove();
                    this.myZidan.splice(i,1);
                    this.ListEnemyPlane[j].remove();
                    this.ListEnemyPlane.splice(j,1);
                    return;
                }
            }
        }
    }
}
//窗体加载
window.onload=function(){
    var singleObjct=new SingleObjct(new Background(450,600,600,150),new MyPlane(40,40,100,100));
    singleObjct.background.drawing();
    singleObjct.myPlane.drawing();
    //鼠标移动事件
    window.onmousemove=function(event){
        singleObjct.myPlane.move(event.clientX,event.clientY);
    }
    //鼠标单击事件
    window.onclick=function(event){
        singleObjct.addZidan();
        singleObjct.drawMyZidan();  
    }
    //间隔时间触发函数,10毫秒触发一次
    var timer = setInterval(function(){               
        singleObjct.moveToBorderZidan();
        singleObjct.moveMyZidan();
        singleObjct.moveToBorderEnemyPlane();
        singleObjct.moveEnemyPlane();
        singleObjct.PZJC();
        if(singleObjct.ListEnemyPlane.length<6){
            singleObjct.addEnemyPlany(getRandomX(),getRandomY());
        }        

    },10)
}
//随机生成水平坐标
function getRandomX(){
    return ~~(Math.random()*430+600)
}
//随机生成垂直坐标
function getRandomY(){
    return ~~(Math.random()*200+110)
}
//判断矩形重合
function rectangle(width1,height1,X1,Y1,width2,height2,X2,Y2){
    var rectangleX1=X1+width1/2;
    var rectangleY1=Y1+height1/2;
    var rectangleX2=X2+width2/2;
    var rectangleY2=Y2+height2/2;
    var X=Math.abs(rectangleX1-rectangleX2);
    var Y=Math.abs(rectangleY1-rectangleY2);
    if(2*X<width1+width2&&2*Y<height1+height2){
        return true;
    }
    return false;
}