飞机大战html游戏全代码js、jquery操作
飞机大战html游戏全代码
- 博主的话
- 运行图片
- 目录路径
- 飞机大战.html
- style.css
- 进行下一个游戏的开发！
- 注意事项
博主的话
当时博主只会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;
}
else {
ePlanex-=2;
if(ePlanex<=0) l_or_r=1;
}
setTimeout(that.ePlaneRoute2_2,25);
}
else {
img.css('display','none');
img.remove();
}
}
this.createePlane3=function(){//飞机6、右半圆飞行、
ePlaney=50;
img.attr({
'src':'css/img/ePlane6.png',
'class':'ePlane'
});
img.css({
'margin-left':ePlanex+'px',
'margin-top':ePlaney+'px'
});
$("#game").append(img);
this.ePlaneRoute3();
}
this.ePlaneRoute3=function(){//飞机6的轨迹
if(degree<=180) {
var h0=50;
var R=100;
ePlanex=R*Math.sin(degree*(Math.PI/180));
ePlaney=R+h0+R*Math.cos(degree*(Math.PI/180));
img.css({
'transform':"rotate(-"+degree+"deg)",
'margin-left':ePlanex+'px',
'margin-top':ePlaney+'px'
});
degree+=2;
setTimeout(that.ePlaneRoute3,25);
}
else {
img.css('display','none');
img.remove();
}
}
}
function myePlane(){
var eP=new ePlane();
if(getRandom(1,3)==1)
eP.createePlane1();
else if(getRandom(1,3)==2)
eP.createePlane2();
else if(getRandom(1,3)==3)
eP.createePlane3();
setTimeout("myePlane()",2000);
}
myePlane();
/********************************击毁、被击毁、碰撞、接收物品************************************/
function isFight(){
var bullet=$("#game .bullet");
var ePlane=$("#game .ePlane");
var plane=$("plane");
var icon=$(".icon");
for(var i=0;i<bullet.length;i++){//判断子弹与敌机是否发生碰撞
var b_1=parseInt(bullet.eq(i).css("margin-left"));
var b_2=parseInt(bullet.eq(i).css("margin-top"));
var b_3=b_1+50;
var b_4=b_2+40;
for(var j=0;j<ePlane.length;j++){
var e_1=parseInt(ePlane.eq(j).css("margin-left"));
var e_2=parseInt(ePlane.eq(j).css("margin-top"));
var e_3=e_1+parseInt(ePlane.eq(j).css("width"));
var e_4=e_2+20;
if(isFourInIt(b_1,b_2,b_3,b_4,e_1,e_2,e_3,e_4)){
ePlane.eq(j).css('display','none');
ePlane.eq(j).remove();
bullet.eq(i).css('display','none');
bullet.eq(j).remove();
score+=10;
$("span")[1].innerHTML="score "+score;
}
}
}
var p_1=planex;//判断飞机与敌机是否发生碰撞
var p_2=planey;
var p_3=b_1+50;
var p_4=b_2+40;
for(var j=0;j<ePlane.length;j++){
var e_1=parseInt(ePlane.eq(j).css("margin-left"));
var e_2=parseInt(ePlane.eq(j).css("margin-top"));
var e_3=e_1+parseInt(ePlane.eq(j).css("width"));
var e_4=e_2+20;
if(isFourInIt(p_1,p_2,p_3,p_4,e_1,e_2,e_3,e_4)){
if(life==3)
{
$('#life2').attr('src','css/img/life2.png');
life--;
bullet_grade=1;
ePlane.eq(j).css('display','none');
ePlane.eq(j).remove();
shansuo(3);
}
else if(life==2)
{
$('#life1').attr('src','css/img/life2.png');
life--;
bullet_grade=1;
ePlane.eq(j).css('display','none');
ePlane.eq(j).remove();
shansuo(3);
}
else if(life==1)
{
alert("You lost!");
location.reload();
}
}
}
//icon图标时间
for(var j=0;j<icon.length;j++){
var i_1=parseInt(icon.css("margin-left"));
var i_2=parseInt(icon.css("margin-top"));
var i_3=i_1+40;
var i_4=i_2+40;
if(isFourInIt(i_1,i_2,i_3,i_4,p_1,p_2,p_3,p_4)){
if(icon.attr('src')=='css/img/bullet_up.png')//子弹升级
{
if(bullet_grade==1)
{
bullet_grade++;
}
else if(bullet_grade==2)
{
bullet_grade++;
}
icon.css('display','none');
icon.remove();
}
else if(icon.attr('src')=='css/img/plane_up.png')//飞机加速
{
if(planev>=3&&planev<=5)
{
planev++;
}
icon.css('display','none');
icon.remove();
}
}
}
setTimeout("isFight()",50);
}
isFight();
/******************************图标：升级子弹、飞机加速、子弹种类*****************************/
function icon(){
var that=this;
var iconx=0;
var icony=0;
var img=$(new Image());
this.createicon1=function(){//升级子弹
iconx=getRandom(1,250);//x随机
icony=getRandom(1,50);//y随机
img.attr({
'src':'css/img/bullet_up.png',
'class':'icon'
});
img.css({
'margin-left':iconx+'px',
'margin-top':icony+'px'
});
$("#game").append(img);
this.iconRoute();
}
this.createicon2=function(){//飞机加速
iconx=getRandom(1,250);//x随机
icony=getRandom(1,50);//y随机
img.attr({
'src':'css/img/plane_up.png',
'class':'icon'
});
img.css({
'margin-left':iconx+'px',
'margin-top':icony+'px'
});
$("#game").append(img);
this.iconRoute();
}
this.iconRoute=function(){//icon的轨迹
if(icony<=465) {
img.css('margin-top',icony+'px');
icony+=3;
setTimeout(that.iconRoute,25);
}
else {
img.css('display','none');
img.remove();
}
}
}
function myIcon(){
var ic=new icon();
if(getRandom(1,3)==1)
ic.createicon1();
else if(getRandom(1,3)>=2)
ic.createicon2();
setTimeout("myIcon()",getRandom(10,13)*1000);
}
myIcon();
</script>
</html>
style.css
*{
margin: 0px;
padding: 0px;
/*无法选择图片*/
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
}
/*********************container*****************/
#container{
height: 630px;
width: 1024px;
margin-left: 150px;
border: 1px solid black;
background: url("img/background.jpg");
}
/*******************tab栏设置****************/
#tab{
height: 30px;
width: 400px;
margin: 70px 0 0 290px;
position: absolute;
background: black;
opacity: .7;
}
#tab_time{
float: left;
margin-left: 4px;
border-right: 1px solid white;
}
#tab_score{
border-right: 1px solid white;
float: left;
}
#tab_life{
border-right: 1px solid white;
float: left;
}
#tab_sound{
float: left;
}
.tabStyle{
width: 95px;
height: 30px;
font-size: 14px;
color: white;
}
.tabStyle p{
margin: 5px 0 0 5px;
font-size: 15px;
}
.lifeStyle{
width: 20px;
height: 20px;
position: absolute;
float: left;
}
#life1{
margin: 5px 0 0 -50px;
}
#life2{
margin: 5px 0 0 -25px;
}
#sound1{
width: 20px;
height: 20px;
margin: 5px 0 0 -25px;
position: absolute;
float: left;
}
#sound2{
width: 20px;
height: 20px;
margin: 5px 0 0 -25px;
position: absolute;
float: left;
display: none;
}
/*****************************game页面设置**********************/
#game{
height: 500px;
width: 300px;
margin: 100px 0 0 340px;
background: url("img/game_bg.png");
}
#plane{
width: 50px;
height: 40px;
margin-left: 125px;
margin-top: 460px;
position: absolute;
}
.bullet{
height: 20px;
width: 4px;
position: absolute;
}
.ePlane{
width: 50px;
height: 40px;
position: absolute;
opacity: .9;
}
.icon{
width: 40px;
height: 40px;
position: absolute;
}
进行下一个游戏的开发！
指尖大冒险、跳一跳升级版html5游戏全代码
“是男人就下一百层”h5游戏全网最详细教学、全代码，js操作
注意事项
【1】 原创博客，转载本篇请与我联系，尊重版权。
【2】 关于阅读本篇博客的所有问题、代码源码、图片素材、编程技巧、编程经历都可联系我，与我交流讨论。
【3】 本人部分时间承接各种毕业设计、网站编写、微信小程序编写。需要请在CSDN私信