Web front-end game project-Thunder Fighter & Aircraft War Game [with source code]

1: Thunder fighter

"Thunder Fighter" is an air combat game. The user can use the keys W; The longer the game lasts, the more rewards will be given. However, as time goes by, the difficulty of the game will increase and the chance of survival of the aircraft will become smaller. Therefore, it will test the user’s control ability more. It is a small game that is both physically and mentally healthy.SAD

running result:
Insert image description here
Insert image description here
Insert image description here

HTMLSource code:
<!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>
JSdocument:
(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


}//$();

2: Airplane war

"Plane War" is a flight shooting type strategy stand-alone mobile game. The biggest highlight of this game is that there is no complicated operation process. The plane will launch automatically. Players only need to use the mouse to control the direction of the plane.

running result:
Insert image description here
Insert image description here
Insert image description here

HTMLSource code:
<!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>
CSSSource code- 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;
}
JSCode:
    //获得主界面
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);
}

Note: Due to the word limit of the article, this article only shows the source code of Aircraft War and part of the code of Thunder Fighter. Follow me to get the complete source code and materials of this project.

Guess you like

Origin blog.csdn.net/qiao_yue/article/details/135117580