JavaScript制作简易的微信打飞机

这篇文章主要介绍了JavaScript制作简易的微信打飞机，只有简单的功能，大神们可以自由扩展哈。有需要的小伙伴可以参考下。

简单的用JavaScript模拟微信打飞机，部分功能还不完善，刚开始写，还有很多不足，还望大家多多指出。

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
2. <html> 
3. <head> 
4. <title></title> 
5. <meta http-equiv="content" content="text/html" charset="utf-8"/> 
6. <style type="text/css"> 
7. *{ 
8. margin: 0; 
9. padding: 0; 
10. } 
11. #contentdiv{ 
12. position: absolute; 
13. left: 500px; 
14. } 
15. #startdiv{ 
16. width: 320px; 
17. height: 568px; 
18. background-image: url(../image/开始背景.png); 
19. } 
20. button{ 
21. outline: none; 
22. } 
23. #startdiv button{ 
24. position: absolute; 
25. top: 500px; 
26. left: 82px; 
27. width: 150px; 
28. height: 30px; 
29. border: 1px solid black; 
30. border-radius: 30px; 
31. background-color: #c4c9ca; 
32. } 
33. #maindiv{ 
34. width: 320px; 
35. height: 568px; 
36. background-image:url(../image/background_1.png) ; 
37. display: none; 
38. } 
39. #maindiv img{ 
40. position: absolute; 
41. z-index: 1; 
42. } 
43. #scorediv{ 
44. font-size: 16px; 
45. font-weight: bold; 
46. position: absolute; 
47. top: 10px; 
48. left: 10px; 
49. display: none; 
50. } 
51. #scorediv{ 
52. font-size: 18px; 
53. font-weight: bold; 
54. } 
55. #suspenddiv{ 
56. position: absolute; 
57. top: 210px; 
58. left: 82px; 
59. display: none; 
60. z-index: 2; 
61. } 
62. #suspenddiv button{ 
63. width: 150px; 
64. height: 30px; 
65. margin-bottom: 20px; 
66. border: 1px solid black; 
67. border-radius: 30px; 
68. background-color: #c4c9ca; 
69. } 
70. #enddiv{ 
71. position: absolute; 
72. top: 210px; 
73. left: 75px; 
74. border: 1px solid gray; 
75. border-radius: 5px; 
76. text-align: center; 
77. background-color:#d7ddde; 
78. display: none; 
79. z-index: 2; 
80. } 
81. .plantext{ 
82. width: 160px; 
83. height: 30px; 
84. line-height: 30px; 
85. font-size: 16px; 
86. font-weight: bold; 
87. } 
88. #planscore{ 
89. width: 160px; 
90. height: 80px; 
91. line-height: 80px; 
92. border-top: 1px solid gray; 
93. border-bottom: 1px solid gray; 
94. font-size: 16px; 
95. font-weight: bold; 
96. } 
97. #enddiv div{ 
98. width: 160px; 
99. height: 50px; 
100. } 
101. #enddiv div button{ 
102. margin-top:10px ; 
103. width: 90px; 
104. height: 30px; 
105. border: 1px solid gray; 
106. border-radius: 30px; 
107. } 
108. </style> 
109. </head> 
110.  
111. <body> 
112. <div id="contentdiv"> 
113. <div id="startdiv"> 
114. <button onclick="begin()">开始游戏</button> 
115. </div> 
116. <div id="maindiv"> 
117. <div id="scorediv"> 
118. <label>分数：</label> 
119. <label id="label">0</label> 
120. </div> 
121. <div id="suspenddiv"> 
122. <button>继续</button><br/> 
123. <button>重新开始</button><br/> 
124. <button>回到主页</button> 
125. </div> 
126. <div id="enddiv"> 
127. <p class="plantext">飞机大战分数</p> 
128. <p id="planscore">0</p> 
129. <div><button onclick="jixu()">继续</button></div> 
130. </div> 
131. </div> 
132. </div> 
133. <script type="text/javascript"> 
134. //获得主界面 
135. var mainDiv=document.getElementById("maindiv"); 
136. //获得开始界面 
137. var startdiv=document.getElementById("startdiv"); 
138. //获得游戏中分数显示界面 
139. var scorediv=document.getElementById("scorediv"); 
140. //获得分数界面 
141. var scorelabel=document.getElementById("label"); 
142. //获得暂停界面 
143. var suspenddiv=document.getElementById("suspenddiv"); 
144. //获得游戏结束界面 
145. var enddiv=document.getElementById("enddiv"); 
146. //获得游戏结束后分数统计界面 
147. var planscore=document.getElementById("planscore"); 
148. //初始化分数 
149. var scores=0; 
150.  
151. /* 
152. 创建飞机类 
153. */ 
154. function plan(hp,X,Y,sizeX,sizeY,score,dietime,sudu,boomimage,imagesrc){ 
155. this.planX=X; 
156. this.planY=Y; 
157. this.imagenode=null; 
158. this.planhp=hp; 
159. this.planscore=score; 
160. this.plansizeX=sizeX; 
161. this.plansizeY=sizeY; 
162. this.planboomimage=boomimage; 
163. this.planisdie=false; 
164. this.plandietimes=0; 
165. this.plandietime=dietime; 
166. this.plansudu=sudu; 
167. //行为 
168. /* 
169. 移动行为 
170. */ 
171. this.planmove=function(){ 
172. if(scores<=50000){ 
173. this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+"px"; 
174. } 
175. else if(scores>50000&&scores<=100000){ 
176. this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+1+"px"; 
177. } 
178. else if(scores>100000&&scores<=150000){ 
179. this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+2+"px"; 
180. } 
181. else if(scores>150000&&scores<=200000){ 
182. this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+3+"px"; 
183. } 
184. else if(scores>200000&&scores<=300000){ 
185. this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+4+"px"; 
186. } 
187. else{ 
188. this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+5+"px"; 
189. } 
190. } 
191. this.init=function(){ 
192. this.imagenode=document.createElement("img"); 
193. this.imagenode.style.left=this.planX+"px"; 
194. this.imagenode.style.top=this.planY+"px"; 
195. this.imagenode.src=imagesrc; 
196. mainDiv.appendChild(this.imagenode); 
197. } 
198. this.init(); 
199. } 
200.  
201. /* 
202. 创建子弹类 
203. */ 
204. function bullet(X,Y,sizeX,sizeY,imagesrc){ 
205. this.bulletX=X; 
206. this.bulletY=Y; 
207. this.bulletimage=null; 
208. this.bulletattach=1; 
209. this.bulletsizeX=sizeX; 
210. this.bulletsizeY=sizeY; 
211. //行为 
212. /* 
213. 移动行为 
214. */ 
215. this.bulletmove=function(){ 
216. this.bulletimage.style.top=this.bulletimage.offsetTop-20+"px"; 
217. } 
218. this.init=function(){ 
219. this.bulletimage=document.createElement("img"); 
220. this.bulletimage.style.left= this.bulletX+"px"; 
221. this.bulletimage.style.top= this.bulletY+"px"; 
222. this.bulletimage.src=imagesrc; 
223. mainDiv.appendChild(this.bulletimage); 
224. } 
225. this.init(); 
226. } 
227.  
228. /* 
229. 创建单行子弹类 
230. */ 
231. function oddbullet(X,Y){ 
232. bullet.call(this,X,Y,6,14,"../image/bullet1.png"); 
233. } 
234.  
235. /* 
236. 创建敌机类 
237. */ 
238. function enemy(hp,a,b,sizeX,sizeY,score,dietime,sudu,boomimage,imagesrc){ 
239. plan.call(this,hp,random(a,b),-100,sizeX,sizeY,score,dietime,sudu,boomimage,imagesrc); 
240. } 
241. //产生min到max之间的随机数 
242. function random(min,max){ 
243. return Math.floor(min+Math.random()*(max-min)); 
244. } 
245.  
246. /* 
247. 创建本方飞机类 
248. */ 
249. function ourplan(X,Y){ 
250. var imagesrc="../image/我的飞机.gif"; 
251. plan.call(this,1,X,Y,66,80,0,660,0,"../image/本方飞机爆炸.gif",imagesrc); 
252. this.imagenode.setAttribute('id','ourplan'); 
253. } 
254.  
255. /* 
256. 创建本方飞机 
257. */ 
258. var selfplan=new ourplan(120,485); 
259. //移动事件 
260. var ourPlan=document.getElementById('ourplan'); 
261. var yidong=function(){ 
262. var oevent=window.event||arguments[0]; 
263. var chufa=oevent.srcElement||oevent.target; 
264. var selfplanX=oevent.clientX-500; 
265. var selfplanY=oevent.clientY; 
266. ourPlan.style.left=selfplanX-selfplan.plansizeX/2+"px"; 
267. ourPlan.style.top=selfplanY-selfplan.plansizeY/2+"px"; 
268. // document.getElementsByTagName('img')[0].style.left=selfplanX-selfplan.plansizeX/2+"px"; 
269. // document.getElementsByTagName('img')[0]..style.top=selfplanY-selfplan.plansizeY/2+"px"; 
270. } 
271. /* 
272. 暂停事件 
273. */ 
274. var number=0; 
275. var zanting=function(){ 
276. if(number==0){ 
277. suspenddiv.style.display="block"; 
278. if(document.removeEventListener){ 
279. mainDiv.removeEventListener("mousemove",yidong,true); 
280. bodyobj.removeEventListener("mousemove",bianjie,true); 
281. } 
282. else if(document.detachEvent){ 
283. mainDiv.detachEvent("onmousemove",yidong); 
284. bodyobj.detachEvent("onmousemove",bianjie); 
285. } 
286. clearInterval(set); 
287. number=1; 
288. } 
289. else{ 
290. suspenddiv.style.display="none"; 
291. if(document.addEventListener){ 
292. mainDiv.addEventListener("mousemove",yidong,true); 
293. bodyobj.addEventListener("mousemove",bianjie,true); 
294. } 
295. else if(document.attachEvent){ 
296. mainDiv.attachEvent("onmousemove",yidong); 
297. bodyobj.attachEvent("onmousemove",bianjie); 
298. } 
299. set=setInterval(start,20); 
300. number=0; 
301. } 
302. } 
303. //判断本方飞机是否移出边界,如果移出边界,则取消mousemove事件,反之加上mousemove事件 
304. var bianjie=function(){ 
305. var oevent=window.event||arguments[0]; 
306. var bodyobjX=oevent.clientX; 
307. var bodyobjY=oevent.clientY; 
308. if(bodyobjX<505||bodyobjX>815||bodyobjY<0||bodyobjY>568){ 
309. if(document.removeEventListener){ 
310. mainDiv.removeEventListener("mousemove",yidong,true); 
311. } 
312. else if(document.detachEvent){ 
313. mainDiv.detachEvent("onmousemove",yidong); 
314. } 
315. } 
316. else{ 
317. if(document.addEventListener){ 
318. mainDiv.addEventListener("mousemove",yidong,true); 
319. } 
320. else if(document.attachEvent){ 
321. mainDiv.attachEvent("nomousemove",yidong); 
322. } 
323. } 
324. } 
325. //暂停界面重新开始事件 
326. //function chongxinkaishi(){ 
327. // location.reload(true); 
328. // startdiv.style.display="none"; 
329. // maindiv.style.display="block"; 
330. //} 
331. var bodyobj=document.getElementsByTagName("body")[0]; 
332. if(document.addEventListener){ 
333. //为本方飞机添加移动和暂停 
334. mainDiv.addEventListener("mousemove",yidong,true); 
335. //为本方飞机添加暂停事件 
336. selfplan.imagenode.addEventListener("click",zanting,true); 
337. //为body添加判断本方飞机移出边界事件 
338. bodyobj.addEventListener("mousemove",bianjie,true); 
339. //为暂停界面的继续按钮添加暂停事件 
340. suspenddiv.getElementsByTagName("button")[0].addEventListener("click",zanting,true); 
341. // suspenddiv.getElementsByTagName("button")[1].addEventListener("click",chongxinkaishi,true); 
342. //为暂停界面的返回主页按钮添加事件 
343. suspenddiv.getElementsByTagName("button")[2].addEventListener("click",jixu,true); 
344. } 
345. else if(document.attachEvent){ 
346. //为本方飞机添加移动 
347. mainDiv.attachEvent("onmousemove",yidong); 
348. //为本方飞机添加暂停事件 
349. selfplan.imagenode.attachEvent("onclick",zanting); 
350. //为body添加判断本方飞机移出边界事件 
351. bodyobj.attachEvent("onmousemove",bianjie); 
352. //为暂停界面的继续按钮添加暂停事件 
353. suspenddiv.getElementsByTagName("button")[0].attachEvent("onclick",zanting); 
354. // suspenddiv.getElementsByTagName("button")[1].attachEvent("click",chongxinkaishi,true); 
355. //为暂停界面的返回主页按钮添加事件 
356. suspenddiv.getElementsByTagName("button")[2].attachEvent("click",jixu,true); 
357. } 
358. //初始化隐藏本方飞机 
359. selfplan.imagenode.style.display="none"; 
360.  
361. /* 
362. 敌机对象数组 
363. */ 
364. var enemys=[]; 
365.  
366. /* 
367. 子弹对象数组 
368. */ 
369. var bullets=[]; 
370. var mark=0; 
371. var mark1=0; 
372. var backgroundPositionY=0; 
373. /* 
374. 开始函数 
375. */ 
376. function start(){ 
377. mainDiv.style.backgroundPositionY=backgroundPositionY+"px"; 
378. backgroundPositionY+=0.5; 
379. if(backgroundPositionY==568){ 
380. backgroundPositionY=0; 
381. } 
382. mark++; 
383. /* 
384. 创建敌方飞机 
385. */ 
386.  
387. if(mark==20){ 
388. mark1++; 
389. //中飞机 
390. if(mark1%5==0){ 
391. enemys.push(new enemy(6,25,274,46,60,5000,360,random(1,3),"../image/中飞机爆炸.gif","../image/enemy3_fly_1.png")); 
392. } 
393. //大飞机 
394. if(mark1==20){ 
395. enemys.push(new enemy(12,57,210,110,164,30000,540,1,"../image/大飞机爆炸.gif","../image/enemy2_fly_1.png")); 
396. mark1=0; 
397. } 
398. //小飞机 
399. else{ 
400. enemys.push(new enemy(1,19,286,34,24,1000,360,random(1,4),"../image/小飞机爆炸.gif","../image/enemy1_fly_1.png")); 
401. } 
402. mark=0; 
403. } 
404.  
405. /* 
406. 移动敌方飞机 
407. */ 
408. var enemyslen=enemys.length; 
409. for(var i=0;i<enemyslen;i++){ 
410. if(enemys[i].planisdie!=true){ 
411. enemys[i].planmove(); 
412. } 
413. /* 
414. 如果敌机超出边界,删除敌机 
415. */ 
416. if(enemys[i].imagenode.offsetTop>568){ 
417. mainDiv.removeChild(enemys[i].imagenode); 
418. enemys.splice(i,1); 
419. enemyslen--; 
420. } 
421. //当敌机死亡标记为true时，经过一段时间后清除敌机 
422. if(enemys[i].planisdie==true){ 
423. enemys[i].plandietimes+=20; 
424. if(enemys[i].plandietimes==enemys[i].plandietime){ 
425. mainDiv.removeChild(enemys[i].imagenode); 
426. enemys.splice(i,1); 
427. enemyslen--; 
428. } 
429. } 
430. } 
431.  
432. /* 
433. 创建子弹 
434. */ 
435. if(mark%5==0){ 
436. bullets.push(new oddbullet(parseInt(selfplan.imagenode.style.left)+31,parseInt(selfplan.imagenode.style.top)-10)); 
437. } 
438.  
439. /* 
440. 移动子弹 
441. */ 
442. var bulletslen=bullets.length; 
443. for(var i=0;i<bulletslen;i++){ 
444. bullets[i].bulletmove(); 
445. /* 
446. 如果子弹超出边界,删除子弹 
447. */ 
448. if(bullets[i].bulletimage.offsetTop<0){ 
449. mainDiv.removeChild(bullets[i].bulletimage); 
450. bullets.splice(i,1); 
451. bulletslen--; 
452. } 
453. } 
454.  
455. /* 
456. 碰撞判断 
457. */ 
458. for(var k=0;k<bulletslen;k++){ 
459. for(var j=0;j<enemyslen;j++){ 
460. //判断碰撞本方飞机 
461. if(enemys[j].planisdie==false){ 
462. if(enemys[j].imagenode.offsetLeft+enemys[j].plansizeX>=selfplan.imagenode.offsetLeft&&enemys[j].imagenode.offsetLeft<=selfplan.imagenode.offsetLeft+selfplan.plansizeX){ 
463. if(enemys[j].imagenode.offsetTop+enemys[j].plansizeY>=selfplan.imagenode.offsetTop+40&&enemys[j].imagenode.offsetTop<=selfplan.imagenode.offsetTop-20+selfplan.plansizeY){ 
464. //碰撞本方飞机，游戏结束，统计分数 
465. selfplan.imagenode.src="../image/本方飞机爆炸.gif"; 
466. enddiv.style.display="block"; 
467. planscore.innerHTML=scores; 
468. if(document.removeEventListener){ 
469. mainDiv.removeEventListener("mousemove",yidong,true); 
470. bodyobj.removeEventListener("mousemove",bianjie,true); 
471. } 
472. else if(document.detachEvent){ 
473. mainDiv.detachEvent("onmousemove",yidong); 
474. bodyobj.removeEventListener("mousemove",bianjie,true); 
475. } 
476. clearInterval(set); 
477. } 
478. } 
479. //判断子弹与敌机碰撞 
480. if((bullets[k].bulletimage.offsetLeft+bullets[k].bulletsizeX>enemys[j].imagenode.offsetLeft)&&(bullets[k].bulletimage.offsetLeft<enemys[j].imagenode.offsetLeft+enemys[j].plansizeX)){ 
481. if(bullets[k].bulletimage.offsetTop<=enemys[j].imagenode.offsetTop+enemys[j].plansizeY&&bullets[k].bulletimage.offsetTop+bullets[k].bulletsizeY>=enemys[j].imagenode.offsetTop){ 
482. //敌机血量减子弹攻击力 
483. enemys[j].planhp=enemys[j].planhp-bullets[k].bulletattach; 
484. //敌机血量为0，敌机图片换为爆炸图片，死亡标记为true，计分 
485. if(enemys[j].planhp==0){ 
486. scores=scores+enemys[j].planscore; 
487. scorelabel.innerHTML=scores; 
488. enemys[j].imagenode.src=enemys[j].planboomimage; 
489. enemys[j].planisdie=true; 
490. } 
491. //删除子弹 
492. mainDiv.removeChild(bullets[k].bulletimage); 
493. bullets.splice(k,1); 
494. bulletslen--; 
495. break; 
496. } 
497. } 
498. } 
499. } 
500. } 
501. } 
502. /* 
503. 开始游戏按钮点击事件 
504. */ 
505. var set; 
506. function begin(){ 
507.  
508. startdiv.style.display="none"; 
509. mainDiv.style.display="block"; 
510. selfplan.imagenode.style.display="block"; 
511. scorediv.style.display="block"; 
512. /* 
513. 调用开始函数 
514. */ 
515. set=setInterval(start,20); 
516. } 
517. //游戏结束后点击继续按钮事件 
518. function jixu(){ 
519. location.reload(true); 
520. } 
521. </script> 
522. </body> 
523. </html> 

以上所述就是本文的全部内容了，希望大家能够喜欢。