web前端游戏项目-雷霆战机&飞机大战游戏【附源码】

发布时间:2023年12月20日

一:雷霆战机

《雷霆战机》是一款空战游戏,用户可以用按键 W; S; A; D 来控制飞机的前进;后退;向左;向右来避免被敌机撞到,用回车键发射子弹,根据用户的操作时间越长奖励越多,但是随着时间的推移,游戏难度会加大,飞机存活的几率也会变得更小,所以更加考验用户的掌控能力,是一款身心健康的小游戏

运行效果:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

HTML源码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>飞机大战</title>

<script type="text/javascript" src="js/impact.js"></script>

<style>
html,body{width:100%;height:100%;margin:0;padding:0;}
img{display:block;border:none;}
.box{position:relative;overflow:hidden;height:100%;width:100%;min-width:300px;min-height:500px;}
.bjbox{height:auto;position:absolute;left:0;top:0px;opacity: .6;}
.bjbox img{width:100%;height:auto;}
.stata{position:absolute;left:50%;top:50%;margin-left:-125px;margin-top:25px;width:250px;height:50px;font-size:36px;text-align: center;line-height:40px;cursor:pointer;z-index:10;}

.zhandouBox{position:absolute;z-index:1;height:100%;width:100%;}
.wofang{position: absolute;width:180px;height:60px;cursor:pointer;/* left:50%;margin-left:-100px;bottom:15px; */opacity: .6;}
.wofang img{position:absolute;left:-35px;top:-30px;}
.wofang .wo_xue{position: absolute;display:block;border:solid 1px #333;width:150px;height:8px;left:20px;top:40px;background:#ccc;overflow: hidden;}
.wofang .wo_xue div{width:100%;height:100%;background:green;position: absolute;}

.diji_1{position:absolute;width:200px;height:150px;}
.diji_1 img{width:100%;height:100%;}
.diji_1 .xue{position: absolute;display:block;border:solid 1px #333;width:150px;height:8px;left:20px;top:40px;background:#ccc;overflow: hidden;}
.diji_1 .xue div{width:100%;height:100%;background:green;position: absolute;}

.diji_2{position:absolute;width:300px;height:230px;}
.diji_2 img{width:100%;height:100%;}
.diji_2 .xue{position: absolute;display:block;border:solid 1px #333;width:200px;height:12px;left:50px;top:60px;background:#ccc;overflow: hidden;}
.diji_2 .xue div{width:100%;height:100%;background:green;position: absolute;}

.zongjidefen{position:absolute;width:100%;height: 100%;left:0;top:0;background:rgba(0,0,0,.8);font-size:50px;color:#ddd;text-align: center;line-height:300px;z-index:50;display:none;}
.zongjidefen button{display:block;width:250px;height:50px;font-size:36px;text-align: center;line-height:40px;cursor:pointer;margin-left:auto;margin-right: auto;}

.paodan{width:15px;height:45px;position: absolute;}
.paodan img{width:100%;height:100%;}

.img_1{display:block;position: absolute;width:50px;height:50px;}
.img_2{display:block;position: absolute;width:160px;height:170px;}
.img_3{display:block;position: absolute;width:250px;height:266px;}
</style>
</head>
<body>

<div class="box">
	<div class="bjbox">
		<img src="images/bg_dz.jpg">
		<img src="images/bg_dz.jpg">
	</div>
	<button class="stata">开始</button>
	<div class="zhandouBox">
		<a class="diji_box">
		</a>
		<a class="baozhaxiaoguo_box">
		</a>
		<div class="paodan_1"></div>
		<div class="wofang">
			<img src="images/wofang_dz.png">
			<span class="wo_xue">
				<div></div>
			</span>
		</div>
	</div>
	<div class="zongjidefen">
		总计得分:<span>0000</span>
		<button onClick="zailaiyici()">再来一次</button>
	</div>
</div>

<script type="text/javascript" src="js/script.js"></script>

</body>
</html>
JS文件:
(1)function.js
var obj = null;
var obj_1 = null;
var str_2 = "";
var arrshow=[];
var start=1;
var timr1=null;
var startobj=null;

//构造删除数组的原型
Array.prototype.indexOf = function(val) {
	for (var i = 0; i < this.length; i++) {
	if (this[i] == val) return i;
	}
	return -1;
};
Array.prototype.remove = function(val) {
	var index = this.indexOf(val);
	if (index > -1) {
	this.splice(index, 1);
	}
};
function fn_num_str(str)
{
	var num = parseInt(str)+1000;
	num+='';
	return num.substring(1);
};
function fn_selechange(e) 
{
	var str_ = $(e).val();
	obj.find("tr").each(function() 
	{
		var str = $(this).find(".t2").html();
		if (str_ == "all") 
		{
			obj.find("tr").css("display", "table-row");
			return false;
		}
		if (str.indexOf(str_)!=-1) 
		{
			$(this).css("display", "table-row");
		} 
		else
		{
			$(this).css("display", "none");
		}
	})
};

function fn_seach_input(e) 
{
	var str_ = $(e).val();
	obj.find("tr").each(function()
	{
		var str = ($(this).find(".t4 span").html())+($(this).find(".t3 span").html());
		if (str.indexOf(str_) != -1)
		{
			$(this).css("display", "table-row");
		}
		else
		{
			$(this).css("display", "none");
		}
	})
}

function fn_show_zh(e) 
{
	var str_ = $(e).html();
	if (str_ == "隐藏释义")
	{
		$(e).html("显示释义");
		fn_startshow();
	}
	else
	{
		$(e).html("隐藏释义");
		fn_startshow();
	}

};

function fn_show_en(e)
{
	var str_ = $(e).html();
	if (str_ == "隐藏API名称")
	{
		$(e).html("显示API名称");
		fn_startshow();
	}
	else
	{
		$(e).html("隐藏API名称");
		fn_startshow();
	}
};
function fn_startshow()
{
	var val1= $(".btn1").html();
	var val2= $(".btn2").html();
	if(val1 == "隐藏释义" && val2 == "隐藏API名称")
	{
		start = 1;
		obj.find("tr").each(function(){
		 	$(this).find(".t3 span").css("display", "block");
		 	$(this).find(".t3 div").css("display", "block");
		 }).each(function(){
		 	$(this).find(".t4 span").css("display", "block");
		 });
	};
	if(val1 == "显示释义" && val2 == "隐藏API名称")
	{
		start = 2;
		obj.find("tr").each(function(){
		 	$(this).find(".t3 span").css("display", "none");
		 	$(this).find(".t3 div").css("display", "none");
		 }).each(function(){
		 	$(this).find(".t4 span").css("display", "block");
		 });
	};
	if(val1 == "隐藏释义" && val2 == "显示API名称")
	{
		start = 3;
		obj.find("tr").each(function(){
		 	$(this).find(".t3 span").css("display", "block");
		 	$(this).find(".t3 div").css("display", "block");
		 }).each(function(){
		 	$(this).find(".t4 span").css("display", "none");
		 });
	};
	if(val1 == "显示释义" && val2 == "显示API名称")
	{
		start = 4;
		obj.find("tr").each(function(){
		 	$(this).find(".t3 span").css("display", "none");
		 	$(this).find(".t3 div").css("display", "none");
		 }).each(function(){
		 	$(this).find(".t4 span").css("display", "none");
		 });
	};
	$(".eyes").removeClass('on');
}
function fn_listinputfus(e)
{
	obj_1=$(e);
	obj_1.parents("tr").addClass('tron').siblings().removeClass('tron');
	str_2=$.trim($(e).parents("tr").find(".t4 span").html());
};
function fn_listinputkeup(e)
{
	var str = $(e).val();
	var num = str.length;
	var star=1;
	for(var i=0;i<num;i++)
	{
		if(str[i] != str_2[i])
		{
			star = 0;
		}
	};
	if(star == 0)
	{
		$(e).addClass('no');
	}
	else
	{
		$(e).removeClass('no');
	}
	if(star == 1 && num == str_2.length)
	{
		$(e).addClass('ok');
	}
	else
	{
		$(e).removeClass('ok');
	};
};
function fn_lock(e)
{
	//fn_num_str;
	var str_="";
	var num = 0;
	$(".table1 tbody tr").each(function(index, el) {
		var str = $(this).attr("data");
		var str1_ = $(this).find(".t3").attr("val");
		var str2_ = $(this).find(".t4").attr("val");
		var str1 = $(this).find(".t3 span").html();
		var str2 = $(this).find(".t4 span").html();
		var shu = $(this).find(".t2").html();
		$(".tk").show();
		if(str == 1)
		{
			num++;
			str_+=fn_returnstr(fn_num_str(num),0,"",str1_,str1,"","");
		}
		else if(str == 2)
		{
			num++;
			str_+=fn_returnstr(fn_num_str(num),0,"","","",str2_,str2);
		}
		else if(str == 3)
		{
			num++;
			str_+=fn_returnstr(fn_num_str(num),0,"",str1_,str1,str2_,str2);
		}
		else if(str == 4)
		{
			shu = $(this).find(".t2 input").val();
			num++;
			str_+=fn_returnstr(fn_num_str(num),1,shu,str1_,str1,str2_,str2);
		};
	});
	$(".tk tbody").html(str_);
};
///
function fn_returnstr(num,strt,shu,str1,str2,str3,str4)
{

	strt=strt==0?"修改":"新增"
	var str3='<tr>'+
			'<td>'+num+'</td>'+
			'<td>'+strt+'</td>'+
			'<td>'+shu+'</td>'+
			'<td>'+str1+'</td>'+
			'<td>&gt;&gt;</td>'+
			'<td>'+str2+'</td>'+
			'<td>'+str3+'</td>'+
			'<td>&gt;&gt;</td>'+
			'<td>'+str4+'</td>'+
		'</tr>';
	return str3;
}
function fn_add(e)
{
	var num = parseInt($(".table1 tr:last").find(".t1").html())+1;
	var str4='<tr data="4"><td class="t1">'+fn_num_str(num)+
			'<td class="t2">'+
			'<input type="text" placeholder="类别">'+
			'</td>'+
			'<td class="t4" val="">'+
			'<span></span>'+
			'</td>'+
			'<td val="" class="t3">'+
			'<span></span>'+
			'<div οnmοuseοut="fn_mouseout(this)" οnmοuseοver="fn_mouseover(this)"></div>'+
			'</td>'+
			'<td class="t5">'+
			'<input οnfοcus="fn_listinputfus(this)" οnkeyup="fn_listinputkeup(this)" class="" type="text"></td>'+
			'<td class="t6">'+
			'<i onClick="fn_eyes(this)" class="icon iconfont icon-03zichanxianshifuzhi"></i></td>'+
			'<td class="t7"><i onClick="fn_seach(this)" class="icon iconfont icon-sousuokuangsousuo"></i></td>'+
			'<td class="t8"><i onClick="fn_key(this)" class="icon iconfont icon-zhongdian"></i></td></tr>';
		$(".table1 tbody").append(str4);
};
function fn_guishu(e)
{
	var val = $(e).text();
	$(e).html("<input οnblur='fn_addblues(this)' type='text' value='"+val+"'>");
	$(e).find("input").focus();
};
function fn_addblues(e)
{
	var val = $(e).val();
	$(e).parent().html(val);
};
function fn_eyes(e)
{
	var e1= $(e).parents("tr");
	var e2 = e1.find('.t3 span');
	var e2_ = e1.find('.t3 div');
	var e3 = e1.find('.t4 span');
	if(start==2)
	{
		if(e2.css("display")=="none")
		{
			e2.css("display","block");
			e2_.css("display","block");
			$(e).addClass('on');
		}
		else
		{
			e2.css("display","none");
			e2_.css("display","none");
			$(e).removeClass('on');
		}
	};
	if(start==3)
	{
		if(e3.css("display")=="none")
		{
			e3.css("display","block");
			$(e).addClass('on');
		}
		else
		{
			e3.css("display","none");
			$(e).removeClass('on');
		}
	};
};
function fn_seach(e)
{
	var arr = $(e).parents("tr").find(".t2").text().split(",");
	var str = $(e).parents("tr").find(".t4 span").html()+"";
	var str1=str.replace(/\:.+/,"")
	var str2=str1.replace(/\(.+/,"")
	window.open("http://www.baidu.com/s?&wd="+arr[0]+" "+str2);
};
function fn_key(e)
{
	var arr=[];
	if(localStorage.shuju)
	{
		arr = localStorage.shuju.split(",");
	};
	var num = $(e).parents("tr").find(".t1").html();
	if($(e).hasClass('on'))
	{
		$(e).removeClass('on');
		arr.remove(num);
	}
	else
	{
		$(e).addClass('on');
		arr.push(num);
	};
	localStorage.shuju = arr;
};
function fn_mouseover(e)
{
	if($(".fk").css("display")=="none")
	{
		var left= $(e).offset().left;
		var top= $(e).offset().top;
		var str1 = $(e).siblings().html();
		var str2 = $(e).parents("tr").find(".t4 span").html();
		$(".fk").css({left:left,top:top+19,display:"block"}).find('input').val(str2).siblings().val(str1);
		startobj = $(e).parents("tr");
	};
	if(timr1){
		clearTimeout(timr1);
	};
	
};
function fn_mouseout(e)
{
	timr1 = setTimeout(function(){
		fn_leve();
	},0);
};
function fn_divmouseover(e)
{
	clearTimeout(timr1);
};
function fn_divmouseout(e)
{
	clearTimeout(timr1);
	timr1 = setTimeout(function(){
		fn_leve();
	},0);
};
function fn_leve()
{
	$(".fk").css("display","none");
	var val1 = $(".fk").find("input").val();
	var val2 = $(".fk").find("textarea").val();
	var str2 = startobj.find(".t3").attr("val");
	var str1 = startobj.find(".t4").attr("val");
	if(val1 == str1 && val2 == str2){return;}
	if(val1 != str1 && val2 != str2)
	{
		if(startobj.attr("data")!=4)
		{
			startobj.attr("data",3);
		};
		startobj.find(".t3 span").html(val2);
		startobj.find(".t4 span").html(val1);
		return;
	};
	if(val1 == str1 && val2 != str2)
	{
		if(startobj.attr("data")!=4)
		{
			startobj.attr("data",1);
		};
		startobj.find(".t3 span").html(val2);
		return;
	};
	if(val1 != str1 && val2 == str2)
	{
		if(startobj.attr("data")!=4)
		{
			startobj.attr("data",2);
		};
		startobj.find(".t4 span").html(val1);
		return;
	};
};
function fn_returjsn(jsn,num)
{
	var str='<tr><td class="t1">'+fn_num_str(num)+
			'<td class="t2">'+
			jsn.claSs+
			'</td>'+
			'<td class="t4" val="'+jsn.name+'">'+
			'<span>'+jsn.name+'</span>'+
			'</td>'+
			'<td val="'+jsn.explain+'" class="t3">'+
			'<span>'+jsn.explain+'</span>'+
			'<div οnmοuseοut="fn_mouseout(this)" οnmοuseοver="fn_mouseover(this)"></div>'+
			'</td>'+
			'<td class="t5">'+
			'<input οnfοcus="fn_listinputfus(this)" οnkeyup="fn_listinputkeup(this)" class="" type="text"></td>'+
			'<td class="t6">'+
			'<i onClick="fn_eyes(this)" class="icon iconfont icon-03zichanxianshifuzhi"></i></td>'+
			'<td class="t7"><i onClick="fn_seach(this)" class="icon iconfont icon-sousuokuangsousuo"></i></td>'+
			'<td class="t8"><i onClick="fn_key(this)" class="icon iconfont icon-zhongdian"></i></td></tr>';
	return str;

};
$(function()
{

	obj = $("table tbody");
//fn_returjsn
var str5="";
for(var i=0;i<dataApi.length;i++)
{
	str5+=fn_returjsn(dataApi[i],i+1);
};
$(".table1 tbody").html(str5);
	if(!localStorage.shuju){return;}
	var arr = localStorage.shuju.split(",");
	$("tbody tr").each(function(){
		var t1 = $(this).find(".t1").html();
		var t2 = $(this).find(".t8 i");
		if(arr.indexOf(t1)!=-1)
		{
			t2.addClass('on');
		}
	});
});
(2)impact.js
function impact(obj,dobj) {  
        var o = {  
            x: getDefaultStyle(obj, 'left'),  
            y: getDefaultStyle(obj, 'top'),  
            w: getDefaultStyle(obj, 'width'),  
            h: getDefaultStyle(obj, 'width')   
        } 
 
        var d = {  
            x: getDefaultStyle(dobj, 'left'),  
            y: getDefaultStyle(dobj, 'top'),  
            w: getDefaultStyle(dobj, 'width'),  
            h: getDefaultStyle(dobj, 'width') 
        } 
 
        var px, py; 

        px = o.x <= d.x ? d.x : o.x;  
        py = o.y <= d.y ? d.y : o.y;  
  
        // 判断点是否都在两个对象中  
        if (px >= o.x && px <= o.x + o.w && py >= o.y && py <= o.y + o.h && px >= d.x && px <= d.x + d.w && py >= d.y && py <= d.y + d.h) {  
            return true;
        } else {  
            return false;  
        } 
    };
function getDefaultStyle(obj, attribute) {  
        return parseInt(obj.currentStyle ? obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj, false)[attribute]);  
    };
(3)move.1.1.js
function getStyle(obj,attr){//获取外部样式
if(obj.currentStyle){
	return obj.currentStyle[attr];
	}else{
	return getComputedStyle(obj,false)[attr];
	}
}

function startMove(a1,b1,c1,obj,json,fnEnd){//缓冲运动
  clearInterval(obj.timer);
  obj.timer=setInterval(function(){
var bStop=true; //假设:所有的值都已经到了
for(var attr in json){
  var cur=0;
  if(attr=='opacity')
  {
	cur=Math.round(parseFloat(getStyle(obj,attr))*100);
  }
  else
  {
	cur=parseInt(getStyle(obj,attr));
  }
  if(a1==0)
	  {
	  var speed=(json[attr]-cur)/b1;
	  speed=speed>0?Math.ceil(speed):Math.floor(speed);
	  }
	  else
	  {
		 if(json[attr]>cur)
		 {
			 var speed=b1;
		 }
		 else
		 {  
			 var speed=-b1
		 }
	  }
  if(cur!==json[attr])
  {
	
	  bStop=false;
	 if(attr=='opacity')
	 {
	
		if(json[attr]>cur)
		{
			
			if(json[attr]-cur<speed){bStop=true;}
		}
		else
		{
			
			if(json[attr]-cur>speed){bStop=true;}
		}
	 }
	 
  }
  else
  {
  
  }
  if(a1==0)
  {
	  if(cur==json[attr])
	  {}
	  else
	  {
			 if(attr=='opacity')
			 {
				obj.style[attr]=(cur+speed)/100;
			 }
			 else
			 {
			    obj.style[attr]=cur+speed+'px';
			 }
	  }
  }
  else
  {
		
	    if(json[attr]-cur>0)
		{
			  if(json[attr]-cur<b1)
			  {
				 obj.style[attr]=json[attr]+'px';
			  }
			  else
			  {
				   if(attr=='opacity')
				   {
					   obj.style[attr]=(cur+speed)/100;
				   }
				   else
				   {
					   obj.style[attr]=cur+speed+'px';
				   }
			  }
	    }
		else
		{
			if(cur-json[attr]<b1)
			  {
				 obj.style[attr]=json[attr]+'px';
			  }
			  else
			  {
				   if(attr=='opacity')
				   {
					   obj.style[attr]=(cur+speed)/100;
				   }
				   else
				   {
					   obj.style[attr]=cur+speed+'px';
				   }
			  }
		}
	
		
   }

}
if(bStop){
	clearInterval(obj.timer);
	if(fnEnd)fnEnd();
	}
  },c1)
}
function getByClass(oParent,sClass){
  var aEle=oParent.getElementsByTagName('*');
  var aResult=[];
  for(var i=0;i<aEle.length;i++){
   if(aEle[i].className==sClass)
   {
	   aResult.push(aEle[i]);
	   }
   }
return aResult;
}
function getObj(n){//选择器
  var oBody=document.getElementsByTagName("body")[0];
 if(n.indexOf('#')!==-1){
	 //针对id
  n=n.replace(/[#]/ig,"")
  return document.getElementById(n);
  
 }else if(n.indexOf('.')!==-1){
	 //针对class
  n=n.replace(/[.]/ig,"")
  var aN = oBody.getElementsByTagName("*");
  var aResult=[];
  for(var i=0;i<aN.length;i++){
   if(aN[i].className==n)
   {
	   aResult.push(aN[i]);
	   }//if
   }
   if(aResult.length==1){
	  return  aResult[0];
	  }else{
		  return  aResult;
		  }
   
 }else{
	//针对标签
   var aN = oBody.getElementsByTagName(n)
   if(aN.length==1){
	   return aN[0]
	   }else{
		   return aN;
		   }
 }

}
(4)script.js
var btnstata=getObj(".stata");
var zd_quyu=getObj(".zhandouBox");
var diji_box=getObj(".diji_box");
var wofang=getObj(".wofang");
var beijing=getObj(".bjbox");
var baozhaxiaoguo=getObj(".baozhaxiaoguo_box");//爆炸效果区域

// var paodan=getObj(".paodan");

var wofangimg=wofang.getElementsByTagName("img")[0];
var wo_xue_div=getObj(".wo_xue").getElementsByTagName("div")[0];
var zongfen=getObj(".zongjidefen").getElementsByTagName("span")[0];
//alert(zongfen);
var wofangtime_left=null;//移动
var wofangtime_top=null;//移动
var wofangtime_paodan=null;//发射炮弹;
var wofangtime_speed=10;//我方飞机移动速度

var dijizhizao_speed=2000;//敌机制造速度
var dijizhizao_time=null;//敌机制造循环时间对象

var arr_diji_1=[];//敌机
var arr_diji_2=[];//敌机
var arr_diji_zong=[];//敌机

var arr_diji_chuxian_weizhi=[];//敌机出现位置;

var putong_diji=0;//普通敌机击毁数;
var teshu_diji=0;//厉害敌机击毁数;

var wofang_ss=0;

var nandujiebie=1;
//敌机生产速度加快
function shudujiakaui()
{
	setInterval(function(){
		if(dijizhizao_speed>400)
		{
		dijizhizao_speed-=10;
		};
		if(dijizhizao_speed<1300)
		{
			nandujiebie=3;
			return;
		}
		if(dijizhizao_speed<1700)
		{
			nandujiebie=2;
			return;
		}
	},2000)
}

//敌机炮弹击中后的爆炸效果;效果类型 x坐标 y坐标
function baozhaxiaoguo_fn(n1,x,y)
{
	//炮弹爆炸
	/*var img;*/
	setTimeout(function(){
		if(n1==1)
		{
			var img1=document.createElement("img");
			img1.src="images/baozha_2.gif";
			img1.setAttribute("class","img_1");
			img1.style.left=x+'px';
			img1.style.top=y+'px';
			baozhaxiaoguo.appendChild(img1);
			setTimeout(function(){
				if(img1){
				baozhaxiaoguo.removeChild(img1);
				}
			},1200)
		}
		else if(n1==2)
		{
			var img2=document.createElement("img");
			img2.src="images/pandan_bz.gif";
			img2.setAttribute("class","img_2");
			img2.style.left=x+'px';
			img2.style.top=y+'px';
			baozhaxiaoguo.appendChild(img2);
			setTimeout(function(){
				if(img2){
				baozhaxiaoguo.removeChild(img2);
				}
			},1200)
		}
		else if(n1==3)
		{
			var img3=document.createElement("img");
			img3.src="images/pandan_bz.gif";
			img3.setAttribute("class","img_3");
			img3.style.left=x-30+'px';
			img3.style.top=y-30+'px';
			baozhaxiaoguo.appendChild(img3);
			setTimeout(function(){
				if(img3){
				baozhaxiaoguo.removeChild(img3);
				}
			},1200)
		}
		else if(n1==4)
		{

		}

	},0)
}
function zailaiyici()
{
	wofang_ss=1;
	chuangjiandiji();
	putong_diji=0;
	teshu_diji=0;
	nandujiebie=1;
	dijizhizao_speed=2020;
	getObj(".zongjidefen").style.display="none";
	wo_xue_div.style.width=150+"px";
	wo_xue_div.style.backgroundColor="green";
}

btnstata.onclick=function()
{
	beijing.style.opacity=1;
	wofang.style.opacity=1;
	wofang_ss=1;
	shudujiakaui();
	btnstata.style.display='none';
	chuangjiandiji();
	setInterval(function(){
		panduan_wofang_zj()
	},40);
};
var zongwidth;
var zongheight;

//背景天空
function beijingtiankong()
{	var x=0;
	var hei= beijing.offsetHeight;
	beijing.style.top=-(hei/2)+'px';
	setInterval(function(){ 
		x=x+1;
		beijing.style.top=x+'px';
	 if(x>=0)
		 {
		 	x=-(hei/2);
		 	beijing.style.top=x+'px';
		 }
	},50)
}
//创建天空飞行物敌机//对象,x轴速度,y轴速度,
function tiankongfeixingwu(obj,xspeed,yspeed,timespeed)
{
	obj.timer_2=null;
	obj.xspeed=xspeed;
	obj.yspeed=yspeed;
	obj.timespeed=timespeed;
	obj.timer_2 = setInterval(function(){
		obj.style.left=obj.offsetLeft+obj.xspeed+'px';
		obj.style.top=obj.offsetTop+obj.yspeed+'px';

		if(obj.offsetTop>(zongheight+200))
		{
			clearInterval(obj.timer_2);
			obj.timer_2=null;
			diji_box.removeChild(obj);
		}
	},obj.timespeed)
};
//动态创建飞机函数
function chuangjiandiji()
{
	clearInterval(dijizhizao_time);
	dijizhizao_time  = setInterval(function(){
		if(wofang_ss!=0)
		{
			var suiji_1_8=parseInt(Math.random()*(8-0)+0);
			var wei_zhi=arr_diji_chuxian_weizhi[suiji_1_8];

			if(nandujiebie==2)
			{var xspeed=parseInt(Math.random()*(6-(-6))+(-6));}
			else if(nandujiebie==3)
			{var xspeed=parseInt(Math.random()*(7-(-7))+(-7));}
			else
			{var xspeed=parseInt(Math.random()*(3-(-3))+(-3));}

			if(wei_zhi-(zongwidth/2)>0)
			{
				xspeed = xspeed<0?xspeed:-xspeed;
			}
			else
			{
				xspeed = xspeed<0?-xspeed:xspeed;
			};

			if(nandujiebie==2)
			{
				var yspeed=parseInt(Math.random()*(7-3)+3);
				var timespeed=parseInt(Math.random()*(45-18)+18);
				var x_1=parseInt(Math.random()*(3-1)+1);
			}
			else if(nandujiebie==3)
			{
				var yspeed=parseInt(Math.random()*(8-4)+4);
				var timespeed=parseInt(Math.random()*(40-10)+10);
				var x_1=parseInt(Math.random()*(3-1)+1);
			}
			else
			{
				var yspeed=parseInt(Math.random()*(6-2)+2);
				var timespeed=parseInt(Math.random()*(50-20)+20);
				var x_1=parseInt(Math.random()*(4-1)+1);
			};
			if(x_1==1)
			{
				var div = document.createElement("div");
				div.setAttribute("class","diji_2");
				div.style.left=wei_zhi+'px';
				div.style.top=-190+'px';
				div.innerHTML='<img src="images/diji_zd.png">'+
								'<span class="xue">'+
										'<div></div>'+
								'</span>';
				diji_box.appendChild(div);
				tiankongfeixingwu(div,xspeed,yspeed,timespeed);
			}
			else
			{
				var div1 = document.createElement("div");
				div1.setAttribute("class","diji_1");
				div1.style.left=wei_zhi+'px';
				div1.style.top=-160+'px';
				div1.innerHTML='<img src="images/diji_2.png">'+
								'<span class="xue">'+
										'<div></div>'+
								'</span>';
				diji_box.appendChild(div1);
				tiankongfeixingwu(div1,xspeed,yspeed,timespeed);
			};
		}
	},dijizhizao_speed)
};
//炮弹实例//速度 left top  炮弹类型
function Paodan(obj,speed,lei)
{
	obj.timer_1=null;
	obj.timer_1 = setInterval(function()
	{
		obj.style.top=obj.offsetTop-speed+'px';
		obj.shang=obj.offsetTop;
		arr_diji_1=document.getElementsByClassName("diji_1");//getObj(".diji_1");
		arr_diji_2=document.getElementsByClassName("diji_2");
		arr_diji_zong=diji_box.children;//arr_diji_1.concat(arr_diji_2);
		//console.log(arr_diji_zong.length);
		//线程
		//setTimeout(function(){
			for(var i=0;i<arr_diji_zong.length;i++)
			{
				//线程
				if(impact(obj,arr_diji_zong[i]))
				{
					clearInterval(obj.timer_1);
					obj.timer_1=null;
					var diji_img=arr_diji_zong[i].getElementsByTagName("img")[0];
					baozhaxiaoguo_fn(1,obj.offsetLeft,obj.offsetTop)
					zd_quyu.removeChild(obj);
					if(arr_diji_zong[i].className=="diji_2")
		            {
		            	var div_xue=arr_diji_zong[i].getElementsByTagName("div")[0];
		            	div_xue.style.width=div_xue.offsetWidth-10+'px';
		            	var div_width=div_xue.offsetWidth;
		            	if(div_width<=0)
		            	{
		            		baozhaxiaoguo_fn(3,arr_diji_zong[i].offsetLeft,arr_diji_zong[i].offsetTop);
		        			diji_box.removeChild(arr_diji_zong[i]);
		        			teshu_diji++;
		            		return;
		            	}
		            	if(div_width<100)
		            	{
		            		div_xue.style.backgroundColor="red";
		            		return;
		            	}
		            	if(div_width<150)
		            	{
		            		div_xue.style.backgroundColor="yellow";
		            		return;
		            	}
		            	else
		            	{
		            		div_xue.style.backgroundColor="green";
		            		return;
		            	}
		            }
		            else if(arr_diji_zong[i].className=="diji_1")
		            {
		            	var div_xue_1=arr_diji_zong[i].getElementsByTagName("div")[0];
		            	div_xue_1.style.width=div_xue_1.offsetWidth-10+'px';
		            	var div_width=div_xue_1.offsetWidth;
		            	if(div_width<=0)
		            	{
		            		baozhaxiaoguo_fn(2,arr_diji_zong[i].offsetLeft,arr_diji_zong[i].offsetTop);
		        			diji_box.removeChild(arr_diji_zong[i]);
		        			putong_diji++;
		            		return;
		            	}
		            	if(div_width<50)
		            	{
		            		div_xue_1.style.backgroundColor="red";
		            		return;
		            	}
		            	if(div_width<100)
		            	{
		            		div_xue_1.style.backgroundColor="yellow";
		            		return;
		            	}
		            	else
		            	{
		            		div_xue_1.style.backgroundColor="green";
		            		return;
		            	}

		            }
				}
		        else
		        {
		        	if(obj.shang<-50)
					{
						clearInterval(obj.timer_1);
						obj.timer_1=null;
						if(obj)
						{
							zd_quyu.removeChild(obj);
						}
						return;
					}
		        }

			}
		/*},0)*/
		if(obj.shang<(-50))
		{
			clearInterval(obj.timer_1);
			obj.timer_1=null;
			if(obj)
			{
				zd_quyu.removeChild(obj);
			}
			
		}
	},50)
};
window.onload=function()
{
	/*baozhaxiaoguo_fn(1,50,80);
	baozhaxiaoguo_fn(1,80,80);
	baozhaxiaoguo_fn(1,0,80);
	baozhaxiaoguo_fn(3,10,50);
	baozhaxiaoguo_fn(1,5,20);
	baozhaxiaoguo_fn(2,0,0);*/
	
	beijingtiankong();
	zongwidth = zd_quyu.offsetWidth;
	zongheight = zd_quyu.offsetHeight;
	var weizhi_bili=zongwidth/8;
	for(var i=0;i<8;i++)
	{
		arr_diji_chuxian_weizhi.push(parseInt(i*weizhi_bili));
	};
	wofang.style.left=zongwidth/2-100+'px';
	wofang.style.top=zongheight/2+(zongheight/2-170)+'px';


	//禁止右键菜单
	document.oncontextmenu = function (){
		alert("请尊重下我的劳动成果哈");
		return false;
	};
};
window.onresize = function(){
	location = location;
};
document.onkeydown=function(event)
{
	var e = event || window.event || arguments.callee.caller.arguments[0];

	//保护源码的措施
     //F12
     if(e.keyCode == 123){
     	alert("请尊重下我的劳动成果哈");
         return false;
     //Ctrl+Shift+I
     }else if((e.ctrlKey) && (e.shiftKey) && (e.keyCode == 73)){
     	alert("请尊重下我的劳动成果哈");
         return false;
     //Shift+F10
     }else if((e.shiftKey) && (e.keyCode == 121)){
     	alert("请尊重下我的劳动成果哈");
         return false;
     //Ctrl+U
     }else if((e.ctrlKey) && (e.keyCode == 85)){
     	alert("请尊重下我的劳动成果哈");
         return false;
     };


	//a65 s83 w87 d68
	if(wofang_ss==0){return false}
		if(e.keyCode==65)
		{
			clearInterval(wofangtime_left);
			wofangtime_left = setInterval(function(){
				if(parseInt(wofang.style.left)<-10)
				{
					wofang.style.left=-20+'px';
					clearInterval(wofangtime_left);
					return;
				};
				wofang.style.left=parseInt(wofang.style.left)-wofangtime_speed+'px';
			},10);
			return;
		}
		if(e.keyCode==87)
		{
			clearInterval(wofangtime_top);
			wofangtime_top = setInterval(function(){
				//panduan_wofang_zj();
				if(parseInt(wofang.style.top)<-10)
				{
					wofang.style.top=-20+'px';
					clearInterval(wofangtime_top);
					return;
				}
				wofang.style.top=parseInt(wofang.style.top)-wofangtime_speed+'px';
			},10);
			return;
		}
		if(e.keyCode==68)
		{
			clearInterval(wofangtime_left);
			wofangtime_left = setInterval(function(){
				//panduan_wofang_zj();
				if(parseInt(wofang.style.left)>zongwidth-200+20)
				{
					wofang.style.left=zongwidth-200+10+'px';
					clearInterval(wofangtime_left);
					return;
				}
				wofang.style.left=parseInt(wofang.style.left)+wofangtime_speed+'px';
			},10);
			return;
		}
		if(e.keyCode==83)
		{
			clearInterval(wofangtime_top);
			wofangtime_top = setInterval(function(){
				//panduan_wofang_zj();
				if(parseInt(wofang.style.top)>zongheight-150+20)
				{
					wofang.style.top=zongheight-150+10+'px';
					clearInterval(wofangtime_top);
					return;
				}
				wofang.style.top=parseInt(wofang.style.top)+wofangtime_speed+'px';
			},10);
			return;
		}
		if(e.keyCode==13)
		{
			var fragment;
			var div_paodan;
			var img_paodan;
			var div_paodan2;
			var img_paodan2;
			clearInterval(wofangtime_paodan);
			wofangtime_paodan = setInterval(function(){

					fragment=document.createDocumentFragment();
					div_paodan = document.createElement("div");
					img_paodan = document.createElement("img");
					div_paodan.setAttribute("class","paodan");
					img_paodan.setAttribute("src","images/paodan.png");
					div_paodan.appendChild(img_paodan);
					fragment.appendChild(div_paodan);
					div_paodan.style.left=wofang.offsetLeft+40+'px';
					div_paodan.style.top=wofang.offsetTop-0+'px';

					div_paodan2 = document.createElement("div");
					img_paodan2 = document.createElement("img");
					div_paodan2.setAttribute("class","paodan");
					img_paodan2.setAttribute("src","images/paodan.png");
					div_paodan2.appendChild(img_paodan2);
					fragment.appendChild(div_paodan2);
					div_paodan2.style.left=wofang.offsetLeft+120+'px';
					div_paodan2.style.top=wofang.offsetTop-0+'px';

					Paodan(div_paodan2,30,"images/paodan_b.png");
					Paodan(div_paodan,30,"images/paodan_b.png");
					zd_quyu.appendChild(fragment);
			},200);

			fragment=document.createDocumentFragment();
			div_paodan = document.createElement("div");
			img_paodan = document.createElement("img");
			div_paodan.setAttribute("class","paodan");
			img_paodan.setAttribute("src","images/paodan.png");
			div_paodan.appendChild(img_paodan);
			fragment.appendChild(div_paodan);
			div_paodan.style.left=wofang.offsetLeft+40+'px';
			div_paodan.style.top=wofang.offsetTop-0+'px';

			div_paodan2 = document.createElement("div");
			img_paodan2 = document.createElement("img");
			div_paodan2.setAttribute("class","paodan");
			img_paodan2.setAttribute("src","images/paodan.png");
			div_paodan2.appendChild(img_paodan2);
			fragment.appendChild(div_paodan2);
			div_paodan2.style.left=wofang.offsetLeft+120+'px';
			div_paodan2.style.top=wofang.offsetTop-0+'px';

			zd_quyu.appendChild(fragment);
			Paodan(div_paodan2,30,"images/paodan_b.png");
			Paodan(div_paodan,30,"images/paodan_b.png");
			return;
		}
}
document.onkeyup=function(event)
{
	var e = event || window.event || arguments.callee.caller.arguments[0];
	//a65 s83 w87 d68
	if(wofang_ss==0){return false}
		if(e.keyCode==65)
		{
			clearInterval(wofangtime_left);
		}
		if(e.keyCode==87)
		{
			clearInterval(wofangtime_top);
		}
		if(e.keyCode==68)
		{
			clearInterval(wofangtime_left);
		}
		if(e.keyCode==83)
		{
			clearInterval(wofangtime_top);
		}
		if(e.keyCode==13)
		{
			clearInterval(wofangtime_paodan);
		}
};
document.onmousedown=function()
{
	
}

 
//判断敌机是否和我机碰撞
function panduan_wofang_zj()
{
	arr_diji_zong=diji_box.children;
	//线程
	
	for(var i=0;i<arr_diji_zong.length;i++)
	{
		if(impact(wofang,arr_diji_zong[i]))
		{
			var diji_img=arr_diji_zong[i].getElementsByTagName("img")[0];
			if(arr_diji_zong[i].className=="diji_2")
            {
				
	            baozhaxiaoguo_fn(3,arr_diji_zong[i].offsetLeft,arr_diji_zong[i].offsetTop);
    			diji_box.removeChild(arr_diji_zong[i]);
				wo_xue_div.style.width=wo_xue_div.offsetWidth-30+'px';
				if(wo_xue_div.offsetWidth<30)
				{
					wo_xue_div.style.width=0;
				}
				console.log(wo_xue_div.offsetWidth)
				if(wo_xue_div.offsetWidth<=0)
    			{
    				gameover();
    				return;
    			}
    			if(wo_xue_div.offsetWidth<=50)
    			{
    				wo_xue_div.style.backgroundColor="red";
    				return;
    			}
    			if(wo_xue_div.offsetWidth<=100)
    			{
    				wo_xue_div.style.backgroundColor="yellow";
    				return;
    			}
    			else
    			{
    				wo_xue_div.style.backgroundColor="green";
    				return;
    			}
			}
			else if(arr_diji_zong[i].className=="diji_1")
			{
				//diji_img.src="images/diji_2_s.png";
	            baozhaxiaoguo_fn(2,arr_diji_zong[i].offsetLeft,arr_diji_zong[i].offsetTop);
				diji_box.removeChild(arr_diji_zong[i]);
    			wo_xue_div.style.width=wo_xue_div.offsetWidth-20+'px';
				if(wo_xue_div.offsetWidth<20)
				{
					wo_xue_div.style.width=0;
				}
    			if(wo_xue_div.offsetWidth<=0)
    			{
    				gameover();
    				return;
    			}
    			if(wo_xue_div.offsetWidth<=50)
    			{
    				wo_xue_div.style.backgroundColor="red";
    				return;
    			}
    			if(wo_xue_div.offsetWidth<=100)
    			{
    				wo_xue_div.style.backgroundColor="yellow";
    				return;
    			}
    			else
    			{
    				wo_xue_div.style.backgroundColor="green";
    				return;
    			}
			}
		}
	}
};
//游戏结束函数
function gameover()
{
	//线程
	setTimeout(function(){
		wofang_ss=0;
		clearInterval(dijizhizao_time);
		dijizhizao_time=null;
		zongfen.innerHTML = putong_diji*100+(teshu_diji*100);
		getObj(".zongjidefen").style.display="block";
	},0)
}


function getObj(n){//选择器
  var oBody=document.getElementsByTagName("body")[0];
 if(n.indexOf('#')!==-1){
	 //针对id
  n=n.replace(/[#]/ig,"")
  return document.getElementById(n);
  
 }else if(n.indexOf('.')!==-1){
	 //针对class
  n=n.replace(/[.]/ig,"")
  var aN = oBody.getElementsByTagName("*");
  var aResult=[];
  for(var i=0;i<aN.length;i++){
   if(aN[i].className==n)
   {
	   aResult.push(aN[i]);
	   }//if
   }
   if(aResult.length==1){
	  return  aResult[0];
	  }else{
		  return  aResult;
		  }
   
 }else{
	//针对标签
   var aN = oBody.getElementsByTagName(n)
   if(aN.length==1){
	   return aN[0]
	   }else{
		   return aN;
		   }
 }//1级if


}//$();

二:飞机大战

《飞机大战》是一款飞行射击类型的策略单机手游,这款游戏最大的亮点就是没有复杂的操作流程,飞机会自动发射,玩家只要用鼠标控制飞机的方向就可以了

运行效果:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

HTML源码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>飞机大战</title>
    <meta http-equiv="content" content="text/html" charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/main.css"/>
</head>

<body>
<div id="contentdiv">
    <div id="startdiv">
        <button onclick="begin()">开始游戏</button>
    </div>
    <div id="maindiv">
        <div id="scorediv">
            <label>分数:</label>
            <label id="label">0</label>
        </div>
        <div id="suspenddiv">
            <button>继续</button><br/>
            <button>重新开始</button><br/>
            <button>回到主页</button>
        </div>
        <div id="enddiv">
            <p class="plantext">飞机大战分数</p>
            <p id="planscore">0</p>
            <div><button onclick="jixu()">继续</button></div>
        </div>
    </div>
</div>
<script type="text/javascript" src="js/main.js"></script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div style="text-align:center;font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>
CSS源码 - main.css
*{
    margin: 0;
    padding: 0;
}
#contentdiv{
    position: absolute;
    left: 500px;
}
#startdiv{
    width: 320px;
    height: 568px;
    background-image: url(../image/开始背景.png);
}
button{
    outline: none;
}
#startdiv button{
    position: absolute;
    top: 500px;
    left: 82px;
    width: 150px;
    height: 30px;
    border: 1px solid black;
    border-radius: 30px;
    background-color: #c4c9ca;
}
#maindiv{
    width: 320px;
    height: 568px;
    background-image:url(../image/background_1.png) ;
    display: none;
}
#maindiv img{
    position: absolute;
    z-index: 1;
}
#scorediv{
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    left: 10px;
    display: none;
}
#scorediv{
    font-size: 18px;
    font-weight: bold;
}
#suspenddiv{
    position: absolute;
    top: 210px;
    left: 82px;
    display: none;
    z-index: 2;
}
#suspenddiv button{
    width: 150px;
    height: 30px;
    margin-bottom: 20px;
    border: 1px solid black;
    border-radius: 30px;
    background-color: #c4c9ca;
}
#enddiv{
    position: absolute;
    top: 210px;
    left: 75px;
    border: 1px solid gray;
    border-radius: 5px;
    text-align: center;
    background-color:#d7ddde;
    display: none;
    z-index: 2;
}
.plantext{
    width: 160px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    font-weight: bold;
}
#planscore{
    width: 160px;
    height: 80px;
    line-height: 80px;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    font-size: 16px;
    font-weight: bold;
}
#enddiv div{
    width: 160px;
    height: 50px;
}
#enddiv div button{
    margin-top:10px ;
    width: 90px;
    height: 30px;
    border: 1px solid gray;
    border-radius: 30px;
}
JS代码:
    //获得主界面
var mainDiv=document.getElementById("maindiv");
    //获得开始界面
var startdiv=document.getElementById("startdiv");
    //获得游戏中分数显示界面
var scorediv=document.getElementById("scorediv");
    //获得分数界面
var scorelabel=document.getElementById("label");
    //获得暂停界面
var suspenddiv=document.getElementById("suspenddiv");
    //获得游戏结束界面
var enddiv=document.getElementById("enddiv");
    //获得游戏结束后分数统计界面
var planscore=document.getElementById("planscore");
    //初始化分数
var scores=0;

/*
 创建飞机类
 */
function plan(hp,X,Y,sizeX,sizeY,score,dietime,sudu,boomimage,imagesrc){
    this.planX=X;
    this.planY=Y;
    this.imagenode=null;
    this.planhp=hp;
    this.planscore=score;
    this.plansizeX=sizeX;
    this.plansizeY=sizeY;
    this.planboomimage=boomimage;
    this.planisdie=false;
    this.plandietimes=0;
    this.plandietime=dietime;
    this.plansudu=sudu;
//行为
/*
移动行为
     */
    this.planmove=function(){
        if(scores<=50000){
            this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+"px";
        }
        else if(scores>50000&&scores<=100000){
            this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+1+"px";
        }
        else if(scores>100000&&scores<=150000){
            this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+2+"px";
        }
        else if(scores>150000&&scores<=200000){
            this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+3+"px";
        }
        else if(scores>200000&&scores<=300000){
            this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+4+"px";
        }
        else{
            this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+5+"px";
        }
    }
    this.init=function(){
        this.imagenode=document.createElement("img");
        this.imagenode.style.left=this.planX+"px";
        this.imagenode.style.top=this.planY+"px";
        this.imagenode.src=imagesrc;
        mainDiv.appendChild(this.imagenode);
    }
    this.init();
}

/*
创建子弹类
 */
function bullet(X,Y,sizeX,sizeY,imagesrc){
    this.bulletX=X;
    this.bulletY=Y;
    this.bulletimage=null;
    this.bulletattach=1;
    this.bulletsizeX=sizeX;
    this.bulletsizeY=sizeY;
//行为
/*
 移动行为
 */
    this.bulletmove=function(){
        this.bulletimage.style.top=this.bulletimage.offsetTop-20+"px";
    }
    this.init=function(){
        this.bulletimage=document.createElement("img");
        this.bulletimage.style.left= this.bulletX+"px";
        this.bulletimage.style.top= this.bulletY+"px";
        this.bulletimage.src=imagesrc;
        mainDiv.appendChild(this.bulletimage);
    }
    this.init();
}

/*
 创建单行子弹类
 */
function oddbullet(X,Y){
    bullet.call(this,X,Y,6,14,"image/bullet1.png");
}

/*
创建敌机类
 */
function enemy(hp,a,b,sizeX,sizeY,score,dietime,sudu,boomimage,imagesrc){
    plan.call(this,hp,random(a,b),-100,sizeX,sizeY,score,dietime,sudu,boomimage,imagesrc);
}
//产生min到max之间的随机数
function random(min,max){
    return Math.floor(min+Math.random()*(max-min));
}

/*
创建本方飞机类
 */
function ourplan(X,Y){
    var imagesrc="image/我的飞机.gif";
    plan.call(this,1,X,Y,66,80,0,660,0,"image/本方飞机爆炸.gif",imagesrc);
    this.imagenode.setAttribute('id','ourplan');
}

/*
 创建本方飞机
 */
var selfplan=new ourplan(120,485);
//移动事件
var ourPlan=document.getElementById('ourplan');
var yidong=function(){
    var oevent=window.event||arguments[0];
    var chufa=oevent.srcElement||oevent.target;
    var selfplanX=oevent.clientX-500;
    var selfplanY=oevent.clientY;
    ourPlan.style.left=selfplanX-selfplan.plansizeX/2+"px";
    ourPlan.style.top=selfplanY-selfplan.plansizeY/2+"px";
//    document.getElementsByTagName('img')[0].style.left=selfplanX-selfplan.plansizeX/2+"px";
//    document.getElementsByTagName('img')[0]..style.top=selfplanY-selfplan.plansizeY/2+"px";
}
/*
暂停事件
 */
var number=0;
var zanting=function(){
    if(number==0){
        suspenddiv.style.display="block";
        if(document.removeEventListener){
            mainDiv.removeEventListener("mousemove",yidong,true);
            bodyobj.removeEventListener("mousemove",bianjie,true);
        }
        else if(document.detachEvent){
            mainDiv.detachEvent("onmousemove",yidong);
            bodyobj.detachEvent("onmousemove",bianjie);
        }
        clearInterval(set);
        number=1;
    }
    else{
        suspenddiv.style.display="none";
        if(document.addEventListener){
            mainDiv.addEventListener("mousemove",yidong,true);
            bodyobj.addEventListener("mousemove",bianjie,true);
        }
        else if(document.attachEvent){
            mainDiv.attachEvent("onmousemove",yidong);
            bodyobj.attachEvent("onmousemove",bianjie);
        }
        set=setInterval(start,20);
        number=0;
    }
}
//判断本方飞机是否移出边界,如果移出边界,则取消mousemove事件,反之加上mousemove事件
var bianjie=function(){
    var oevent=window.event||arguments[0];
    var bodyobjX=oevent.clientX;
    var bodyobjY=oevent.clientY;
    if(bodyobjX<505||bodyobjX>815||bodyobjY<0||bodyobjY>568){
        if(document.removeEventListener){
            mainDiv.removeEventListener("mousemove",yidong,true);
        }
        else if(document.detachEvent){
            mainDiv.detachEvent("onmousemove",yidong);
        }
    }
    else{
        if(document.addEventListener){
            mainDiv.addEventListener("mousemove",yidong,true);
        }
        else if(document.attachEvent){
            mainDiv.attachEvent("nomousemove",yidong);
        }
    }
}

var bodyobj=document.getElementsByTagName("body")[0];
if(document.addEventListener){
    //为本方飞机添加移动和暂停
    mainDiv.addEventListener("mousemove",yidong,true);
    //为本方飞机添加暂停事件
    selfplan.imagenode.addEventListener("click",zanting,true);
    //为body添加判断本方飞机移出边界事件
    bodyobj.addEventListener("mousemove",bianjie,true);
    //为暂停界面的继续按钮添加暂停事件
    suspenddiv.getElementsByTagName("button")[0].addEventListener("click",zanting,true);
//    suspenddiv.getElementsByTagName("button")[1].addEventListener("click",chongxinkaishi,true);
    //为暂停界面的返回主页按钮添加事件
    suspenddiv.getElementsByTagName("button")[2].addEventListener("click",jixu,true);
}
else if(document.attachEvent){
    //为本方飞机添加移动
    mainDiv.attachEvent("onmousemove",yidong);
    //为本方飞机添加暂停事件
    selfplan.imagenode.attachEvent("onclick",zanting);
    //为body添加判断本方飞机移出边界事件
    bodyobj.attachEvent("onmousemove",bianjie);
    //为暂停界面的继续按钮添加暂停事件
    suspenddiv.getElementsByTagName("button")[0].attachEvent("onclick",zanting);
//    suspenddiv.getElementsByTagName("button")[1].attachEvent("click",chongxinkaishi,true);
    //为暂停界面的返回主页按钮添加事件
    suspenddiv.getElementsByTagName("button")[2].attachEvent("click",jixu,true);
}
//初始化隐藏本方飞机
selfplan.imagenode.style.display="none";

/*
敌机对象数组
 */
var enemys=[];

/*
子弹对象数组
 */
var bullets=[];
var mark=0;
var mark1=0;
var backgroundPositionY=0;
/*
开始函数
 */
function start(){
    mainDiv.style.backgroundPositionY=backgroundPositionY+"px";
    backgroundPositionY+=0.5;
    if(backgroundPositionY==568){
        backgroundPositionY=0;
    }
    mark++;
    /*
    创建敌方飞机
     */

    if(mark==20){
        mark1++;
        //中飞机
        if(mark1%5==0){
            enemys.push(new enemy(6,25,274,46,60,5000,360,random(1,3),"image/中飞机爆炸.gif","image/enemy3_fly_1.png"));
        }
        //大飞机
        if(mark1==20){
            enemys.push(new enemy(12,57,210,110,164,30000,540,1,"image/大飞机爆炸.gif","image/enemy2_fly_1.png"));
            mark1=0;
        }
        //小飞机
        else{
            enemys.push(new enemy(1,19,286,34,24,1000,360,random(1,4),"image/小飞机爆炸.gif","image/enemy1_fly_1.png"));
        }
        mark=0;
    }

/*
移动敌方飞机
 */
    var enemyslen=enemys.length;
    for(var i=0;i<enemyslen;i++){
        if(enemys[i].planisdie!=true){
            enemys[i].planmove();
        }
/*
 如果敌机超出边界,删除敌机
 */
        if(enemys[i].imagenode.offsetTop>568){
            mainDiv.removeChild(enemys[i].imagenode);
            enemys.splice(i,1);
            enemyslen--;
        }
        //当敌机死亡标记为true时,经过一段时间后清除敌机
        if(enemys[i].planisdie==true){
            enemys[i].plandietimes+=20;
            if(enemys[i].plandietimes==enemys[i].plandietime){
                mainDiv.removeChild(enemys[i].imagenode);
                enemys.splice(i,1);
                enemyslen--;
            }
        }
    }

/*
创建子弹
*/
    if(mark%5==0){
            bullets.push(new oddbullet(parseInt(selfplan.imagenode.style.left)+31,parseInt(selfplan.imagenode.style.top)-10));
    }

/*
移动子弹
*/
    var bulletslen=bullets.length;
    for(var i=0;i<bulletslen;i++){
        bullets[i].bulletmove();
/*
如果子弹超出边界,删除子弹
*/
        if(bullets[i].bulletimage.offsetTop<0){
            mainDiv.removeChild(bullets[i].bulletimage);
            bullets.splice(i,1);
            bulletslen--;
        }
    }

/*
碰撞判断
*/
    for(var k=0;k<bulletslen;k++){
        for(var j=0;j<enemyslen;j++){
            //判断碰撞本方飞机
            if(enemys[j].planisdie==false){
                if(enemys[j].imagenode.offsetLeft+enemys[j].plansizeX>=selfplan.imagenode.offsetLeft&&enemys[j].imagenode.offsetLeft<=selfplan.imagenode.offsetLeft+selfplan.plansizeX){
                  if(enemys[j].imagenode.offsetTop+enemys[j].plansizeY>=selfplan.imagenode.offsetTop+40&&enemys[j].imagenode.offsetTop<=selfplan.imagenode.offsetTop-20+selfplan.plansizeY){
                      //碰撞本方飞机,游戏结束,统计分数
                      selfplan.imagenode.src="image/本方飞机爆炸.gif";
                      enddiv.style.display="block";
                      planscore.innerHTML=scores;
                      if(document.removeEventListener){
                          mainDiv.removeEventListener("mousemove",yidong,true);
                          bodyobj.removeEventListener("mousemove",bianjie,true);
                      }
                      else if(document.detachEvent){
                          mainDiv.detachEvent("onmousemove",yidong);
                          bodyobj.removeEventListener("mousemove",bianjie,true);
                      }
                      clearInterval(set);
                  }
                }
                //判断子弹与敌机碰撞
                if((bullets[k].bulletimage.offsetLeft+bullets[k].bulletsizeX>enemys[j].imagenode.offsetLeft)&&(bullets[k].bulletimage.offsetLeft<enemys[j].imagenode.offsetLeft+enemys[j].plansizeX)){
                    if(bullets[k].bulletimage.offsetTop<=enemys[j].imagenode.offsetTop+enemys[j].plansizeY&&bullets[k].bulletimage.offsetTop+bullets[k].bulletsizeY>=enemys[j].imagenode.offsetTop){
                        //敌机血量减子弹攻击力
                        enemys[j].planhp=enemys[j].planhp-bullets[k].bulletattach;
                        //敌机血量为0,敌机图片换为爆炸图片,死亡标记为true,计分
                        if(enemys[j].planhp==0){
                            scores=scores+enemys[j].planscore;
                            scorelabel.innerHTML=scores;
                            enemys[j].imagenode.src=enemys[j].planboomimage;
                            enemys[j].planisdie=true;
                        }
                        //删除子弹
                        mainDiv.removeChild(bullets[k].bulletimage);
                            bullets.splice(k,1);
                            bulletslen--;
                            break;
                    }
                }
            }
        }
    }
}
/*
开始游戏按钮点击事件
 */
var set;
function begin(){

    startdiv.style.display="none";
    mainDiv.style.display="block";
    selfplan.imagenode.style.display="block";
    scorediv.style.display="block";
    /*
     调用开始函数
     */
    set=setInterval(start,20);
}
//游戏结束后点击继续按钮事件
function jixu(){
    location.reload(true);
}

注意: 由于文章字数限制,本篇文章只展示了飞机大战的源码及雷霆战机的部分代码,本项目的完整源码及素材关注我获取

文章来源:https://blog.csdn.net/qiao_yue/article/details/135117580
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。