Informatyka – klasa 4

Moja pierwsza gra w przeglądarce – Mini Asteroids

Na tej lekcji uruchomisz własną grę z pliku HTML. Najpierw skopiujesz gotowy kod, zapiszesz go jako plik gra.htm, a potem odpalisz w przeglądarce na swoim komputerze.

1. Co będziesz robić?

Dzisiaj wcielasz się w rolę twórcy gry. Nie musisz wszystkiego rozumieć w kodzie – Twoim zadaniem jest:

skopiować gotowy kod gry,
poprawnie zapisać plik na komputerze,
uruchomić grę w przeglądarce,
później spróbować zmienić kilka elementów (kolor tła, tekst, itp.).

2. Instrukcja krok po kroku – jak uruchomić grę

Na pulpicie utwórz nowy folder o nazwie Moje gry.
Wróć do tej strony (lekcji) i zjedź niżej do czarnego okienka z kodem gry.
Kliknij przycisk 📋 KOPIUJ KOD GRY – cały kod gry trafi do schowka.
Otwórz program Notatnik (Start → wpisz „Notatnik”).
W Notatniku wklej kod: użyj skrótu Ctrl + V.
Wybierz z menu Plik → Zapisz jako… i ustaw:
- Nazwa pliku: gra.htm
- Typ pliku: „Wszystkie pliki (*.*)” (jeśli jest taka opcja)
Jako miejsce zapisu wybierz folder Moje gry na pulpicie.
Kliknij Zapisz, zamknij Notatnik.
Otwórz folder Moje gry i znajdź plik gra.htm.
Kliknij dwukrotnie plik gra.htm – gra otworzy się w przeglądarce.
Jeśli widzisz czarne okno z kosmicznym statkiem – brawo, gra działa! 🎮

3. Sterowanie w grze

W grze „Mini Asteroids” sterujesz statkiem kosmicznym:

← – obrót statku w lewo
→ – obrót statku w prawo
↑ – ciąg (statek przyspiesza)
Spacja – strzał

Twoim zadaniem jest niszczyć asteroidy i unikać zderzeń. Wynik punktowy jest pokazany pod grą.

4. Kod gry – kliknij, aby skopiować

Ten kod wkleisz do pliku gra.htm w Notatniku.

Kod gry: Mini Asteroids (plik: gra.htm)

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Mini Asteroids – wersja uczniowska</title>
  <style>
    body {
      margin: 0;
      background: radial-gradient(circle at top, #111827, #020617);
      color: #e5e7eb;
      font-family: Arial, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      min-height: 100vh;
    }

    h1 {
      margin: 10px 0 0 0;
      font-size: 20px;
      letter-spacing: 1px;
    }

    #info {
      font-size: 13px;
      margin: 4px 0 10px 0;
      opacity: 0.8;
      text-align: center;
    }

    #game {
      background: #000000;
      border: 2px solid #1f2937;
      border-radius: 10px;
      margin-bottom: 10px;
    }

    #hud {
      font-size: 13px;
      opacity: 0.9;
      text-align: center;
      margin-bottom: 10px;
    }

    .key {
      display: inline-block;
      padding: 2px 6px;
      border-radius: 4px;
      background: #111827;
      border: 1px solid #4b5563;
      font-size: 11px;
      margin: 0 2px;
    }
  </style>
</head>
<body>
  <h1>Mini Asteroids – lokalnie w HTML</h1>
  <div id="info">
    Sterowanie:
    <span class="key">←</span>
    <span class="key">→</span> obrót statku,
    <span class="key">↑</span> ciąg,
    <span class="key">SPACJA</span> strzał.
  </div>

  <!-- Płótno gry -->
  <canvas id="game" width="800" height="600"></canvas>

  <div id="hud">
    Trafione asteroidy: <span id="score">0</span> |
    Jeśli zginiesz – gra wystartuje od nowa.
  </div>

  <script>
    const canvas = document.getElementById("game");
    const ctx = canvas.getContext("2d");

    const scoreEl = document.getElementById("score");

    const WIDTH = canvas.width;
    const HEIGHT = canvas.height;

    // *** STATEK ***
    const ship = {
      x: WIDTH / 2,
      y: HEIGHT / 2,
      angle: 0,        // w radianach
      vx: 0,
      vy: 0,
      radius: 15
    };

    const keys = {
      left: false,
      right: false,
      up: false,
      shoot: false
    };

    let bullets = [];
    let asteroids = [];
    let score = 0;
    let canShoot = true;

    function resetGame() {
      ship.x = WIDTH / 2;
      ship.y = HEIGHT / 2;
      ship.vx = 0;
      ship.vy = 0;
      ship.angle = 0;

      bullets = [];
      asteroids = [];
      score = 0;
      scoreEl.textContent = score;

      // tworzymy kilka asteroid na starcie
      for (let i = 0; i < 6; i++) {
        createAsteroid();
      }
    }

    function createAsteroid() {
      // asteroida pojawia się losowo na krawędziach ekranu
      let edge = Math.floor(Math.random() * 4);
      let x, y;

      if (edge === 0) { // lewa
        x = 0;
        y = Math.random() * HEIGHT;
      } else if (edge === 1) { // prawa
        x = WIDTH;
        y = Math.random() * HEIGHT;
      } else if (edge === 2) { // góra
        x = Math.random() * WIDTH;
        y = 0;
      } else { // dół
        x = WIDTH;
        y = HEIGHT;
      }

      const speed = 0.5 + Math.random() * 1.2;
      const angle = Math.random() * Math.PI * 2;

      const asteroid = {
        x: x,
        y: y,
        vx: Math.cos(angle) * speed,
        vy: Math.sin(angle) * speed,
        radius: 25 + Math.random() * 25
      };

      asteroids.push(asteroid);
    }

    // *** WEJŚCIE Z KLAWIATURY ***
    window.addEventListener("keydown", (e) => {
      if (e.code === "ArrowLeft") keys.left = true;
      if (e.code === "ArrowRight") keys.right = true;
      if (e.code === "ArrowUp") keys.up = true;
      if (e.code === "Space") {
        if (canShoot) {
          shoot();
          canShoot = false;
        }
        e.preventDefault(); // żeby strona się nie przewijała
      }
    });

    window.addEventListener("keyup", (e) => {
      if (e.code === "ArrowLeft") keys.left = false;
      if (e.code === "ArrowRight") keys.right = false;
      if (e.code === "ArrowUp") keys.up = false;
      if (e.code === "Space") {
        canShoot = true;
      }
    });

    // *** STRZAŁ ***
    function shoot() {
      const bulletSpeed = 5;
      const bx = ship.x + Math.cos(ship.angle) * ship.radius;
      const by = ship.y + Math.sin(ship.angle) * ship.radius;

      bullets.push({
        x: bx,
        y: by,
        vx: Math.cos(ship.angle) * bulletSpeed,
        vy: Math.sin(ship.angle) * bulletSpeed,
        life: 60 // ile klatek pocisk "żyje"
      });
    }

    // *** GŁÓWNA PĘTLA GRY ***
    function update() {
      // obrót statku
      const rotationSpeed = 0.06;
      if (keys.left) ship.angle -= rotationSpeed;
      if (keys.right) ship.angle += rotationSpeed;

      // ciąg statku
      const thrust = 0.12;
      if (keys.up) {
        ship.vx += Math.cos(ship.angle) * thrust;
        ship.vy += Math.sin(ship.angle) * thrust;
      }

      // "tarcze" – małe tarcie, żeby statek nie przyspieszał w nieskończoność
      ship.vx *= 0.995;
      ship.vy *= 0.995;

      // aktualizacja pozycji statku
      ship.x += ship.vx;
      ship.y += ship.vy;

      // zawijanie na krawędziach ekranu
      wrapObject(ship);

      // aktualizacja pocisków
      bullets.forEach((b) => {
        b.x += b.vx;
        b.y += b.vy;
        b.life--;
      });

      // usuwamy pociski poza ekranem / po czasie życia
      bullets = bullets.filter((b) =>
        b.life > 0 &&
        b.x >= 0 && b.x <= WIDTH &&
        b.y >= 0 && b.y <= HEIGHT
      );

      // aktualizacja asteroid
      asteroids.forEach((a) => {
        a.x += a.vx;
        a.y += a.vy;
        wrapObject(a);
      });

      // kolizje pocisków z asteroidami
      for (let i = asteroids.length - 1; i >= 0; i--) {
        const a = asteroids[i];
        for (let j = bullets.length - 1; j >= 0; j--) {
          const b = bullets[j];
          const dx = a.x - b.x;
          const dy = a.y - b.y;
          const dist = Math.sqrt(dx * dx + dy * dy);

          if (dist < a.radius) {
            // trafiona asteroida
            asteroids.splice(i, 1);
            bullets.splice(j, 1);
            score++;
            scoreEl.textContent = score;

            // rozpad na mniejsze kawałki, jeśli duża
            if (a.radius > 20) {
              for (let k = 0; k < 2; k++) {
                asteroids.push({
                  x: a.x,
                  y: a.y,
                  vx: (Math.random() - 0.5) * 2,
                  vy: (Math.random() - 0.5) * 2,
                  radius: a.radius * 0.6
                });
              }
            }
            break;
          }
        }
      }

      // kolizja statku z asteroidami
      for (let i = 0; i < asteroids.length; i++) {
        const a = asteroids[i];
        const dx = a.x - ship.x;
        const dy = a.y - ship.y;
        const dist = Math.sqrt(dx * dx + dy * dy);

        if (dist < a.radius + ship.radius * 0.7) {
          // statek zniszczony – reset gry
          resetGame();
          break;
        }
      }

      // jeśli asteroid jest mało – dodaj kolejne
      if (asteroids.length < 4) {
        createAsteroid();
      }

      draw();
      requestAnimationFrame(update);
    }

    function wrapObject(obj) {
      if (obj.x < 0) obj.x = WIDTH;
      if (obj.x > WIDTH) obj.x = 0;
      if (obj.y < 0) obj.y = HEIGHT;
      if (obj.y > HEIGHT) obj.y = 0;
    }

    // *** RYSOWANIE ***
    function drawShip() {
      ctx.save();
      ctx.translate(ship.x, ship.y);
      ctx.rotate(ship.angle);

      // kadłub – trójkąt
      ctx.beginPath();
      ctx.moveTo(ship.radius, 0);          // czubek
      ctx.lineTo(-ship.radius * 0.8, ship.radius * 0.7);
      ctx.lineTo(-ship.radius * 0.8, -ship.radius * 0.7);
      ctx.closePath();
      ctx.strokeStyle = "#e5e7eb";
      ctx.lineWidth = 2;
      ctx.stroke();

      // płomyk przy ciągu
      if (keys.up) {
        ctx.beginPath();
        ctx.moveTo(-ship.radius * 0.8, 0);
        ctx.lineTo(-ship.radius * 1.6, 4);
        ctx.lineTo(-ship.radius * 1.6, -4);
        ctx.closePath();
        ctx.fillStyle = "#f97316";
        ctx.fill();
      }

      ctx.restore();
    }

    function drawBullets() {
      ctx.fillStyle = "#facc15";
      bullets.forEach((b) => {
        ctx.beginPath();
        ctx.arc(b.x, b.y, 2.5, 0, Math.PI * 2);
        ctx.fill();
      });
    }

    function drawAsteroids() {
      ctx.strokeStyle = "#9ca3af";
      ctx.lineWidth = 2;
      asteroids.forEach((a) => {
        ctx.beginPath();
        ctx.arc(a.x, a.y, a.radius, 0, Math.PI * 2);
        ctx.stroke();
      });
    }

    function draw() {
      ctx.clearRect(0, 0, WIDTH, HEIGHT);

      // tło gwiazd
      ctx.fillStyle = "#000000";
      ctx.fillRect(0, 0, WIDTH, HEIGHT);

      drawShip();
      drawBullets();
      drawAsteroids();
    }

    // start gry
    resetGame();
    update();
  </script>
</body>
</html>

Uwaga: jeśli plik nie działa, sprawdź, czy na pewno ma nazwę gra.htm (a nie np. gra.htm.txt).

Zadania dodatkowe

Spróbuj samodzielnie:

Zmień tytuł strony (tekst między <title>...</title>).
Zmień kolor tła gry – znajdź background: w stylach.
Zmień tekst „Mini Asteroids – lokalnie w HTML” na własny tytuł.
Spróbuj zmienić szerokość i wysokość płótna gry (atrybuty width i height w <canvas>).

Zapamiętaj

Aby gra działała:
• plik musi mieć rozszerzenie .htm lub .html,
• otwierasz go w przeglądarce (Chrome, Edge itp.),
• internet nie jest potrzebny – to gra z Twojego komputera.

KLASA 4 • Informatyka / Przyroda

Zwierzęta świata – wyszukiwanie informacji w sieci

Termin oddania: wpisz datę

Pobierz plik DOCX z pytaniami, znajdź odpowiedzi w wiarygodnych źródłach internetowych, uzupełnij tabelę w dokumencie, zapisz plik pod właściwą nazwą i odeślij do nauczyciela przez formularz.

Pobierz plik z zadaniem (DOCX).
Jeśli otworzy się w przeglądarce, kliknij prawym przyciskiem i wybierz „Zapisz link jako…”, a następnie otwórz z dysku.

Pobierz „Zwierzęta_swiata_klasa4.docx” Zobacz bezpośredni link
Otwórz plik i włącz edytowanie.
Użyj Microsoft Word lub LibreOffice Writer. W razie monitu wybierz „Włącz edytowanie”.
Uzupełnij odpowiedzi w tabeli.
Pod każdą odpowiedzią wpisz Źródło informacji (link lub tytuł strony). Korzystaj z wiarygodnych stron (encyklopedie, muzea, organizacje naukowe).
Zapisz plik z poprawną nazwą.
Format .docx. Nazwa pliku: Kl4_Nazwisko_Imie_Zwierzeta.docx (np. Kl4_Kowalska_Ala_Zwierzeta.docx).
Wyślij plik do nauczyciela przez formularz.
Upewnij się, że dołączasz właściwy plik i wpisujesz poprawne dane.

Prześlij plik nauczycielowi Wyślij mailem (alternatywa)

Wskazówka: zanim wyślesz – sprawdź, czy w tabeli przy każdej odpowiedzi jest wpisane źródło i czy plik ma właściwą nazwę.

Dobre miejsca do startu: Britannica Kids, National Geographic Kids, strony parków narodowych i muzeów przyrodniczych.

Masz problem z plikiem?

Zainstaluj bezpłatny LibreOffice (Writer) i otwórz plik .docx.
Jeśli link otwiera się w przeglądarce – użyj „Zapisz link jako…”, a potem otwórz plik z dysku.