飞机大战游戏源代码

和大家分享一个飞机大战游戏源代码

 

如下图  如果想要知道游戏怎么做出来的可以访问：

http://www.cnblogs.com/demonxian3/p/6238635.html

如果不想知道 可以直接按照下面流程搞出游戏来

 

准备：

先创建一个文件夹 在这个文件夹里面创建  images文件夹 和 js 文件夹 和一个html文件 如图

因为代码里调用了相对路径 如果不这么做显示不出来

 

 

在 images 文件夹 里面的素材可以自己找 但是图片名字一定要跟下面的一样

 

bak　　　　   --》背景 

enemy　　    --》敌人飞机 

hero　　　　  --》我方飞机 

newbullet　　 --》子弹 

pause　　　　--》暂停

 

在 js 文件夹里 有两个文件 一个是elements.js  一个是myplane.js 

(记得命名时把默认隐藏文件后缀的勾去掉)

 

 

elements.js源代码:

function bullet(x,y){
    this.x=x;
    this.y=y;
    this.islive=true;
    this.timmer=null;
    this.run=function run(){
        if(this.y<-10||this.islive==false){
            clearInterval(this.timmer);
            this.islive=false;
        }else{
            this.y-=20;
        }
    }
}


function enemy(x,y){
    this.x=x;
    this.y=y;
    this.islive=true;
    this.timmer=null;
    this.run=function run(){
        if(this.y>boxheight||this.islive==false){
            clearInterval(this.timmer);
            this.islive=false;
        }else{
            this.y+=2.5;
        }
    }
}

 

 

myplane.js 源代码：

    var sp;
    var fps=55;
    var score=0;
    
    var boxx=0;
    var boxy=0;
    var boxwidth=500;
    var boxheight=500;
    
    var planeImage;
    var planex;
    var planey;
    var planewidth=60;
    var planeheight=60;
    
    var bulletImage;
    var herobullet;
    var allbullets = new Array();
    var bulletwidth=10;
    var bulletheight=10;
    
    var enemyImage;
    var heroenemy;
    var allenemys = new Array();
    var enemywidth=30;
    var enemyheight=30;
    
    var gameTimmer;
    var btimmer;
    var etimmer;
    
    bulletImage = new Image();
    bulletImage.src="images/newbullet.PNG";
    enemyImage = new Image()
    enemyImage.src="images/enemy.jpg";
    
    
    function beginplane(){
        planex = boxwidth / 2 - planewidth /2 ;
        planey = boxheight - planeheight;
        planeImage = new Image();
        planeImage.src="images/hero.jpg";
    }
    
    function init(){
        canvas = document.getElementById('canvas');
        cxt = canvas.getContext('2d');
        cxt.lineWidth=3;
        beginplane();
        var body = document.getElementsByTagName('body')[0];
        btimmer = setInterval(producebullet,500);
        etimmer = setInterval(produceenemy,800)
        body.addEventListener('keydown',function (event){
            switch(event.keyCode){
                case 37 : if(planex>boxx){sp=8}else{sp=0}planex-=sp;break;
                case 38 : if(planey>boxy){sp=8}else{sp=0}planey-=sp;break;
                case 39 : if((planex+planewidth)<boxwidth){sp=8}else{sp=0}planex+=sp;break;
                case 40 : if((planey+planeheight)<boxheight){sp=8}else{sp=0}planey+=sp;break;
                default:break;
            }
        },false)
        gameTimmer = setInterval(run,1000/fps);
    }
    
    
    function drawenemy(){
        for (var i=0;i<allenemys.length;i++){
            if(allenemys[i].islive){
                cxt.drawImage(enemyImage,allenemys[i].x,allenemys[i].y,enemywidth,enemyheight);
            }
        }
    }
    
    
    function drawplane(){
        cxt.clearRect(boxx,boxy,boxwidth,boxheight);
        cxt.drawImage(planeImage,planex,planey,planewidth,planeheight);
    }
    
    
    function drawbullet(){
        for(var i=0;i<allbullets.length;i++){
            if(allbullets[i].islive){
                cxt.drawImage(bulletImage,allbullets[i].x,allbullets[i].y,bulletwidth,bulletheight);
            }
        }
    }
    
    function produceenemy(){
        var x = Math.ceil(Math.random()*(boxwidth-planeheight));
        heroenemy = new enemy(x,33);
        allenemys.push(heroenemy);
        var timmer = setInterval("allenemys["+ (allenemys.length-1) + "].run()",50);
        allenemys[allenemys.length-1].timmer=timmer;
    }
    
    function producebullet(){
        herobullet = new bullet(planex+planewidth/2,planey+10);
        allbullets.push(herobullet);
        var timmer = setInterval("allbullets[" + (allbullets.length-1) + "].run()",50);
        allbullets[(allbullets.length-1)].timmer=timmer;
    }

    

function checkbullet(){
    for(var i=0;i<allenemys.length;i++){
        if(allenemys[i].islive){
            var e =allenemys[i];
            for(var j=0;j<allbullets.length;j++){
                if(allbullets[j].islive){
                var b = allbullets[j];
                if(b.x>e.x-bulletwidth&&b.x+bulletwidth<e.x+enemywidth+10&&b.y<e.y){
                    e.islive=false;
                    b.islive=false;
                    score+=100;
                }
                }
            }
        }
    }
}

function checkplane(){
    for(var i=0;i<allenemys.length;i++){
        if(allenemys[i].islive){
        var e = allenemys[i];
            if(e.x+enemywidth>planex&&e.x<planex+planewidth&&e.y>planey||e.y>boxheight){
                e.islive=false;
                stop();
                score=0;
            }
        }
    }
}

function drawscore(){
    document.getElementById('score').innerHTML=score;
}



    
    function run(){
        drawplane();
        drawbullet();
        drawscore();
        drawenemy();
        checkbullet();
        checkplane();
    }

 

 

myplane.html源代码：

<!DOCTYPE html>
<html>

    <head>
    <meta charset="utf-8" />
    <title></title>
    </head>

    <body style="" data-mce-style="color: #0000ff;">>
    <canvas id="canvas" width="500" height="500" style="background-image: url(images/bak.PNG);"></canvas>    
    <img src="images/pause.PNG" style="position: absolute;top: 20px;left: 30px;" onclick="stop()"/>
    <div style="position: absolute;top: 90px;left: 30px;font-weight: bold;font-size: 40px;color:cornflowerblue"><span id="score">0</span></div>
    <input style="position: absolute;top:350px;left: 230px;" type="button" value="start" id="start" onclick="init();startHide()" />        
    <div style="position: absolute;top: 200px;left: 180px;"><span id="rules">击中敌机得分<br>飞机撞机或敌机落地游戏结束</span></div>
    <script type="text/javascript" src="js/elements.js"></script>
    <script type="text/javascript" src="js/myplane.js" ></script>
    <script>
    var rules = document.getElementById('rules');
    var showScore = document.getElementById('showScore');
    var start = document.getElementById('start');    

    function startHide(){        
    rules.style.display="none";        
    start.style.display="none";            
    }            

    function stop(){                
    clearInterval(gameTimmer);                
    clearInterval(btimmer);                
    clearInterval(etimmer);                
    cxt.clearRect(boxx,boxy,boxwidth,boxheight);            
    allenemys.length=0;            
    allbullets.length=0;            
    rules.style.display="";            
    start.style.display="";            
    }     

    </script>
    </body>
    </html>

 

然后就可以开玩了, 当然你自己也可以调里面的参数

 

改成无敌啊 超级子弹啊  还有噩梦模式等等 看你想象力了

 

如果想知道怎么写出来可以访问下面的链接哦！

 

http://www.cnblogs.com/demonxian3/p/6238635.html

 

对了 忘记说了 游戏有个BUG那就是越玩越快  就当自带的增加难度特效吧 刷新页面可以避免