Powtarzanie funkcji setInterval

pytanie zadane 26 lipca 2017 w JavaScript przez czujek22 Dyskutant (7,670 p.)

Witam. Robię w javascript w canvas grę typu chicken invaders, galaxian itp. Mam problem bo nie wiem w jaki sposób zabrać się za automatyczne wystrzeliwanie pocisków przez statek. Zrobiłem już wystrzelenie jednego pocisku i wykonanie jego ruchu w góre lecz chciałbym aby pojawiały sie kolejne pociski np. co pół sekundy.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Gra SpaceWar</title>
    <style media="screen">
      body {
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: lightgray;
        height: 100vh;
      }
      canvas {
        border: 3px solid darkgray;
      }
    </style>
  </head>
  <body>
    <canvas></canvas>

    <script type="text/javascript">
      const canvas = document.querySelector('canvas');
      const ctx = canvas.getContext('2d');

      const boardWidth = canvas.width = 600;
      const boardHeight = canvas.height = 800;

      const spacecraftSize = 40;
      let spacecraftX = boardWidth / 2 - spacecraftSize / 2;
      let spacecraftY = boardHeight / 1.2;              // const w wypadku braku ruchu pionowo

      const bulletWidth = 5;
      const bulletHeight = 10;
      let bulletX = spacecraftX + spacecraftSize / 2;
      let bulletY = spacecraftY;
      let bulletSpeedX = 0;
      let bulletSpeedY = -3;

      function board() {
        ctx.fillStyle = "black";
        ctx. fillRect(0, 0, boardWidth, boardHeight);
      }

      function spacecraft() {
        ctx.fillStyle = 'white';
        ctx.fillRect(spacecraftX, spacecraftY, spacecraftSize, spacecraftSize);
      }

      function bullet() {
        ctx.fillStyle = 'white';
        ctx.fillRect(bulletX, bulletY, bulletWidth, bulletHeight);

        bulletX += bulletSpeedX;
        bulletY += bulletSpeedY;
      }

      function game() {
        board();
        spacecraft();
        bullet();
      }

      setInterval(game, 1000/60);

    </script>
  </body>
</html>

Byc może taki sposób by wypalił setInterval(setInterval(game, 1000/60), 1000); Jednak gdzieś trzeba resetować położenie nowej kuli aby leciała znowu od statku. Próbowałem różnych sposób, też pętlami ale nie wiem gdzie dać ten reset ustawień położenia kuli aby on dotyczył nowej kuli a nie tej co leci do góry

1 odpowiedź

odpowiedź 26 lipca 2017 przez Jedras Maniak (54,860 p.)

Próbowałem różnych sposób, też pętlami ale nie wiem gdzie dać ten reset ustawień położenia kuli aby on dotyczył nowej kuli a nie tej co leci do góry

Najlepiej pociski przechowywać jako obiekty w jakiejś tablicy i później je rysować na planszy. Jak pocisk "przekroczy" ekran / uderzy w cel to go usuwasz z tablicy. Podobnie możesz zrobić z przeciwnikami.

komentarz 26 lipca 2017 przez czujek22 Dyskutant (7,670 p.)

Ale wtedy liczba kul będzie skończona, tzn będę musiał włożyć do tablicy sporo pocisków a tak w jakiejś pętli dałbym warunek skończenia sie ich / przerwania strzelania

komentarz 26 lipca 2017 przez elwood Gaduła (4,180 p.)

Bez obiektów się nie obejdzie. Jedras dobrze pisze i wcale nie musisz deklarować tablicy obiektów na samym początku mimo, iż jest to rozwiązanie bardziej zalecane w grach (wydajność)

Po prostu twórz nowy obiekt w momencie naciśnięcia klawisza (strzał) i zapisuj go do tablicy.