用canvas实现简单的飞机大战游戏

首先实现html静态页面

<div style="position:relative">
<canvas id="map" width="300" height="400"></canvas>
<canvas id="feiji" width="300" height="400">
</canvas>
</div>

接下来写一下简单的样式

#map ,#feiji{position:absolute;}
#feiji{
       top:0;
       left:0;
       z-index:2;
}
#map{
      background:url("beijing.jpg");
     -webkit-animation:mapscroll linear 10s infinite;}
@-webkit-keyframes mapscroll{
     0%{background-position:0 0;}
    100%{background-position:0 800px;}
}

最后看一下js实现部分
var mycanvas=document.getElementById("feiji");
var context=mycanvas.getContext("2d");
//存储图片资源
var planearr=[];//存我方飞机和敌方飞机的image
//存储敌人
var Enemyarr=[];
var n=0;
function imgload(url){
var img=new Image();
img.src=url;
img.οnlοad=function(){
planearr[url]=img;
n++;
if(n==2){
//调用初始化的方法
init();
}
}
}
imgload("self.png");
imgload("enemy.png");
//初始化方法
function init(){
//生成玩家
var player=new Plane();
//生成敌人
var timer=setInterval(function(){
var n=Math.random();
var el=new Enemy();
Enemyarr[n]=el;
Enemyarr[n].name=n;//到达底下delete
},500);
//生成子弹
var timer1=setInterval(function(){
var el=new Bullet(player.x,player.y);
},50)
}
function Plane(){
this.x=130;//属性 初始化x
this.y=350;
this.w=planearr["self.png"].width;
this.h=planearr["self.png"].height;
//绘制图片
 context.drawImage(planearr["self.png"],this.x,this.y);
        var that=this;
        window.addEventListener("keydown",function(e){
            if(e.keyCode==37){
                that.left();
            }
            if(e.keyCode==39){
                that.right();
            }
            if(e.keyCode==38){
                that.up();
            }
            if(e.keyCode==40){
                that.down();
            }
        })
    }
 Plane.prototype.move1=function(newx){
        //擦除
        context.clearRect(this.x,this.y,this.w,this.h);
        //绘制
        context.drawImage(planearr["self.png"],this.x+=newx,this.y);
    };
 Plane.prototype.move2=function(newy){
        //擦除
        context.clearRect(this.x,this.y,this.w,this.h);
        //绘制
        context.drawImage(planearr["self.png"],this.x,this.y+=newy);
    };
 Plane.prototype.left=function(){
        if(this.x<0){
            this.x=0;
        }
        else{
            this.move1(-4);
        }
    };

Plane.prototype.right=function(){
        if(this.x<260){
            this.move1(4);
        }
        if(this.x>260){
            this.x=260;
        }
    };
Plane.prototype.up=function(){
        if(this.y<0){
            this.y=0;
        }
        else{
            this.move2(-4);
        }
    };
Plane.prototype.down=function(){
        if(this.y<353){
            this.move2(4);
        }
        if(this.y>353){
            this.y=353;
        }
    };
 function Enemy(){
        this.w=planearr["enemy.png"].width;//从数组中获取图片宽度
        this.h=planearr["enemy.png"].height;//从数组中获取图片高度
        this.x=parseInt(Math.random()*(300-this.w));
        this.y=0;
        context.drawImage(planearr["enemy.png"],this.x,this.y);
        var that=this;
        this.timer=setInterval(function(){
            if(that.y>400){
                that.stop();
            }
            that.clear();
            context.drawImage(planearr["enemy.png"],that.x,that.y+=5);
        },50);
    }
Enemy.prototype.stop=function(){
        clearInterval(this.timer);
        delete Enemyarr[this.name];
    };
 Enemy.prototype.clear=function(){
        context.clearRect(this.x,this.y,this.w,this.h)
    };
    function Bullet(x,y){
        this.x=x+20;
        this.y=y;
        var that=this;
        this.timer=setInterval(function(){
            if(that.y < 0){
                clearInterval(that.timer);
            }
            else{
                that.fly();
            }
        },50);
    }
 var bullarr=["red","yellow","green","blue","black"];
    Bullet.prototype.fly=function(){
        this.check();
        context.clearRect(this.x,this.y,2,4);
        var n=Math.floor(Math.random()*bullarr.length);
        context.fillStyle=bullarr[n];
        context.fillRect(this.x,this.y-=50,2,4);
    };
    Bullet.prototype.check=function(){
        var x=this.x,y=this.y,w= 2,h=4;
        for(var d in Enemyarr){
            var en=Enemyarr[d];
            var x1=en.x,y1=en.y,w1=en.w,h1=en.h;
            if(x+w>x1&&x<x1+w1&&y+h>y1&&y<h1+y1){
                Enemyarr[en.name].clear();
                Enemyarr[en.name].stop();
            }
        }
    }