main.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808
  1. //获得主界面
  2. var mainDiv=document.getElementById("maindiv");
  3. //获得开始界面
  4. var startdiv=document.getElementById("startdiv");
  5. //获得游戏中分数显示界面
  6. var scorediv=document.getElementById("scorediv");
  7. //获得分数界面
  8. var scorelabel=document.getElementById("label");
  9. //获得暂停界面
  10. var suspenddiv=document.getElementById("suspenddiv");
  11. //获得游戏结束界面
  12. var enddiv=document.getElementById("enddiv");
  13. //获得游戏结束后分数统计界面
  14. var planscore=document.getElementById("planscore");
  15. //初始化分数
  16. var scores=0;
  17. /*
  18. 创建飞机类
  19. */
  20. function plan(hp,X,Y,sizeX,sizeY,score,dietime,sudu,boomimage,imagesrc){
  21. this.planX=X;
  22. this.planY=Y;
  23. this.imagenode=null;
  24. this.planhp=hp;
  25. this.planscore=score;
  26. this.plansizeX=sizeX;
  27. this.plansizeY=sizeY;
  28. this.planboomimage=boomimage;
  29. this.planisdie=false;
  30. this.plandietimes=0;
  31. this.plandietime=dietime;
  32. this.plansudu=sudu;
  33. //行为
  34. /*
  35. 移动行为
  36. */
  37. this.planmove=function(){
  38. if(scores<=50000){
  39. this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+"px";
  40. }
  41. else if(scores>50000&&scores<=100000){
  42. this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+1+"px";
  43. }
  44. else if(scores>100000&&scores<=150000){
  45. this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+2+"px";
  46. }
  47. else if(scores>150000&&scores<=200000){
  48. this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+3+"px";
  49. }
  50. else if(scores>200000&&scores<=300000){
  51. this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+4+"px";
  52. }
  53. else{
  54. this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+5+"px";
  55. }
  56. }
  57. this.init=function(){
  58. this.imagenode=document.createElement("img");
  59. this.imagenode.style.left=this.planX+"px";
  60. this.imagenode.style.top=this.planY+"px";
  61. this.imagenode.src=imagesrc;
  62. mainDiv.appendChild(this.imagenode);
  63. }
  64. this.init();
  65. }
  66. /*
  67. 创建子弹类
  68. */
  69. function bullet(X,Y,sizeX,sizeY,imagesrc){
  70. this.bulletX=X;
  71. this.bulletY=Y;
  72. this.bulletimage=null;
  73. this.bulletattach=1;
  74. this.bulletsizeX=sizeX;
  75. this.bulletsizeY=sizeY;
  76. //行为
  77. /*
  78. 移动行为
  79. */
  80. this.bulletmove=function(){
  81. this.bulletimage.style.top=this.bulletimage.offsetTop-20+"px";
  82. }
  83. this.init=function(){
  84. this.bulletimage=document.createElement("img");
  85. this.bulletimage.style.left= this.bulletX+"px";
  86. this.bulletimage.style.top= this.bulletY+"px";
  87. this.bulletimage.src=imagesrc;
  88. mainDiv.appendChild(this.bulletimage);
  89. }
  90. this.init();
  91. }
  92. /*
  93. 创建单行子弹类
  94. */
  95. function oddbullet(X,Y){
  96. bullet.call(this,X,Y,6,14,"./image/bullet1.png");
  97. }
  98. /*
  99. 创建敌机类
  100. */
  101. function enemy(hp,a,b,sizeX,sizeY,score,dietime,sudu,boomimage,imagesrc){
  102. plan.call(this,hp,random(a,b),-100,sizeX,sizeY,score,dietime,sudu,boomimage,imagesrc);
  103. }
  104. //产生min到max之间的随机数
  105. function random(min,max){
  106. return Math.floor(min+Math.random()*(max-min));
  107. }
  108. /*
  109. 创建本方飞机类
  110. */
  111. function ourplan(X,Y){
  112. var imagesrc="./image/my_plane.png";
  113. plan.call(this,1,X,Y,80,67,0,660,0,"./image/plane_boom.gif",imagesrc);
  114. this.imagenode.setAttribute('id','ourplan');
  115. }
  116. /*
  117. 创建本方飞机
  118. */
  119. var selfplan=new ourplan(120,385);
  120. //移动事件
  121. var ourPlan=document.getElementById('ourplan');
  122. var yidong=function(){
  123. var oevent=window.event||arguments[0];
  124. oevent.preventDefault();
  125. var chufa=oevent.srcElement||oevent.target;
  126. var touch = event.targetTouches[0];
  127. var selfplanX=touch.clientX - 60;
  128. var selfplanY=touch.clientY - 60;
  129. ourPlan.style.left=selfplanX+"px";
  130. ourPlan.style.top=selfplanY+"px";
  131. //document.getElementsByTagName('img')[0].style.left=selfplanX-selfplan.plansizeX/2+"px";
  132. //document.getElementsByTagName('img')[0]..style.top=selfplanY-selfplan.plansizeY/2+"px";
  133. }
  134. /*
  135. 暂停事件
  136. */
  137. var number=0;
  138. var zanting=function(){
  139. if(number==0){
  140. suspenddiv.style.display="block";
  141. if(document.removeEventListener){
  142. mainDiv.removeEventListener("touchmove",yidong,true);
  143. bodyobj.removeEventListener("touchmove",bianjie,true);
  144. }
  145. else if(document.detachEvent){
  146. mainDiv.detachEvent("touchmove",yidong);
  147. bodyobj.detachEvent("touchmove",bianjie);
  148. }
  149. clearInterval(set);
  150. number=1;
  151. }
  152. else{
  153. suspenddiv.style.display="none";
  154. if(document.addEventListener){
  155. mainDiv.addEventListener("touchmove",yidong,true);
  156. bodyobj.addEventListener("touchmove",bianjie,true);
  157. }
  158. else if(document.attachEvent){
  159. mainDiv.attachEvent("touchmove",yidong);
  160. bodyobj.attachEvent("touchmove",bianjie);
  161. }
  162. set=setInterval(start,20);
  163. number=0;
  164. }
  165. }
  166. //判断本方飞机是否移出边界,如果移出边界,则取消touchmove事件,反之加上touchmove事件
  167. var bianjie=function(){
  168. /*var oevent=window.event||arguments[0];
  169. var bodyobjX=oevent.clientX;
  170. var bodyobjY=oevent.clientY;
  171. if(bodyobjX<505||bodyobjX>815||bodyobjY<0||bodyobjY>568){
  172. if(document.removeEventListener){
  173. mainDiv.removeEventListener("touchmove",yidong,true);
  174. }
  175. else if(document.detachEvent){
  176. mainDiv.detachEvent("touchmove",yidong);
  177. }
  178. }
  179. else{
  180. if(document.addEventListener){
  181. mainDiv.addEventListener("touchmove",yidong,true);
  182. }
  183. else if(document.attachEvent){
  184. mainDiv.attachEvent("touchmove",yidong);
  185. }
  186. }*/
  187. }
  188. //暂停界面重新开始事件
  189. //function chongxinkaishi(){
  190. // location.reload(true);
  191. // startdiv.style.display="none";
  192. // maindiv.style.display="block";
  193. //}
  194. var bodyobj=document.getElementsByTagName("body")[0];
  195. if(document.addEventListener){
  196. //为本方飞机添加移动和暂停
  197. mainDiv.addEventListener("touchmove",yidong,true);
  198. //为本方飞机添加暂停事件
  199. selfplan.imagenode.addEventListener("click",zanting,true);
  200. //为body添加判断本方飞机移出边界事件
  201. bodyobj.addEventListener("touchmove",bianjie,true);
  202. //为暂停界面的继续按钮添加暂停事件
  203. suspenddiv.getElementsByTagName("button")[0].addEventListener("click",zanting,true);
  204. // suspenddiv.getElementsByTagName("button")[1].addEventListener("click",chongxinkaishi,true);
  205. //为暂停界面的返回主页按钮添加事件
  206. suspenddiv.getElementsByTagName("button")[1].addEventListener("click",jixu,true);
  207. }
  208. else if(document.attachEvent){
  209. //为本方飞机添加移动
  210. mainDiv.attachEvent("touchmove",yidong);
  211. //为本方飞机添加暂停事件
  212. selfplan.imagenode.attachEvent("onclick",zanting);
  213. //为body添加判断本方飞机移出边界事件
  214. bodyobj.attachEvent("touchmove",bianjie);
  215. //为暂停界面的继续按钮添加暂停事件
  216. suspenddiv.getElementsByTagName("button")[0].attachEvent("onclick",zanting);
  217. // suspenddiv.getElementsByTagName("button")[1].attachEvent("click",chongxinkaishi,true);
  218. //为暂停界面的返回主页按钮添加事件
  219. suspenddiv.getElementsByTagName("button")[2].attachEvent("click",jixu,true);
  220. }
  221. //初始化隐藏本方飞机
  222. selfplan.imagenode.style.display="none";
  223. /*
  224. 敌机对象数组
  225. */
  226. var enemys=[];
  227. /*
  228. 子弹对象数组
  229. */
  230. var bullets=[];
  231. var mark=0;
  232. var mark1=0;
  233. var backgroundPositionY=0;
  234. /*
  235. 开始函数
  236. */
  237. function start(){
  238. mainDiv.style.backgroundPositionY=backgroundPositionY+"px";
  239. backgroundPositionY+=0.5;
  240. if(backgroundPositionY==568){
  241. backgroundPositionY=0;
  242. }
  243. mark++;
  244. /*
  245. 创建敌方飞机
  246. */
  247. if(mark==20){
  248. mark1++;
  249. //中飞机
  250. if(mark1%5==0){
  251. enemys.push(new enemy(6,25,274,75,49,5000,360,random(1,3),"./image/md_boom.gif","./image/enemy3_fly_1.png"));
  252. }
  253. //大飞机
  254. if(mark1==20){
  255. enemys.push(new enemy(12,57,210,110,163,30000,540,1,"./image/big_boom.gif","./image/enemy2_fly_1.png"));
  256. mark1=0;
  257. }
  258. //小飞机
  259. else{
  260. enemys.push(new enemy(1,19,286,38,24,1000,360,random(1,4),"./image/small_boom.gif","./image/enemy1_fly_1.png"));
  261. }
  262. mark=0;
  263. }
  264. /*
  265. 移动敌方飞机
  266. */
  267. var enemyslen=enemys.length;
  268. for(var i=0;i<enemyslen;i++){
  269. if(enemys[i].planisdie!=true){
  270. enemys[i].planmove();
  271. }
  272. /*
  273. 如果敌机超出边界,删除敌机
  274. */
  275. if(enemys[i].imagenode.offsetTop>568){
  276. mainDiv.removeChild(enemys[i].imagenode);
  277. enemys.splice(i,1);
  278. enemyslen--;
  279. }
  280. //当敌机死亡标记为true时,经过一段时间后清除敌机
  281. if(enemys[i].planisdie==true){
  282. enemys[i].plandietimes+=20;
  283. if(enemys[i].plandietimes==enemys[i].plandietime){
  284. mainDiv.removeChild(enemys[i].imagenode);
  285. enemys.splice(i,1);
  286. enemyslen--;
  287. }
  288. }
  289. }
  290. /*
  291. 创建子弹
  292. */
  293. if(mark%5==0){
  294. bullets.push(new oddbullet(parseInt(selfplan.imagenode.style.left)+33,parseInt(selfplan.imagenode.style.top)-10));
  295. }
  296. /*
  297. 移动子弹
  298. */
  299. var bulletslen=bullets.length;
  300. for(var i=0;i<bulletslen;i++){
  301. bullets[i].bulletmove();
  302. /*
  303. 如果子弹超出边界,删除子弹
  304. */
  305. if(bullets[i].bulletimage.offsetTop<0){
  306. mainDiv.removeChild(bullets[i].bulletimage);
  307. bullets.splice(i,1);
  308. bulletslen--;
  309. }
  310. }
  311. /*
  312. 碰撞判断
  313. */
  314. for(var k=0;k<bulletslen;k++){
  315. for(var j=0;j<enemyslen;j++){
  316. //判断碰撞本方飞机
  317. if(enemys[j].planisdie==false){
  318. if(enemys[j].imagenode.offsetLeft+enemys[j].plansizeX>=selfplan.imagenode.offsetLeft&&enemys[j].imagenode.offsetLeft<=selfplan.imagenode.offsetLeft+selfplan.plansizeX){
  319. if(enemys[j].imagenode.offsetTop+enemys[j].plansizeY>=selfplan.imagenode.offsetTop+40&&enemys[j].imagenode.offsetTop<=selfplan.imagenode.offsetTop-20+selfplan.plansizeY){
  320. //碰撞本方飞机,游戏结束,统计分数
  321. var audio = document.getElementById('bg_music');
  322. audio.pause();
  323. selfplan.imagenode.src="./image/plane_boom.gif";
  324. enddiv.style.display="inline-block";
  325. planscore.innerHTML=scores;
  326. if(scores > 100000) {
  327. $(".dh_btn").show();
  328. };
  329. if(document.removeEventListener){
  330. mainDiv.removeEventListener("touchmove",yidong,true);
  331. bodyobj.removeEventListener("touchmove",bianjie,true);
  332. }
  333. else if(document.detachEvent){
  334. mainDiv.detachEvent("touchmove",yidong);
  335. bodyobj.removeEventListener("touchmove",bianjie,true);
  336. };
  337. clearInterval(set);
  338. }
  339. }
  340. //判断子弹与敌机碰撞
  341. if((bullets[k].bulletimage.offsetLeft+bullets[k].bulletsizeX>enemys[j].imagenode.offsetLeft)&&(bullets[k].bulletimage.offsetLeft<enemys[j].imagenode.offsetLeft+enemys[j].plansizeX)){
  342. if(bullets[k].bulletimage.offsetTop<=enemys[j].imagenode.offsetTop+enemys[j].plansizeY&&bullets[k].bulletimage.offsetTop+bullets[k].bulletsizeY>=enemys[j].imagenode.offsetTop){
  343. //敌机血量减子弹攻击力
  344. enemys[j].planhp=enemys[j].planhp-bullets[k].bulletattach;
  345. //敌机血量为0,敌机图片换为爆炸图片,死亡标记为true,计分
  346. if(enemys[j].planhp==0){
  347. scores=scores+enemys[j].planscore;
  348. scorelabel.innerHTML=scores;
  349. enemys[j].imagenode.src=enemys[j].planboomimage;
  350. enemys[j].planisdie=true;
  351. }
  352. //删除子弹
  353. mainDiv.removeChild(bullets[k].bulletimage);
  354. bullets.splice(k,1);
  355. bulletslen--;
  356. break;
  357. }
  358. }
  359. }
  360. }
  361. }
  362. }
  363. /*
  364. 开始游戏按钮点击事件
  365. */
  366. var set;
  367. function begin(){
  368. startdiv.style.display="none";
  369. mainDiv.style.display="block";
  370. selfplan.imagenode.style.display="block";
  371. scorediv.style.display="block";
  372. /*
  373. 调用开始函数
  374. */
  375. set=setInterval(start,20);
  376. }
  377. //游戏结束后点击继续按钮事件
  378. function jixu(){
  379. location.reload(true);
  380. }
  381. /*
  382. 完成界面的初始化
  383. 敌方小飞机一个
  384. 我方飞机一个
  385. */
  386. $(function(){
  387. $("#startdiv, #maindiv, .mask, .mooncake_wp").width($(window).width()).height($(window).height());
  388. });