飛機大戰遊戲源代碼

時間 2019-12-09

標籤飛機大戰遊戲源代碼欄目遊戲简体版

原文原文鏈接

和你們分享一個飛機大戰遊戲源代碼javascript

以下圖若是想要知道遊戲怎麼作出來的能夠訪問：html

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

若是不想知道能夠直接按照下面流程搞出遊戲來canvas

準備：dom

先建立一個文件夾在這個文件夾裏面建立 images文件夾和 js 文件夾和一個html文件如圖ide

由於代碼裏調用了相對路徑若是不這麼作顯示不出來this

在 images 文件夾裏面的素材能夠本身找可是圖片名字必定要跟下面的同樣url

bak　　　　 --》背景 spa

enemy　　 --》敵人飛機 code

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>