飞机大战游戏源代码

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

 

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

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

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

飞机大战游戏源代码_第1张图片

 

准备:

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

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

 

飞机大战游戏源代码_第2张图片

 

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

 

飞机大战游戏源代码_第3张图片

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)else{sp=0}planex+=sp;break; case 40 : if((planey+planeheight)else{sp=0}planey+=sp;break; default:break; } },false) gameTimmer = setInterval(run,1000/fps);  } function drawenemy(){ for (var i=0;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){ 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){ if(allenemys[i].islive){ var e =allenemys[i]; for(var j=0;j){ if(allbullets[j].islive){ var b = allbullets[j]; if(b.x>e.x-bulletwidth&&b.x+bulletwidthe.y){ e.islive=false; b.islive=false; score+=100; } } } } } } function checkplane(){ for(var i=0;i){ if(allenemys[i].islive){ var e = allenemys[i]; if(e.x+enemywidth>planex&&e.xplaney||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">0span>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那就是越玩越快  就当自带的增加难度特效吧 刷新页面可以避免
 
 
 
 
 

转载于:https://www.cnblogs.com/demonxian3/p/6241755.html

你可能感兴趣的:(飞机大战游戏源代码)