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

文章目录

    • 一:雷霆战机
          • `HTML`源码:
          • `JS`文件:
            • (1)`function.js`
            • (2)`impact.js`
            • (3)`move.1.1.js`
            • (4)`script.js`
    • 二:飞机大战
          • `HTML`源码:
          • `CSS`源码 - `main.css`:
          • `JS`代码:

一:雷霆战机

《雷霆战机》是一款空战游戏,用户可以用按键 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){//针对idn=n.replace(/[#]/ig,"")return document.getElementById(n);}else if(n.indexOf('.')!==-1){//针对classn=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];//保护源码的措施//F12if(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 d68if(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 d68if(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){//针对idn=n.replace(/[#]/ig,"")return document.getElementById(n);}else if(n.indexOf('.')!==-1){//针对classn=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);
}

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/235552.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

性能压力测试--确保企业数字化业务稳健运行

随着企业的数字化转型和依赖云计算的普及&#xff0c;软件系统的性能已经成为企业成功运营的关键因素之一。性能压力测试作为确保系统在各种条件下都能高效运行的关键步骤&#xff0c;对企业的重要性不可忽视。以下是性能压力测试对企业的几个重要方面的影响和作用&#xff1a;…

最新AI创作系统ChatGPT系统源码+DALL-E3文生图+AI绘画+GPT语音对话功能

一、前言 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作Ch…

ubuntu 20.04安装一系列软件

1&#xff09;安装下载的包的指令&#xff1a; sudo dpkg -i xxx.deb 2&#xff09;通用指令&#xff1a; sudo apt-get install xxxx 3&#xff09;更新和升级软件包&#xff08;遇到问题先尝试这个指令&#xff09;&#xff1a; sudo apt-get update sudo apt-get install…

Java_集合进阶(Collection和List系列)

一、集合概述和分类 1.1 集合的分类 已经学习过了ArrayList集合&#xff0c;但是除了ArrayList集合&#xff0c;Java还提供了很多种其他的集合&#xff0c;如下图所示&#xff1a; 我想你的第一感觉是这些集合好多呀&#xff01;但是&#xff0c;我们学习时会对这些集合进行…

基于alibaba druid的血缘解析工具

基于alibaba druid的血缘解析 1、前言 仅仅对mysql数据库的select查询语句进行了血缘解析&#xff0c;该血缘解析包含了原始表字段、临时表字段和目标表字段的关联关系。 2、涉及到技术 主要使用了druid的如下接口对语法树进行解析&#xff1a; &#xff08;1&#xff09;…

JavaWeb笔记之前端开发CSS

一 、引言 1.1 CSS概念 层叠样式表(英文全称&#xff1a;Cascading Style Sheets)是一种用来表现HTML&#xff08;标准通用标记语言的一个应用&#xff09;或XML&#xff08;标准通用标记语言的一个子集&#xff09;等文件样式的计算机语言。CSS不仅可以静态地修饰网页&…

美颜技术详解:深入了解视频美颜SDK的工作机制

本文将深入探讨视频美颜SDK的工作机制&#xff0c;揭示其背后的科技奥秘和算法原理。 1.引言 视频美颜SDK作为一种集成到应用程序中的技术工具&#xff0c;通过先进的算法和图像处理技术&#xff0c;为用户提供令人印象深刻的实时美颜效果。 2.视频美颜SDK的基本工作原理 首…

SVN小白常见操作流程

SVN小白常见操作流程 一、什么是Subversion&#xff1f;二、TortoiseSVN客户端安装教程三、SVN 操作3.1 SVN Ckeckout(检出)3.2 Add(新增文件)3.3 SVN Commit(提交)3.4 SVN Update(更新操作)3.5SVN Delete(删除操作)3.6 SVN Revert to a revision(版本回溯)3.7 不同版本内容之间…

Jenkins 执行远程脚本的插件—SSH2 Easy

SSH2 Easy 是什么&#xff1f; SSH2 Easy 是一个 Jenkins 插件&#xff0c;它用于在 Jenkins 构建过程中通过 SSH2 协议与远程服务器进行交互。通过该插件&#xff0c;用户可以在 Jenkins 的构建过程中执行远程命令、上传或下载文件、管理远程服务器等操作。 以下是 SSH2 Eas…

vue3使用mock模拟后端接口

安装mock axios yarn add mock yarn add axios 新建在src/mockdata/automenu.js 模拟后端的json数据格式 import Mock from mockjs Mock.mock(/menu,get,{status: 200,menuList: [{id : 1,iconCls: "fa fa-window",name: 系统管理,url: /},{id: 2,icon: icon-j…

YOLOv8改进 | 主干篇 | 利用MobileNetV1替换Backbone(轻量化网络结构)

一、本文介绍 本文给大家带来的改进机制是MobileNetV1&#xff0c;其是专为移动和嵌入式视觉应用设计的轻量化网络结构。这些模型基于简化的架构&#xff0c;并利用深度可分离卷积构建轻量级深度神经网络&#xff0c;其引入了两个简单的全局超参数&#xff0c;用于在延迟和准确…

【C语言】指针详解(一)

目录 1.内存和地址 1.1内存 1.2如何理解编址 2.指针变量和地址 2.1取地址操作符&#xff08;&&#xff09; 2.2指针变量和解引用操作符&#xff08;*&#xff09; 2.2.1指针变量 2.2.2拆解指针类型 2.2.3解引用操作符 2.3指针变量大小 1.内存和地址 1.1内存 在讲内…

《数据分析-JiMuReport》积木报表详细入门教程

积木报表详细入门教程 一、JimuReport部署入门介绍 积木报表可以通过源码部署、SpringBoot集成、Docker部署以及各种成熟框架部署&#xff0c;具体可查看积木官方文档 当前采用源码部署&#xff0c;首先下载Jimureport-example-1.5.6 1 jimureport-example目录查看 使用ID…

自动气象监测站助力生活生产

随着科技的发展&#xff0c;我们的生活和生产方式正在发生着日新月异的变化。其中&#xff0c;WX-CQ12 自动气象监测站作为一项气象监测设备&#xff0c;正在发挥着越来越重要的作用。它不仅为我们提供了更加准确、实时的天气信息&#xff0c;还为农业、交通、旅游等领域提供了…

python flask+vue实现前后端图片上传

python flaskvue实现前后端图片上传 vue代码如下&#xff1a; <template><div><input type"file" change"handleFileChange"/><button click"uploadFile">上传</button><br><img :src"imageUrl&…

uniapp如何原生app-云打包

首先第一步&#xff0c;需要大家在HBuilder X中找到一个项目&#xff0c;然后呢在找到上面的发行选项 发行->原生App-云打包 选择完该选中的直接大包就ok。 大包完毕后呢&#xff0c;会出现一个apk包&#xff0c;这是后将这个包拖动发给随便一个人就行了。 然后接收到的那…

2-高可用-负载均衡、反向代理

负载均衡、反向代理 upstream server即上游服务器&#xff0c;指Nginx负载均衡到的处理业务的服务器&#xff0c;也可以称之为real server,即真实处理业务的服务器。 对于负载均衡我们要关心的几个方面如下&#xff1a; 上游服务器配置&#xff1a;使用upstream server配置上…

摄像头画面作为电脑桌面背景

1. 创建文件main.pyw&#xff0c;文件内容 import base64 import io import os import threading import tkinter as tkimport cv2 import pystray import win32api import win32con import win32gui from PIL import Image, ImageTk from pystray import MenuItem, Menuclass…

Linux之yum管理器

目录 yum管理器 yum相关指令 yum list yum list | grep yum install yum remove 拓展 1.yum install -y man-pages 2.切换yum源 3.yum install -y epel-release 4. yum install -y lrzsz rz指令 sz指令 在window系统上&#xff0c;我们会在电脑自带的应用商…

mac电脑安装虚拟机教程

1、准备一台虚拟机&#xff0c;安装CentOS7 常用的虚拟化软件有两种&#xff1a; VirtualBoxVMware 这里我们使用VirtualBox来安装虚拟机&#xff0c;下载地址&#xff1a;Downloads – Oracle VM VirtualBox 001 点击安装 002 报错&#xff1a;he installer has detected an…