飞机大战游戏源代码-CSDN博客

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

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

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>