Fatal编程技术网
  • javascript/
  • Javascript 将激光存储在阵列中，然后绘制'；X'；基于当前枪的激光器数量

Javascript 将激光存储在阵列中，然后绘制'；X'；基于当前枪的激光器数量

javascript jquery css jquery-ui

Javascript 将激光存储在阵列中，然后绘制'；X'；基于当前枪的激光器数量,javascript,jquery,css,jquery-ui,drawing,Javascript,Jquery,Css,Jquery Ui,Drawing,我正在制作一个第一人称的太空射击游戏，其中激光从屏幕外开始射向目标位置。我一直在研究一个简单的解决方案，在没有画布的情况下实现这一点，目前我得到了以下结果： 对代码的一些解释： function adjustLine(x1,y1,x2,y2,lineId) //will rotate the laser properly before it's fired $laser.animate( //this is the animation code where the laser is trave

我正在制作一个第一人称的太空射击游戏，其中激光从屏幕外开始射向目标位置。我一直在研究一个简单的解决方案，在没有画布的情况下实现这一点，目前我得到了以下结果：

对代码的一些解释：

function adjustLine(x1,y1,x2,y2,lineId) //will rotate the laser properly before it's fired

$laser.animate( //this is the animation code where the laser is traveling to the target
  {
    left: targetX + ( targetW / 2 ),
    top: targetY + (targetH / 2),
    width: "0px"
  },

      complete: function() { //once the animation is completed, restore the laser at starting position (off-screen)

      $laser.css({ left: "0px", top: "0px", width: "100px" });
      $laserBtn.css({
        textShadow:
          "-1px -1px 0 #e5b13a, 1px -1px 0 #e5b13a, -1px 1px 0 #e5b13a, 1px 1px 0 #e5b13a"
      });
    }
正如你所见，我正在使用jquery.ui插件来制作激光动画，我喜欢这个结果，但是现在当我考虑添加多个激光（例如10个或更多）时，我被如何正确地完成这项工作所困扰。我曾考虑将激光存储在阵列中，然后根据当前的舰炮将其绘制成一个循环，但由于某些原因，$laser.animation（）部分总是失败，它不想接受阵列，或者可能是我做错了什么。我们的想法是同时发射10束激光，所有激光都来自屏幕外的不同位置，并在目标的中间结束，如示例所示。

您需要创建更多的激光元素，并在每个元素之间循环。我为你创造了一些。您还需要为每个激光器设置初始css。我为css对象创建了一个数组，这样您也可以在动画循环中重置它们

我还根据环路的指数任意设置激光器的位置

我希望这将帮助你实现你所期待的结果

HTML:

谢谢你的回答。我试过了，但似乎只有顶部的激光器被正确定位并旋转到正确的方向。例子： 
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link href="https://fonts.googleapis.com/css?family=Poller+One" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

</head>

<body>
  <div class="stage">
    <button id="fire-laser" class="fire-laser">Fire Laser</button>
    <div id="laser1" class="laser"></div>
    <div id="laser2" class="laser"></div>
    <div id="laser3" class="laser"></div>
    <div id="laser4" class="laser"></div>
    <div id="ship" class="target"></div>
  </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js'></script>

</body>

</html>

$(document).ready(function() {
  var $window = $(window),
    lasers = [$("#laser1"),$("#laser2"),$("#laser3"),$("#laser4")];
    lasersCss = [];

    $laserBtn = $(".fire-laser");

    var target = document.getElementById("ship");

    var targetW = target.offsetWidth;
    var targetH = target.offsetHeight;

    function getOffset( el ) {
      var _x = 0;
      var _y = 0;
      while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
          _x += el.offsetLeft - el.scrollLeft;
          _y += el.offsetTop - el.scrollTop;
          el = el.offsetParent;
      }
      return { top: _y, left: _x };
    }

    var targetX = getOffset(target).left;
    var targetY = getOffset(target).top;

    function adjustLine(x1,y1,x2,y2,lineId) {
      dist = Math.sqrt( ((x1-x2)*(x1-x2)) + ((y1-y2)*(y1-y2))    ); 

      x_center = (x1+x2)/2
      y_center = (y1+y2)/2

      rad = Math.atan2(y1 - y2, x1 - x2)
      deg =  (rad * 180) / Math.PI; 

      lsr = document.getElementById(lineId)
      lsr.style.width = dist
      lsr.style.top = y_center
      lsr.style.left = x_center - (dist/2)
      lsr.style.transform = "rotate("+deg+"deg)"; 
    }

    lasers.forEach((laser, idx) => {
      currentCss = {
        left: '0px',
        top: (idx * 100) + 'px',
        width: '100px'
      };
      laser.css(currentCss);
      lasersCss.push(currentCss);
    });

  $("#fire-laser").click(function() {

      lasers.forEach((laser, idx) => {
      adjustLine(0, 0, targetX, targetY, laser[0].id);

        laser.animate(
          {
            left: targetX + ( targetW / 2 ),
            top: targetY + (targetH / 2),
            width: "0px"
          },
          {
            duration: 1000,
            easing: "easeOutQuad",
            queue: true,
            complete: function() {
              console.log("laser fired!");

             laser.css(lasersCss[idx]);
              $laserBtn.css({
                textShadow:
                  "-1px -1px 0 #e5b13a, 1px -1px 0 #e5b13a, -1px 1px 0 #e5b13a, 1px 1px 0 #e5b13a"
              });
            }
          }
        );
      });
    });
});