Jak zrobić prostą grę przeglądarkową bez użycia Java Script

w dniu



 



☝ 01_pole_gry




Etap 1 — Pole gry (plansza)

Plik: 01_pole_gry.html

01_pole_gry

Co tu powstaje?

  • Strona z tytułem i opisem.

  • Prostokątna plansza (div .board) – jeszcze nic się nie rusza.

Najważniejsze elementy

  1. Zmienne CSS w :root

    • --w i --h trzymają wymiary planszy.

    • Dzięki temu łatwo zmienić rozmiar w jednym miejscu.

  2. Wyśrodkowanie całej strony

    • body { display: grid; place-items: center; }

    • Prosty sposób, żeby wszystko było na środku.

  3. Plansza .board

    • border tworzy ramkę.

    • position: relative jest kluczowe: wszystko, co będzie w środku z position: absolute, liczy pozycję względem tej planszy.

    • overflow: hidden ucina elementy, które “wyjadą” poza planszę.



 ☝ 02_ziemia_i_kwadrat


Etap 2 — Ziemia i postać (kwadrat)

Plik: 02_ziemia_i_kwadrat.html

02_ziemia_i_kwadrat

Co dodajemy?

  • Linię “ziemi” (div .ground)

  • Czarny kwadrat (div .square) — na razie stoi w miejscu

Najważniejsze nowe pojęcia

  1. position: absolute

    • .ground i .square są pozycjonowane absolutnie względem .board, bo .board ma position: relative.

  2. Linia ziemi

    • left: 0; right: 0; → rozciąga na całą szerokość.

    • bottom: 34px → podnosi linię nad dół planszy.

  3. Kwadrat

    • Ma rozmiar --size.

    • Ustawiony przez left: 20px; top: 46px;


 ☝ 03_ruch_css_keyframes

Etap 3 — Ruch kwadratu (animacja CSS)

Plik: 03_ruch_css_keyframes.html

03_ruch_css_keyframes

Co dodajemy?

  • Animację CSS, dzięki której kwadrat “ucieka” po planszy.

Kluczowe mechanizmy

  1. @keyframes roam

    • To “scenariusz ruchu” zapisany w procentach czasu.

    • Każdy punkt ustawia transform: translate(x, y).

  2. animation na kwadracie

    • animation: roam var(--speed) linear infinite;

    • var(--speed) steruje czasem: większe = wolniej.

    • linear = stałe tempo (bez przyspieszania i zwalniania).

    • infinite = zapętlenie.

  3. Dlaczego transform, a nie left/top?

    • transform jest zwykle płynniejszy i wydajniejszy.

    • will-change: transform sugeruje przeglądarce, że element będzie animowany.

  4. Responsywność

    • Jest @media (max-width: 560px) → zmniejsza planszę i kwadrat na małych ekranach.


 ☝ 04_final_zlap_kwadrat


Etap 4 — Final: “Złap kwadrat” bez JavaScript

Plik: 04_final_zlap_kwadrat_bez_js.html

04_final_zlap_kwadrat_bez_js

Cel etapu

Zrobić “mechanikę gry” bez JS, używając sprytnego triku:

  • ukryty checkbox przechowuje stan gry: złapany / nie złapany

  • kwadrat jest <label>, więc kliknięcie go zaznacza checkbox

Jak to działa krok po kroku?

  1. Stan gry = checkbox

    • <input id="caught" type="checkbox" />

    • Jest niewidoczny (opacity 0) i nieklikalny (pointer-events none), ale nadal działa.

  2. Kwadrat to label

    • <label for="caught" class="runner"></label>

    • Kliknięcie w label automatycznie przełącza checkbox #caught (to HTML-owa funkcja formularzy).

  3. Zatrzymanie ruchu po złapaniu

    • CSS:

      • #caught:checked ~ .board .runner { animation-play-state: paused; }

    • Czyli: jeśli checkbox zaznaczony → wstrzymaj animację.

  4. Komunikat “ZŁAPANY!”

    • .msg jest na środku planszy, ale domyślnie opacity: 0.

    • Po złapaniu:

      • #caught:checked ~ .board .msg { opacity: 1; }

  5. Reset gry też bez JS

    • Reset to drugi label wskazujący na ten sam checkbox:

      • <label class="reset" for="caught">ZAGRAJ JESZCZE RAZ</label>

    • Kliknięcie go przełącza checkbox z powrotem (odznacza) → gra wraca do stanu “nie złapany”.

  6. Dodatkowe utrudnienie (hover = szybciej)

    • Gdy najedziesz na planszę/kwadrat, czas animacji się skraca (robi się trudniej trafić).








Komentarze

Prześlij komentarz