上传
当前位置：棋牌网 > 1.8网页游戏 > HTML5全民飞机大战网页小游戏源码
大资源网

HTML5全民飞机大战网页小游戏源码

作者:大资源网

HTML5全民飞机大战网页小游戏源码-棋牌网

HTML5全民飞机大战网页小游戏源码，html+js实现飞机大战网页小游戏，玩法比较为简单，左右移动鼠标打击，不让前面的小飞机经过。飞机掉落速度越来越快，游戏结束后有分数显示，可以用来做分数比拼。

1、html页面代码

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>HTML5全民飞机大战小游戏 – bokequ.com</title>
<style>
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: relative;
background-image: linear-gradient(#2C3E50,#4CA1AF);

}

.canvasbig {
position: absolute;
left: calc(50% – 260px);
top: calc(50% – 400px);
width: 520px;
height: 800px;

}

.canvasdiv {
position: absolute;
cursor: pointer;
left: 160px;
top: 500px;
width: 200px;
height: 53px;
background-image: url(img/starting.png);
}

.none {
display: none;
}
</style>
</head>
<body>
<!– <script src=”js/circle.js”></script> –>
<div class=”canvasbig”>
<div class=”canvasdiv”></div>
<canvas width=”520″ height=”800″ id=”canvas1″></canvas>
</div>
<script src=”js/index.js”></script>
</body>
</html>

2、js代码

  1. var canvas1 = document.getElementById(“canvas1”);
  2. var context = canvas1.getContext(‘2d’);
  3. var canvasbig = document.getElementsByClassName(“canvasbig”)[0];
  4. //背景图片
  5. var bg = new Image();
  6. bg.src = “img/bg.jpg”;
  7. //全民飞机大战标题
  8. var starthead = new Image();
  9. starthead.src = “img/starthead.png”;
  10. //加载时候的狗子和文字
  11. var load = new Image();
  12. var loadnum = 1,
  13. loadtime = 0,
  14. loadrect = 1;
  15. var loadtextblur = true,
  16. loadtextnum = –1,
  17. pointnum = 1;
  18. //我方战斗机
  19. var myplane = new Image();
  20. myplane.src = “img/myplane1.png”;
  21. var myplaneX = canvas1.width / 2,
  22. myplaneY = 730;
  23. //战斗机子弹
  24. var bullet = new Image();
  25. bullet.src = “img/bullet.png”;
  26. var bullettime = 0,
  27. bulletnum = 0,
  28. bulletarr = [];
  29. //敌机
  30. var enemytime = 0,
  31. enemyarr = [];
  32. var enemy1 = new Image();
  33. enemy1.src = `img/enemy1.png`;
  34. var enemy2 = new Image();
  35. enemy2.src = `img/enemy2.png`;
  36. var enemy3 = new Image();
  37. enemy3.src = `img/enemy3.png`;
  38. var enemy4 = new Image();
  39. enemy4.src = `img/enemy4.png`;
  40. var enemyall = [enemy1, enemy2, enemy3, enemy4];
  41. //战斗机爆炸
  42. var myplane1boom = new Image();
  43. var myboomnum = 1,
  44. myboomtime = 0;
  45. //敌机爆炸
  46. var enemychangearr = [];
  47. //boss警告
  48. var warning1 = new Image();
  49. warning1.src = “img/warning1.png”
  50. var warning2 = new Image();
  51. warning2.src = “img/warning2.png”;
  52. var warningtime = 0,
  53. warningchange = 0;
  54. //boss出场背景
  55. var bossbg = new Image();
  56. bossbg.src = “img/bg2.jpg”;
  57. var boss = new Image();
  58. boss.src = “img/planeboss.png”;
  59. //boss改变飞机速度
  60. var bossattacktime = 0;
  61. var bossattacknum = 1;
  62.  
  63. var obj = {
  64. gamestart: 1,
  65. gameload: 0,
  66. gamerun: 0,
  67. gameover: 0,
  68. dead: 0,
  69. score: 0,
  70. life: 3,
  71. bgy1: –854,
  72. bgy2: 0,
  73. warnon: 0,
  74. bosstime: 0,
  75. bossattack: 0,
  76. bgon: function () {
  77. context.drawImage(bg, 0, this.bgy1, 520, 854);
  78. context.drawImage(bg, 0, this.bgy2, 520, 854);
  79. },
  80. bgchange: function () {
  81. this.bgy1++;
  82. this.bgy2++;
  83. if (this.bgy1 == 0) {
  84. this.bgy1 = –854;
  85. this.bgy2 = 0;
  86. }
  87. },
  88. scoring: function () {
  89. var gradient = context.createLinearGradient(0, 0, 120, 60);
  90. gradient.addColorStop(0, ‘#ff9569’);
  91. gradient.addColorStop(1, ‘#e92758’);
  92. context.font = ’30px sans-serif’;
  93. context.fillStyle = gradient;
  94. context.fillText(“SCORE:” + this.score, 10, 50);
  95. },
  96. lifeing: function () {
  97. context.font = ’30px sans-serif’;
  98. context.fillStyle = “#D28140”;
  99. context.fillText(“LIFE:” + this.life, 400, 50);
  100. if (obj.dead == 1 && myboomnum == 9 && obj.life > 0) {
  101. obj.dead = 0;
  102. bullettime = 0;
  103. bulletnum = 0;
  104. bulletarr = [];
  105. enemytime = 0;
  106. enemyarr = [];
  107. myboomnum = 1;
  108. myboomtime = 0;
  109. enemychangearr = [];
  110. myplane1boom.src = `img/myplane1boom${myboomnum}.png`;
  111. } else if (obj.dead == 1 && obj.life == 0) {
  112. obj.gameover = 1;
  113. }
  114. },
  115. gameovering: function () {
  116. if (obj.gameover == 1) {
  117. obj.gamestart = 1;
  118. obj.gameover = 0;
  119. obj.dead = 0;
  120. obj.gamerun = 0;
  121. }
  122. },
  123. starting: function () {
  124. canvasdiv.className = “canvasdiv”;
  125. obj.life = 3;
  126. obj.score = 0;
  127. loadnum = 1;
  128. loadtime = 0;
  129. loadrect = 1;
  130. loadtextblur = true;
  131. loadtextnum = –1;
  132. pointnum = 1;
  133. myplaneX = canvas1.width / 2;
  134. myplaneY = 730;
  135. bullettime = 0;
  136. bulletnum = 0;
  137. bulletarr = [];
  138. enemytime = 0;
  139. enemyarr = [];
  140. myboomnum = 1;
  141. myboomtime = 0;
  142. enemychangearr = [];
  143. warningtime = 0;
  144. warningchange = 0;
  145. bossattacktime = 0;
  146. bossattacknum = 1;
  147. obj.bossbgy1 = –2420,
  148. obj.bossbgy2 = –1640,
  149. obj.bossbgy3 = –860,
  150. obj.bg2boss = –262,
  151. obj.bosstimeblur = true,
  152. obj.bossattack = 0;
  153. context.drawImage(starthead, 110, 200);
  154. },
  155. loading: function () {
  156. loadtime++;
  157. loadrect++;
  158. if (loadtime == 5) {
  159. loadtime = 0;
  160. loadnum++;
  161. if (loadnum == 10) {
  162. loadnum = 1;
  163. }
  164. load.src = `img/load${loadnum}.png`;
  165. }
  166. context.beginPath();
  167. context.fillStyle = ‘white’;
  168. context.fillRect(0, 0, 520, 800);
  169. var gradient = context.createLinearGradient(20, 500, 397, 30);
  170. gradient.addColorStop(0, ‘#29bdd9’);
  171. gradient.addColorStop(1, ‘#276ace’);
  172. context.fillStyle = gradient;
  173. context.fillRect(20, 500, loadrect, 30);
  174. context.closePath();
  175. context.drawImage(load, loadrect + 20, 480, 102, 72);
  176.  
  177. },
  178. loadtext: function () {
  179. if (loadtextblur == false) {
  180. loadtextnum–;
  181. } else if (loadtextblur == true) {
  182. loadtextnum += 2;
  183. }
  184. context.beginPath();
  185. context.font = ’40px sans-serif’;
  186. context.fillStyle = ‘black’;
  187. context.fillText(“加载中 “, 50, 450);
  188. context.beginPath();
  189. context.font = ’80px sans-serif’;
  190. if (pointnum == 1) {
  191. context.fillText(“. “, 200, 450 – loadtextnum);
  192. context.fillText(“. “, 240, 450);
  193. context.fillText(“. “, 280, 450);
  194. if (loadtextnum < 0) {
  195. pointnum = 2;
  196. loadtextnum = 0;
  197. loadtextblur = true;
  198. } else if (loadtextnum > 39) {
  199. loadtextblur = false;
  200. }
  201. } else if (pointnum == 2) {
  202. context.fillText(“. “, 200, 450);
  203. context.fillText(“. “, 240, 450 – loadtextnum);
  204. context.fillText(“. “, 280, 450);
  205. if (loadtextnum < 0) {
  206. pointnum = 3;
  207. loadtextnum = 0;
  208. loadtextblur = true;
  209. } else if (loadtextnum > 39) {
  210. loadtextblur = false;
  211. }
  212. } else if (pointnum == 3) {
  213. context.fillText(“. “, 200, 450);
  214. context.fillText(“. “, 240, 450);
  215. context.fillText(“. “, 280, 450 – loadtextnum);
  216. if (loadtextnum < 0) {
  217. pointnum = 1;
  218. loadtextnum = 0;
  219. loadtextblur = true;
  220. } else if (loadtextnum > 39) {
  221. loadtextblur = false;
  222. }
  223. }
  224. context.closePath();
  225. },
  226. myplane: function (e) {
  227.  
  228. myplaneX = e.offsetX;
  229. myplaneY = e.offsetY;
  230. context.drawImage(myplane, myplaneX – myplane.width / 2, myplaneY – myplane.height / 2);
  231. },
  232. bulleton: function () {
  233. bullettime++;
  234. var bulletX = myplaneX – bullet.width / 2;
  235. var bulletY = myplaneY – myplane.height / 2 – bullet.height;
  236. var num;
  237. if (obj.bossattack == 1) {
  238. num = 10
  239. }else{
  240. num = 20
  241. }
  242. if (bullettime >= num) {
  243. var changearr = [bulletX, bulletY, 0];
  244. bulletarr.push(changearr);
  245. bullettime = 0;
  246. }
  247. },
  248. bulletchange: function () {
  249. var result = [];
  250. for (var i = 0; i < bulletarr.length; i++) {
  251. if (bulletarr[i][1] – bulletarr[i][2] >= 0) {
  252. context.drawImage(bullet, bulletarr[i][0], bulletarr[i][1] – bulletarr[i][2]);
  253. bulletarr[i][2] += 4;
  254. result.push(bulletarr[i]);
  255. }
  256. }
  257. bulletarr = result;
  258. },
  260. enemy: function () {
  261. enemytime++;
  262. var enemynum = parseInt(Math.random() * 4);
  263. if (obj.bossattack == 1) {
  264. num = 10
  265. }else{
  266. num = 25
  267. }
  268. if (enemytime >= num) {
  269. if (enemynum == 3 && Math.random() < 0.9) {
  270. return;
  271. } else {
  272. var enemylife = 1
  273. if (enemynum == 3) {
  274. enemylife = 5
  275. }
  276. var changearr = [Math.random() * 520 – enemyall[enemynum].width / 2, –enemyall[enemynum].height, 0, enemynum, enemylife];
  277. enemyarr.push(changearr);
  278. enemytime = 0;
  279. }
  280. }
  281. },
  282. enemychange: function () {
  283. var result = [];
  284. if (obj.bossattack == 1) {
  285. bossattacktime++;
  286. if (bossattacktime == 80) {
  287. bossattacknum += 0.05;
  288. bossattacktime = 0;
  289. }
  290. }
  291. for (let i = 0; i < enemyarr.length; i++) {
  292. if (enemyarr[i][1] + enemyarr[i][2] <= canvas1.height) {
  293. context.drawImage(enemyall[enemyarr[i][3]], enemyarr[i][0], enemyarr[i][1] + enemyarr[i][2]);
  294. if (enemyall[enemyarr[i][3]] == enemy4) {
  295. enemyarr[i][2] += 1.5* bossattacknum;
  296. } else {
  297. enemyarr[i][2] += 2* bossattacknum;
  298. }
  299. result.push(enemyarr[i]);
  300. }
  301. }
  302. enemyarr = result;
  303. },
  304. myplaneboom: function () {
  305. obj.dead = 1;
  306. myboomtime++;
  307. if (myboomtime >= 10) {
  308. myplane1boom.src = `img/myplane1boom${myboomnum}.png`;
  309. myboomnum++;
  310. myboomtime = 0;
  311. }
  312. context.drawImage(myplane1boom, myplaneX – myplane.width / 2, myplaneY – myplane.height / 2);
  313. if (myboomnum == 9) {
  314. obj.life -= 1;
  315. bulletarr = [];
  316. enemyarr = [];
  317. myplaneX = canvas1.width / 2;
  318. myplaneY = 750;
  319. }
  320. },
  321. myplaneisbroke: function () {
  322. for (let i = 0; i < enemyarr.length; i++) {
  323. if (enemyarr[i][0] < myplaneX – myplane.width / 2 && enemyarr[i][1] + enemyarr[i][2] < myplaneY – myplane.height / 2 + myplane.height) {
  324. if (enemyarr[i][0] + enemyall[enemyarr[i][3]].width > myplaneX – myplane.width / 2 && enemyarr[i][1] + enemyarr[i][2] + enemyall[enemyarr[i][3]].height > myplaneY – myplane.height / 2) {
  325. obj.myplaneboom();
  326. }
  327. } else if (enemyarr[i][0] > myplaneX – myplane.width / 2 && enemyarr[i][1] + enemyarr[i][2] < myplaneY – myplane.height / 2 + myplane.height) {
  328. if (enemyarr[i][0] < myplaneX – myplane.width / 2 + myplane.width && enemyarr[i][1] + enemyarr[i][2] + enemyall[enemyarr[i][3]].height > myplaneY – myplane.height / 2) {
  329. obj.myplaneboom();
  330. }
  331. }
  332. }
  333. },
  334. enemyboom: function () {
  335. var result = [];
  336. for (let i = 0; i < enemychangearr.length; i++) {
  337. enemychangearr[i][3]++;
  338. if (enemychangearr[i][3] >= 10) {
  339. enemychangearr[i][5].src = `img/enemy${enemychangearr[i][2]}boom${enemychangearr[i][4]}.png`;
  340. enemychangearr[i][4]++;
  341. enemychangearr[i][3] = 0;
  342. }
  343. context.drawImage(enemychangearr[i][5], enemychangearr[i][0], enemychangearr[i][1]);
  344. if (enemychangearr[i][4] < 6) {
  345. result.push(enemychangearr[i]);
  346. }
  347. };
  348. enemychangearr = result;
  349. },
  350. enemyisbroke: function () {
  351. for (let i = 0; i < bulletarr.length; i++) {
  352. for (let x = 0; x < enemyarr.length; x++) {
  353. if (bulletarr[i][0] < enemyarr[x][0] && bulletarr[i][1] – bulletarr[i][2] < enemyarr[x][1] + enemyarr[x][2] + enemyall[enemyarr[x][3]].height && bulletarr[i][1] – bulletarr[i][2] > enemyarr[x][1] + enemyarr[x][2]) {
  354. if (bulletarr[i][0] + bullet.width > enemyarr[x][0]) {
  355. enemyarr[x][4]–;
  356. if (enemyarr[x][4] == 0) {
  357. var enemyboom = new Image();
  358. enemychangearr.push([enemyarr[x][0], enemyarr[x][1] + enemyarr[x][2], enemyarr[x][3] + 1, 0, 1, enemyboom]);
  359. if (enemyarr[x][3] == 3) {
  360. obj.score += 10;
  361. } else {
  362. obj.score += 2;
  363. }
  364. enemyarr.splice(x, 1);
  365. }
  366. bulletarr.splice(i, 1);
  367. }
  368. } else if (bulletarr[i][0] > enemyarr[x][0] && bulletarr[i][1] – bulletarr[i][2] < enemyarr[x][1] + enemyarr[x][2] + enemyall[enemyarr[x][3]].height && bulletarr[i][1] – bulletarr[i][2] > enemyarr[x][1] + enemyarr[x][2]) {
  369. if (bulletarr[i][0] < enemyarr[x][0] + enemyall[enemyarr[x][3]].width) {
  370. enemyarr[x][4]–;
  371. if (enemyarr[x][4] == 0) {
  372. var enemyboom = new Image();
  373. enemychangearr.push([enemyarr[x][0], enemyarr[x][1] + enemyarr[x][2], enemyarr[x][3] + 1, 0, 1, enemyboom]);
  374. if (enemyarr[x][3] == 3) {
  375. obj.score += 10;
  376. } else {
  377. obj.score += 2;
  378. }
  379. enemyarr.splice(x, 1);
  380. }
  381. bulletarr.splice(i, 1);
  382. }
  383. }
  384. }
  385. }
  386. },
  387. warning: function () {
  388. warningchange++;
  389. warningtime++;
  390. if (warningtime >= 20) {
  391. context.drawImage(warning1, 150, 200);
  392. context.drawImage(warning2, 190, 400);
  393. if (warningtime >= 80) {
  394. warningtime = 0;
  395. }
  396. }
  397. if (warningchange == 500) {
  398. obj.warnon = 0;
  399. obj.bosstime = 1;
  400. }
  401.  
  402. },
  403. bossbgy1: –2420,
  404. bossbgy2: –1640,
  405. bossbgy3: –860,
  406. bg2boss: –262,
  407. bosstimeblur: true,
  408. bossbgon: function () {
  409. context.drawImage(bossbg, 0, this.bossbgy1)
  410. context.drawImage(bossbg, 0, this.bossbgy2);
  411. context.drawImage(bossbg, 0, this.bossbgy3);
  412. if (obj.bosstime == 1) {
  413. context.drawImage(boss, 0, this.bg2boss);
  414. }
  415.  
  416. },
  417. bossbgchange: function () {
  418. this.bossbgy1 += 2;
  419. this.bossbgy2 += 2;
  420. this.bossbgy3 += 2;
  421. this.bg2boss += 2;
  422. if (this.bg2boss == 800) {
  423. this.bosstime = 0;
  424. this.bossattack = 1;
  425. };
  426. if (this.bossbgy3 == 800) {
  427. this.bossbgy1 = –1540;
  428. this.bossbgy2 = –760;
  429. this.bossbgy3 = 20;
  430. }
  431. },
  432. // bossY : -262,
  433. // bossX : 0,
  434. // bossfirstime : 0,
  435. // bosssecondtime : 0,
  436. // beatboss : function(){
  437. // context.drawImage(boss,this.bossX,this.bossY);
  438. // if(obj.bossY <= 0){
  439. // obj.bossfirstime ++;
  440. // if( obj.bossfirstime == 4){
  441. // obj.bossY++;
  442. // obj.bossfirstime = 0;
  443. // }
  444. // }else{
  445. // obj.bosssecondtime++;
  446. // if(obj.bosssecondtime == 2){
  447. // obj.bossX++;
  448. // obj.bossfirstime = 0;
  449. // }
  450. // }
  451. // },
  452.  
  453.  
  454. gua: function () {
  455. enemychangearr = [];
  456. for (let x = 0; x < enemyarr.length; x++) {
  457. var enemyboom = new Image();
  458. enemychangearr.push([enemyarr[x][0], enemyarr[x][1] + enemyarr[x][2], enemyarr[x][3] + 1, 0, 1, enemyboom]);
  459. }
  460. enemyarr = [];
  461. }
  462. }
  463.  
  464. setInterval(function () {
  465. obj.bgon();
  466. obj.bgchange();
  467. if (obj.gamestart == 1) {
  468. obj.starting();
  469. }
  470. if (obj.gameload == 1) {
  471. if (loadrect >= 397) {
  472. obj.gameload = 0;
  473. obj.gamerun = 1;
  474. }
  475. obj.loading();
  476. obj.loadtext();
  477. }
  478. if (obj.gamerun == 1) {
  479. if (obj.score >= 300 && obj.bosstimeblur == true) {
  480. obj.warnon = 1;
  481. obj.gua();
  482. obj.bosstimeblur = false;
  483. }
  484. if (obj.bosstime == 1 || obj.bossattack == 1) {
  485. obj.bossbgon();
  486. obj.bossbgchange();
  487. }
  488. if (obj.dead == 0) {
  489. context.drawImage(myplane, myplaneX – myplane.width / 2, myplaneY – myplane.height / 2);
  490. if (obj.bosstime == 0 && obj.warnon == 0) {
  491. obj.enemy();
  492. obj.enemychange();
  493. }
  494. obj.bulleton();
  495. obj.bulletchange();
  496. if (obj.warnon == 1) {
  497. obj.warning();
  498. }
  499. }
  500. obj.myplaneisbroke();
  501. obj.enemyisbroke();
  502. obj.enemyboom();
  503. obj.lifeing();
  504. obj.gameovering();
  505. obj.scoring();
  506. }
  507.  
  508. }, 10)
  509.  
  510. var canvasdiv = document.getElementsByClassName(“canvasdiv”)[0];
  511. canvasdiv.onclick = function () {
  512. canvasdiv.className = “canvasdiv none”;
  513. obj.gamestart = 0;
  514. obj.gameload = 1;
  515. }
  516.  
  517. canvas1.onmousemove = function (e) {
  518. if (obj.gamerun == 1 && obj.dead == 0) {
  519. obj.myplane(e);
  520. this.style.cursor = “none”;
  521. } else {
  522. this.style.cursor = “”;
  523. }
  524. }
  525. document.onkeydown = function (event) {
  526. if (event.keyCode == 8 && obj.gamerun == 1) {
  527. obj.gua();
  528. };
  529. }

HTML5全民飞机大战小游戏是一款突破经典的飞行射击类精品网页小游戏，鼠标操作。

  • 3554稳定运行(天)
  • 1会员总数(位)
  • 28195资源总数(个)
  • 0 本周更新(个)
  • 0今日发布(个)

目前已经有 1 位会员加入