当前位置：Gxlcms > JavaScript > JavaScript原生编写《飞机大战坦克》游戏完整实例

JavaScript原生编写《飞机大战坦克》游戏完整实例

时间：2021-07-01 10:21:17 帮助过：34人阅读

先来看看开始的界面图

实现思路：

      1.打开页面，背景开始走动；

      2.点击开始，飞机开始不断发射子弹，敌人随机出现在上方；

      3.当敌人碰到子弹，敌人消失；

      4.当敌人和飞机相遇，飞机死亡，结束游戏；

html页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>飞机大战</title>
  6.  <link rel="stylesheet" type="text/css" href="飞机大战.css">
  7. </head>
  8. <body>
  9.  <div id="mainScreen">
  10. <!-- 背景图片 -->
  11.  <div id="bgImg1" class="bg"></div>
  12.  <div id="bgImg2" class="bg"></div>
  13. <!-- 飞机 -->
  14.  <div id="airplane"></div>
  15. <!-- 开始按钮 -->
  16.  <div id="startMenu">
  17.   <a href="#" id="start">Start</a>
  18.  </div>
  19. <!-- 重新开始按钮 -->
  20.  <div id="restartMenu">
  21.   <a href="#" id="restart">Game Over!<br/>重新开始</a>
  22.  </div>
  23. <!-- 敌人 -->
  24.  <div class="enemy"></div>
  25.  <div class="enemy"></div>
  26.  <div class="enemy"></div>
  27.  <div class="enemy"></div>
  28.  <div class="enemy"></div>
  29. <!-- 子弹 -->
  30.  <div class="bullet"></div>
  31.  <div class="bullet"></div>
  32.  <div class="bullet"></div>
  33.  <div class="bullet"></div>
  34.  <div class="bullet"></div>
  35.  <div class="bullet"></div>
  36.  <div class="bullet"></div>
  37.  <div class="bullet"></div>
  38.  <div class="bullet"></div>
  39.  <div class="bullet"></div>
  40.  </div>
  41.  <script type="text/javascript" src="sunckBase.js"></script>
  42.  <script type="text/javascript" src="飞机大战.js"></script>
  43. </body>
  44. </html>

css样式

  1. *{
  2.  margin: 0;
  3.  padding: 0;
  4.  font-family: "微软雅黑";
  5. }
  6. #mainScreen{
  7.  width: 512px;
  8.  height: 768px;
  9.  margin:0 auto;
  10.  position: relative;
  11.  overflow: hidden;
  12. }
  13. .bg{
  14.  width: 512px;
  15.  height:768px;
  16.  position: absolute;
  17.  background: url(bg.jpg);
  18. }
  19. #bgImg2{
  20.  top:-768px;
  21. }
  22. #airplane{
  23.  width: 109px;
  24.  height: 82px;
  25.  position: absolute;
  26.  background: url(hero.png);
  27.  left: 215px;
  28.  top: 668px;
  29. }
  30. .enemy{
  31.  position: absolute;
  32.  width: 30px;
  33.  height: 30px;
  34.  left: -100px;
  35.  top: 0px;
  36.  background: url(enemy.png);
  37.  background-size: 30px 30px;
  38. }
  39. .bullet{
  40.  position: absolute;
  41.  width: 5px;
  42.  height: 10px;
  43.  left: -100px;
  44.  top: -100px;
  45.  background: url(bullet.png);
  46.  background-size: 5px 10px;
  47. }
  48. #startMenu, #restartMenu{
  49.  position: absolute; 
  50.  width: 512px; 
  51.  text-align: center; 
  52.  left: 0; 
  53.  top: 300px;
  54. }
  55. #start, #restart{
  56.  line-height:50px; 
  57.  font-size:30px; 
  58.  font-weight:bold; 
  59.  color:#F00; 
  60.  display:block; 
  61.  text-decoration:none;
  62. }
  63. #restartMenu{
  64.  display: none;
  65. }

进入页面时，背景开始动

  1. //给背景设置定时器，让背景不停的动，形成动感
  2. var bgTimer = setInterval(bgRun, 10);
  3. function bgRun() {
  4.  jsBg1.style.top = jsBg1.offsetTop + 1 + "px";
  5.  jsBg2.style.top = jsBg2.offsetTop + 1 + "px";
  6.  if (jsBg1.offsetTop >= 768) {
  7.  jsBg1.style.top = "-768px";
  8.  } else {
  9.  if (jsBg2.offsetTop >= 768) {
  10.   jsBg2.style.top = "-768px";
  11.  }
  12.  }
  13. }

点击开始，进入游戏


游戏中

注：其实子弹和敌人的标签没有几个，但是我们使用定时器，开始之前，现将表现都放在屏幕外，进入游戏需要时候再改变标签定位，将其放入到页面中。

  1. var jsStartBox=document.getElementById("startMenu")
  2. jsStart.onclick = function startGame(){
  3.  jsStartBox.style.display="none";
  4.  var baseX = 0;
  5.  var baseY = 0;
  6.  var moveX = 0;
  7.  var moveY = 0;
  8.  jsAirplane.onmousedown = function(e) {
  9.  var evt = e || window.event;
  10.  baseX = evt.pageX;
  11.  baseY = evt.pageY;
  12.  jsDivBox.onmousemove = function(v) {
  13.   var vt = v || window.event;
  14.   moveX = vt.pageX - baseX;
  15.   baseX = vt.pageX;
  16.   moveY = vt.pageY - baseY;
  17.   baseY = vt.pageY;
  18.   jsAirplane.style.left = jsAirplane.offsetLeft + moveX + "px";
  19.   jsAirplane.style.top = jsAirplane.offsetTop + moveY + "px";
  20.  };
  21.  };
  22.  jsAirplane.onmouseup = function() {
  23.  mainScreen.onmousemove = null;
  24.  }
  25.  //找到可用的子弹
  26.  var findBulletTimer = setInterval(findBullet, 300);
  27.  function findBullet() {
  28.  for (var i = 0; i < jsBullets.length; i++) {
  29.   if (jsBullets[i]["isShow"] == false) {
  30.   jsBullets[i]["isShow"] = true;
  31.   //将子弹移动到飞机头
  32.   jsBullets[i].style.left = jsAirplane.offsetLeft + jsAirplane.offsetWidth / 2 + "px";
  33.   jsBullets[i].style.top = jsAirplane.offsetTop + "px";
  34.   break;
  35.   }
  36.  }
  37.  }
  38.  // //让子弹飞
  39.  var bulletFlyTimer = setInterval(bulletFlay, 100);
  40.  function bulletFlay() {
  41.  for (var j = 0; j < jsBullets.length; j++) {
  42.   if (jsBullets[j]["isShow"] == true) {
  43.   if (jsBullets[j].offsetTop > -20) {
  44.    jsBullets[j].style.top = jsBullets[j].offsetTop - 20 + "px";
  45.   } else {
  46.    jsBullets[j].style.left = "-100px";
  47.    jsBullets[j].style.top = "-100px";
  48.    jsBullets[j]["isShow"] = false;
  49.   }
  50.   }
  51.  }
  52.  }
  53.  //找到可用敌人
  54.  var findEnemyTimer = setInterval(findEnemy, 500);
  55.  function findEnemy(){
  56.  //找到一个没有在屏幕中的敌人
  57.  for (var i = 0; i < jsEnemys.length; i++) {
  58.   if (jsEnemys[i]["isShow"] == false) {
  59.   //标记敌人已经使用
  60.   jsEnemys[i]["isShow"] = true;
  61.   //将敌人移动到屏幕
  62.   var left = randomNum(0, 482);
  63.   jsEnemys[i].style.left = left + "px";
  64.   jsEnemys[i].style.top = 0 + "px";
  65.   break;
  66.   }
  67.  }
  68.  }
  69.  // //让敌人下落
  70.  var enemyLandTimer = setInterval(enemyLand, 100);
  71.  function enemyLand() {
  72.  for (var j = 0; j < jsEnemys.length; j++) {
  73.   if (jsEnemys[j]["isShow"] == true) {
  74.   var a = randomNum(4, 20);
  75.   if (jsEnemys[j].offsetTop <= 768) {
  76.    jsEnemys[j].style.top = jsEnemys[j].offsetTop + a + "px";
  77.   } else {
  78.    jsEnemys[j].style.left = "-100px";
  79.    jsEnemys[j].style.top = "0px";
  80.    jsEnemys[j]["isShow"] = false;
  81.   }
  82.   }
  83.  }
  84.  } 
  85. }

打中怪物

用页面上存在每一个敌人和每一个子弹的定位进行简则，如果相撞，那么怪物消失

  1. var perishEnemyTimer = setInterval(perishEnemy, 50);
  2. function perishEnemy() {
  3.  for (var i = 0; i < jsBullets.length; i++) {
  4.  if (jsBullets[i]["isShow"] == true) {
  5.   for (var j = 0; j < jsEnemys.length; j++) {
  6.   if (jsEnemys[j]["isShow"] == true) {
  7.    var ret = pzjcFunc(jsBullets[i], jsEnemys[j]);
  8.    if (ret) {
  9.    jsBullets[i].style.left = "-100px";
  10.    jsBullets[i].style.top = "-100px";
  11.    jsBullets[i]["isShow"] = false;
  12.    jsEnemys[j].style.left = "-100px";
  13.    jsEnemys[j].style.top = "-100px";
  14.    jsEnemys[j]["isShow"] = false;
  15.    }
  16.   }
  17.   }
  18.  }
  19.  }
  20. }

死亡检测


游戏结束

用页面上存在每一个敌人和飞机的定位进行检测，如果两者相遇，那么结束游戏。

注：检测时考虑取反，坦克在飞机上面，在飞机下面，在飞机左边，在飞机右边是没有碰到的时候，那么我们取反就是说明两者已经相遇了。

  1. //死亡检测
  2. var dieTimer = setInterval(die, 50);
  3. var jsStop = document.getElementById("restartMenu")
  4. function die() {
  5.  for (var i = 0; i < jsEnemys.length; i++) {
  6.  if (jsEnemys[i]["isShow"] == true) {
  7.   var isDie = pzjcFunc(jsAirplane, jsEnemys[i]);
  8.   if (isDie) {
  9.   jsStop.style.display="block";
  10.   jsAirplane.onmouseup = function() {
  11.    mainScreen.onmousemove = null;
  12.   }
  13.   }
  14.  }
  15.  }
  16. }

上述两步中用到的检测两者是否碰撞的函数

  1. //死亡检测的函数
  2. function pzjcFunc(obj1, obj2){
  3.  var obj1Left = obj1.offsetLeft;
  4.  var obj1Width = obj1Left + obj1.offsetWidth;
  5.  var obj1Top = obj1.offsetTop;
  6.  var obj1Height = obj1Top + obj1.offsetHeight;
  7.  var obj2Left = obj2.offsetLeft;
  8.  var obj2Width = obj2Left + obj2.offsetWidth;
  9.  var obj2Top = obj2.offsetTop;
  10.  var obj2Height = obj2Top + obj2.offsetHeight;
  11.  if ( !(obj1Left > obj2Width || obj1Width < obj2Left || obj1Top > obj2Height || obj1Height < obj2Top) ) {
  12.  return true;
  13.  } 
  14.  return false;
  15. }

点击重新开始之后刷新页面

  1. var jsRestart=document.getElementById("restart");
  2. jsRestart.onclick=function(){
  3.  jsStop.style.display="none";
  4.  window.location.reload();//刷新页面
  5. }

好的，现在我们的游戏就可以玩了，这个游戏的有些写作思想有些是我们在以后的项目中可以学习的。比如，页面之外的空间的运用；比如，检测碰撞。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家学习或者使用Javascript能带来一定的帮助，如果有疑问大家可以留言交流。

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！