Храните лазер в массиве, а затем рисуйте количество лазеров «Х» на основе имеющихся пушек. - PullRequest
Новая
       11

Храните лазер в массиве, а затем рисуйте количество лазеров «Х» на основе имеющихся пушек.

0 голосов
/ 30 января 2020

Я делаю космический шутер от первого лица, в котором лазеры начинают с экрана и стреляют в целевое местоположение. Работал над простым решением, чтобы сделать это без холста, и в настоящее время я получил это: https://jsfiddle.net/Ljhnqkf9/

Некоторое объяснение кода: 

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 или более), я застрял в том, как сделать это правильно. Я думал о том, чтобы сохранить лазеры в массиве и затем нарисовать их в al oop, основываясь на текущем корабельном оружии, но он всегда терпит неудачу в части $ laser.animation () по какой-то причине, он не хочет принимать массив или может я что то не так сделал. Идея состоит в том, чтобы одновременно запустить 10 лазеров, все они выходят из разных мест вне экрана и заканчиваются в середине цели, как показано в примере.

1 Ответ

0 голосов
/ 30 января 2020

Вам нужно создать больше лазерных элементов и l oop через каждый из них. Я создал несколько для вас. Вам также необходимо установить начальную css для каждого из лазеров. Я создал массив для объектов css, чтобы вы также могли сбросить их из анимации l oop.

Я также устанавливаю позиции лазеров произвольно на основе индекса l oop.

Я надеюсь, что это поможет вам достичь желаемого результата!

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>

Javascript: 

$(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"
              });
            }
          }
        );
      });
    });
});
...