飞机大战游戏源代码
和大家分享一个飞机大战游戏源代码
如下图 如果想要知道游戏怎么做出来的可以访问：
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>
然后就可以开玩了, 当然你自己也可以调里面的参数
改成无敌啊 超级子弹啊 还有噩梦模式等等 看你想象力了
如果想知道怎么写出来可以访问下面的链接哦！
对了 忘记说了 游戏有个BUG那就是越玩越快 就当自带的增加难度特效吧 刷新页面可以避免
版权声明：本文为demonxian3原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。