飞机大战html游戏全代码jsjquery操作
Posted 征途黯然.
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了飞机大战html游戏全代码jsjquery操作相关的知识，希望对你有一定的参考价值。
飞机大战html游戏全代码
博主的话
当时博主只会html，css和原生javascript，假期用了一周编出来，那个时候的状态就是天天不想睡觉，就想把这个游戏编完。
后来博主开学了，去图书馆借了一本Jquery的书，于是就把原生JavaScript的代码改成了JQ形式。
我会把html文件、css文件提供下载地址，文件夹路径也展示给大家。但是图片就不给大家了，毕竟博主辛辛苦苦做出来的游戏。
但是！！！但是！！！我其实是很愿意给那些为了自己锻炼而需要参考我的代码的同志们。所以，大家有需要的话，请到这里：https://download.csdn.net/download/qq_43592352/12368541下载。
2019-3-1 留。
/***2019.11.13更新****/
这是我最近写的横版的飞机大战，时隔9个月，游戏优化和代码优化都提升很多，大家可以看一下。
横版-飞机大战html游戏全代码js、jquery操作
运行图片
链接: 点击下载图片.
目录路径
所以大家想要程序跑起来的话，还需要jquery-3.3.1.js文件和img文件夹里面的图片。
飞机大战.html
<html>
<head>
<title>飞机大战</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="jquery-3.3.1.js" type="text/javascript"></script>
</head>
<body >
<div id="container">
<audio src="css/music/firstDesk.mp3" id="firstDesk" class="audio" autoplay="autoplay" loop="loop"></audio>
<div id="tab">
<div id="tab_time" class="tabStyle"><p><span></span></p></div>
<div id="tab_score" class="tabStyle"><p><span></span></p></div>
<div id="tab_life" class="tabStyle"><p><span></span></p></div>
<img src="css/img/life1.png" id="life1" class="lifeStyle">
<img src="css/img/life1.png" id="life2" class="lifeStyle">
<div id="tab_sound" class="tabStyle"><p><span></span></p></div>
<img src="css/img/sound1.png" id="sound1" class="soundStyle">
<img src="css/img/sound2.png" id="sound2" class="soundStyle">
</div>
<div id="game">
<img id="plane" src="css/img/plane.png"/>
</div>
</div>
</body>
<script type="text/javascript">
/*
飞机飞行速度：85行
子弹发射时间间隔 ：181行
子弹移动速度：162行
敌机生成时间间隔：313行
*/
/*********************便捷函数*******************************/
function getRandom(min,max)//获取在区间[min.max]内的int数
var s;
s=parseInt(Math.random()*max+1);
while(s<min)
s=parseInt(Math.random()*max+1);
return s;
function isInIt(b1,b2,e1,e2,e3,e4)
var k=-3;//设置k值，使得子弹陷入敌机才会消失
if(b1<e3-k&&b1>e1+k&&b2>e2+k&&b2<e4-k)
return 1;
else return 0;
function isFourInIt(b1,b2,b3,b4,e1,e2,e3,e4)//判断是否重叠，即相撞
if(isInIt(b1,b2,e1,e2,e3,e4)||isInIt(b1,b4,e1,e2,e3,e4)||isInIt(b3,b2,e1,e2,e3,e4)||isInIt(b3,b4,e1,e2,e3,e4))
return 1;
else return 0;
function shansuo(i)//飞机闪烁多少秒
var i1=0;
plane.fadeTo(200,0.1);
plane.fadeTo(200,1);
i1+=1;
if(i1<=i*2)
setTimeout("shansuo()",500);
/*tab栏设置：时间、分数、生命、声音控制*****************************/
//时间
var minute=0,second=0;
function timedCount()
if(second==60) second=0;minute++;
second++;
$("span")[0].innerHTML="时间 "+(minute>9?minute:"0"+minute)+":"+(second>9?second:"0"+second);
setTimeout("timedCount()",1000);
timedCount();
//分数
var score=0;
$("span")[1].innerHTML="score "+score;
//生命
var life=3;
$("span")[2].innerHTML="生命 ";
//声音设置
$("span")[3].innerHTML="声音";
var audio_key=1; //播放bgm的flag
var audio = document.getElementById('firstDesk');
$(".soundStyle").click(function()
$("#sound1").toggle();
$("#sound2").toggle();
if(audio_key)
audio.pause();audio_key=0;
else
audio.play();audio_key=1;
);
/***飞机移动速度、移动动作、飞行区域********************************/
var plane=$("#plane");
var planex=125;
var planey=460;
var planev=3;//飞机速度
$(document).keydown(function(event)
if(event.which==37&&planex>=0)
planex-=planev;
plane.attr('src','css/img/planeLeft.png');
plane.css("margin-left",planex);
if(event.which==39&&planex<=250)
planex+=planev;
plane.attr('src','css/img/planeRight.png');
plane.css("margin-left",planex);
if(event.which==38&&planey>=50)//50px用来创建敌机
planey-=planev;
plane.css("margin-top",planey);
if(event.which==40&&planey<=460)
planey+=planev;
plane.css("margin-top",planey);
);
$(document).keyup(function(event)
plane.attr('src','css/img/plane.png');
);
/********子弹类：可升级、路线、随飞机位置生成*******************************************/
function Bullet()
var that=this;
var bulletx =planex+23;
var bullety =planey-20;
var img=$(new Image());
this.createBullet=function()
img.attr(
'src':'css/img/bullet3.png',
'class':'bullet'
);
img.css(
'margin-left':bulletx+'px',
'margin-top':bullety+'px',
);
$("#game").append(img);
this.bulletMove();
this.bulletUp1=function()
img.attr(
'src':'css/img/bullet3x.png',
'class':'bullet'
);
img.css(
'margin-left':bulletx-2+'px',
'margin-top':bullety+'px',
'width':'9px'
);
$("#game").append(img);
this.bulletMove();
this.bulletUp2=function()
img.attr(
'src':'css/img/bullet3xx.png',
'class':'bullet'
);
img.css(
'margin-left':bulletx-5+'px',
'margin-top':bullety+'px',
'width':'14px'
);
$("#game").append(img);
this.bulletMove();
this.bulletMove=function()//子弹移动轨迹
if(bullety>0)
img.css('margin-top',bullety+'px');
bullety=bullety-3;
setTimeout(that.bulletMove,20);
else
img.css('display','none');
img.remove();
var bullet_grade=1;
function myBullet()
var bu=new Bullet();
if(bullet_grade==1)
bu.createBullet();
else if(bullet_grade==2)
bu.bulletUp1();
else if(bullet_grade==3)
bu.bulletUp2();
setTimeout("myBullet()",300);
myBullet();
/********敌机：机型、路线、子弹、机组*******************************************/
function ePlane()
var that=this;
var ePlanex =0;
var ePlaney =0;
var l_or_r=1;//之字形左右flag
var degree=0;
var img=$(new Image());
this.createePlane1=function()//飞机1、水平飞行、y随机
ePlaney=getRandom(1,50);//y随机
img.attr(
'src':'css/img/ePlane1.png',
'class':'ePlane'
);
img.css(
'margin-left':ePlanex+'px',
'margin-top':ePlaney+'px'
);
$("#game").append(img);
this.ePlaneRoute1();
this.ePlaneRoute1=function()//飞机1的轨迹
if(ePlanex<=250)
img.css('margin-left',ePlanex+'px');
ePlanex+=1;
setTimeout(that.ePlaneRoute1,25);
else
img.css('display','none');
img.remove();
this.createePlane2=function()//飞机2,3,4、竖直飞行,之字形飞行、x随机
ePlanex=getRandom(1,250);//x随机
img.attr(
'src':'css/img/ePlane'+getRandom(2,4)+'.png',
'class':'ePlane'
);
img.css(
'margin-left':ePlanex+'px',
'margin-top':ePlaney+'px'
);
$("#game").append(img);
if(getRandom(1,2)%2)
this.ePlaneRoute2_1();
else this.ePlaneRoute2_2();
this.ePlaneRoute2_1=function()//飞机2,3,4的轨迹 竖直
if(ePlaney<=460)
img.css('margin-top',ePlaney+'px');
ePlaney+=1;
setTimeout(that.ePlaneRoute2_1,25);
else
img.css('display','none');
img.remove();
this.ePlaneRoute2_2=function()//飞机2,3,4的轨迹 之字形
if(ePlaney<=460)
img.css('margin-top',ePlaney+'px');
img.css('margin-left',ePlanex+'px');
ePlaney+=1;
if(l_or_r%2)
ePlanex+=2;
if(ePlanex>=250) l_or_r=2;
以上是关于飞机大战html游戏全代码jsjquery操作的主要内容，如果未能解决你的问题，请参考以下文章