Return to Video

Więcej o Interakcji z myszką

  • 0:01 - 0:05
    Robiliśmy animację piłki
    odbijającej się od ścian.
  • 0:05 - 0:08
    Użyliśmy funkcji rysowania
    i instrukcji warunkowych.
  • 0:08 - 0:12
    Określiliśmy zmienne
    dla pozycji i prędkości piłki.
  • 0:12 - 0:17
    W funkcji rysowania, wywoływanej
    raz po raz przez program,
  • 0:17 - 0:21
    malujemy tło i rysujemy elipsę.
  • 0:21 - 0:25
    Punkt zależy od zmiennej
    pozycji oraz prędkości
  • 0:25 - 0:27
    i tego, jak na siebie wpływają.
  • 0:28 - 0:31
    Bez instrukcji warunkowych
    piłka leciała i leciała,
  • 0:31 - 0:33
    aż wcisnęliśmy „restart”.
  • 0:33 - 0:36
    Dodaliśmy dwie instrukcje warunkowe,
  • 0:36 - 0:41
    żeby sprawdzić, czy piłka
    jest blisko lewej lub prawej krawędzi,
  • 0:41 - 0:45
    a wtedy zmienialiśmy kierunek,
    żeby piłka się odbijała.
  • 0:46 - 0:50
    Teraz piłka będzie się odbijała
    w nieskończoność.
  • 0:50 - 0:54
    Fajna rzecz. W ten sposób
    można zrobić wiele animacji.
  • 0:54 - 0:57
    Teraz włączę do programu
    interakcję z użytkownikiem.
  • 0:57 - 1:00
    Na razie - to jak program w TV.
  • 1:00 - 1:03
    Jeśli dacie go koledze,
    który nie umie programować,
  • 1:03 - 1:07
    nie zrobi nic poza patrzeniem.
  • 1:07 - 1:10
    To jest niezłe, ale lepiej
    byłoby coś zrobić.
  • 1:10 - 1:13
    Dajmy użytkownikowi
    kontrolę nad piłką.
  • 1:13 - 1:17
    Pamiętacie, jak uczyliśmy się
    o zmiennych globalnych
  • 1:17 - 1:20
    „mouseX” i „mouseY”?
  • 1:21 - 1:26
    Zwracają liczby mówiące o bieżącej
    pozycji myszki użytkownika.
  • 1:26 - 1:28
    Dzięki nim program
    będzie interaktywny.
  • 1:29 - 1:31
    Pomyślmy - jak je wykorzystać?
  • 1:31 - 1:35
    Gdzieś wewnątrz funkcji rysowania.
  • 1:35 - 1:39
    Bo to jedyny stale wywoływany
    kod w trakcie działania programu.
  • 1:39 - 1:42
    Wszystko spoza „draw”
    jest wywoływane raz,
  • 1:43 - 1:44
    gdy program się uruchamia.
  • 1:44 - 1:48
    Nie ma sensu używać tam
    „mouseX” i „mouseY”.
  • 1:48 - 1:50
    Żadnej szansy na interakcję.
  • 1:51 - 1:54
    W „draw” teraz rysujemy piłkę
  • 1:55 - 1:57
    200 pikseli w dół ekranu.
  • 1:57 - 2:01
    A gdybyśmy zastąpili to „mouseY”?
  • 2:01 - 2:02
    Bo to jest pozycja „y”.
  • 2:03 - 2:08
    Program doda pozycję „y”
    zależnie od pozycji „y” użytkownika.
  • 2:09 - 2:10
    Patrzcie:
  • 2:10 - 2:12
    Poruszając kursorem w pionie,
  • 2:12 - 2:15
    zmieniam trasę
    poruszania się piłki. I super!
  • 2:16 - 2:18
    Ale chcę też użyć „mouseX”.
  • 2:18 - 2:22
    Jak to zrobić?
    Może zaprogramujmy drugą piłkę.
  • 2:22 - 2:26
    Niech przemieszcza się
    w górę i w dół.
  • 2:27 - 2:31
    Wtedy użytkownik
    będzie kontrolował pozycję „x”.
  • 2:31 - 2:34
    Zrobimy odwrotnie
    niż poprzednio. Elipsa...
  • 2:34 - 2:39
    „mouseX” pozycja: 50,50.
  • 2:40 - 2:42
    Spójrzcie!
  • 2:42 - 2:47
    Mam dwie piłki, poruszające się
    prostopadle do siebie.
  • 2:48 - 2:50
    Ale to jeszcze nie to.
  • 2:50 - 2:53
    Chcę więcej kontroli
    dla użytkownika!
  • 2:53 - 2:57
    Żeby sam mógł stworzyć
    drugą piłkę.
  • 2:57 - 3:01
    Po prostu wciskając
    przycisk myszki.
  • 3:02 - 3:07
    Tylko jak powiedzieć programowi,
    że ktoś wciska przycisk?
  • 3:08 - 3:13
    Na szczęście mamy do tego
    wyjątkową zmienną logiczną.
  • 3:13 - 3:18
    Nazywa się „mouseIsPressed”
    i używamy jej w instrukcji warunkowej.
  • 3:19 - 3:22
    Zobaczmy. To druga piłka.
  • 3:22 - 3:25
    Możemy więc napisać: „if” (jeśli)
  • 3:25 - 3:27
    „mouseIsPressed”,
  • 3:28 - 3:32
    i przenosimy tu dwukropek elipsy.
  • 3:32 - 3:36
    Tutaj mówimy programowi,
  • 3:36 - 3:41
    że ma narysować tę elipsę
    tylko jeśli to jest prawda.
  • 3:41 - 3:45
    A „mouseIsPressed” jest prawdą,
    gdy użytkownik wciska klawisz myszki.
  • 3:45 - 3:47
    Spróbujmy.
  • 3:50 - 3:53
    Piłka pojawi się,
    gdy wcisnę przycisk myszki.
  • 3:53 - 3:58
    Przylatuje ze wszechświata
    równoległego. Jest! Jest!
  • 3:58 - 4:00
    Świetnie!
  • 4:00 - 4:05
    W zmiennej „mouseIsPressed”
    ciekawe jest to,
  • 4:05 - 4:10
    że zmienia się zależnie od działania
    użytkownika, a nie programu.
  • 4:10 - 4:13
    A że funkcja „draw”
    jest wywoływana raz po raz,
  • 4:13 - 4:16
    wynik będzie się zmieniał,
  • 4:16 - 4:19
    z małą pomocą użytkownika.
  • 4:19 - 4:22
    Dzięki połączonym siłom instrukcji
    warunkowej i „mouseIsPressed”,
  • 4:22 - 4:28
    macie wszystko, żeby robić
    świetne programy do rysowania.
Title:
Więcej o Interakcji z myszką
Description:

To jest nagranie ekranu z naszego interaktywnego wprowadzenia do kodowania, zrobione żeby ułatwić pracę nad napisami i tłumaczeniami. Lepiej obejrzeć właściwe wprowadzenie tutaj:
https://pl.khanacademy.org/cs/programming/
more » « less
Video Language:
English
Duration:
04:29

Polish subtitles

Revisions

Our website uses cookies for analysis purposes.