1
00:00:01,164 --> 00:00:04,437
Wiecie już, jak stworzyć tablicę
i dostać się do niej.

2
00:00:04,537 --> 00:00:06,315
Tak jak pozostałe zmienne,

3
00:00:06,415 --> 00:00:08,568
tablice mają świetną cechę:

4
00:00:08,668 --> 00:00:10,706
możemy je zmieniać dynamicznie

5
00:00:10,806 --> 00:00:13,043
w trakcie działania programu.

6
00:00:13,143 --> 00:00:15,348
Pokażę, o co mi chodzi.

7
00:00:15,448 --> 00:00:20,712
Ten program wyświetla
Hopper z balonikami. Ślicznie!

8
00:00:21,408 --> 00:00:25,100
Mamy tablicę pozycji „x”,

9
00:00:25,200 --> 00:00:27,021
zawierającą dwie liczby,

10
00:00:27,121 --> 00:00:29,678
które pokazują,
gdzie mają być baloniki.

11
00:00:29,778 --> 00:00:32,049
A tutaj mamy pętlę

12
00:00:32,150 --> 00:00:35,480
przechodzącą przez każdy
element w tej tablicy.

13
00:00:35,580 --> 00:00:40,309
Dla każdego elementu, pętla rysuje
kreskę od „x” do ręki Hopper,

14
00:00:40,409 --> 00:00:43,816
a potem w pozycji „x”
rysuje elipsę

15
00:00:43,916 --> 00:00:47,415
o wymiarach 30 na 40 pikseli.
Nasz balonik.

16
00:00:47,515 --> 00:00:48,692
Fajnie!

17
00:00:48,792 --> 00:00:51,223
Już wiemy, jak to działa.

18
00:00:51,323 --> 00:00:54,125
Chcąc wyświetlić kolejny balonik,

19
00:00:54,225 --> 00:00:56,772
dodamy liczbę do tablicy.

20
00:00:56,872 --> 00:00:58,537
Np. - 300.

21
00:00:58,637 --> 00:01:02,090
Pięknie! Teraz mamy trzy baloniki,
a Hopper się cieszy.

22
00:01:03,065 --> 00:01:06,919
Ale powiedzmy, że chcemy
nauczyć użytkownika,

23
00:01:07,019 --> 00:01:08,498
który nie programuje,

24
00:01:08,598 --> 00:01:10,751
jak dodawać nowe baloniki.

25
00:01:10,851 --> 00:01:14,320
Program powinien
mówić użytkownikowi:

26
00:01:14,420 --> 00:01:17,856
„Kliknij tam, gdzie chcesz balonik,
a on się pokaże”.

27
00:01:17,956 --> 00:01:20,503
Byłoby świetnie, prawda? Tak sądzę.

28
00:01:20,603 --> 00:01:23,601
A zatem... jak to zrobić?

29
00:01:23,701 --> 00:01:26,401
Chcemy, by program
zmieniał się w czasie.

30
00:01:26,501 --> 00:01:28,274
Gdy użytkownik kliknie,

31
00:01:28,374 --> 00:01:30,418
w tym miejscu pokaże się balonik.

32
00:01:30,518 --> 00:01:34,714
Najpierw włóżmy wszystko
w funkcję „draw”,

33
00:01:34,814 --> 00:01:37,802
żeby ułatwić zmiany.

34
00:01:38,313 --> 00:01:40,403
Zacznijmy tutaj.

35
00:01:40,503 --> 00:01:43,143
I jeszcze to... Świetnie!

36
00:01:43,243 --> 00:01:48,344
Teraz sprawdzimy, czy użytkownik
właśnie wciska przycisk myszki.

37
00:01:48,444 --> 00:01:50,248
Przyda się instrukcja warunkowa.

38
00:01:50,348 --> 00:01:52,732
Jeśli przycisk jest wciśnięty,

39
00:01:53,800 --> 00:01:56,564
to program musi coś zrobić. Co?

40
00:01:56,664 --> 00:02:01,463
Po wciśnięciu przycisku
niech program dodaje coś do tablicy.

41
00:02:01,563 --> 00:02:04,342
Zróbmy z powrotem dwa elementy.

42
00:02:04,442 --> 00:02:07,895
Chcemy dodać liczbę do tablicy.

43
00:02:07,995 --> 00:02:10,751
Pokażę wam jeden sposób.

44
00:02:10,851 --> 00:02:13,143
Piszemy: xPositions...

45
00:02:13,243 --> 00:02:15,116
nawias kwadratowy, dwójka...

46
00:02:15,650 --> 00:02:17,694
= mouseX.

47
00:02:18,437 --> 00:02:21,154
Zaraz zobaczycie, że to działa.

48
00:02:22,216 --> 00:02:25,194
Kliknęłam i pokazał się balonik.

49
00:02:25,294 --> 00:02:27,469
Co zrobił program? Powiedział...

50
00:02:28,538 --> 00:02:30,376
xPositions[2] mówi:

51
00:02:30,476 --> 00:02:34,273
„Znajdź tablicę
i element z numerem 2”.

52
00:02:34,373 --> 00:02:38,429
Pamiętajcie, że to trzeci element,
bo tablica zaczyna się od 0.

53
00:02:38,529 --> 00:02:42,005
Ale trzeciego elementu nie ma.
To miejsce jest puste.

54
00:02:42,105 --> 00:02:45,701
Program mówi: „Znajdź miejsce
i ustaw mouseX”.

55
00:02:45,801 --> 00:02:47,740
Ponieważ nie ma tam nic,

56
00:02:47,840 --> 00:02:51,316
po prostu pojawia się
„mouseX”.

57
00:02:51,416 --> 00:02:54,497
Teraz tablica ma trzy elementy.

58
00:02:54,597 --> 00:02:59,583
A pętla FOR, przechodząc tędy,
narysuje trzeci balonik.

59
00:03:00,465 --> 00:03:03,829
Super! Poklikam jeszcze,
zobaczycie, jak to działa.

60
00:03:03,929 --> 00:03:06,293
Za każdym razem, gdy klikam,

61
00:03:06,393 --> 00:03:08,714
pojawia się trzeci balonik.

62
00:03:08,814 --> 00:03:10,473
Tam, gdzie kliknę myszką.

63
00:03:11,402 --> 00:03:14,025
To dlatego, że ciągle zmieniamy...

64
00:03:14,838 --> 00:03:18,832
miejsce drugie. Z numerem 2.

65
00:03:18,932 --> 00:03:23,151
Ciągle to zmieniamy,
podając bieżącą pozycję mouseX.

66
00:03:23,251 --> 00:03:26,100
Zawsze będą tylko trzy baloniki,

67
00:03:26,200 --> 00:03:28,230
ten w punkcie 0,

68
00:03:28,330 --> 00:03:31,162
ten w punkcie 1...
I stale zmieniamy...

69
00:03:32,183 --> 00:03:34,130
punkt nr 2. W porządku?

70
00:03:34,749 --> 00:03:35,879
To jest dobre,

71
00:03:35,979 --> 00:03:39,869
ale chcemy, żeby użytkownik
robił masę baloników!

72
00:03:39,969 --> 00:03:42,632
Każde kliknięcie to nowy balonik.

73
00:03:43,379 --> 00:03:47,276
Czyli musimy stale zwiększać

74
00:03:47,376 --> 00:03:50,597
numer elementu tablicy,
w którym to przechowujemy.

75
00:03:50,697 --> 00:03:55,496
Nie zawsze ma być 2,
tylko 2, 3, 4, 5, 6 itd.

76
00:03:56,216 --> 00:03:59,185
Zrobimy to dzięki
zmiennej liczącej.

77
00:03:59,285 --> 00:04:00,790
Napiszemy „newInd=2”.

78
00:04:00,890 --> 00:04:02,439
Od tego zaczniemy.

79
00:04:02,539 --> 00:04:05,597
Tu napiszemy „newInd” zamiast „2”,

80
00:04:05,697 --> 00:04:09,475
ale docelowo ma być „newInd++”.

81
00:04:09,575 --> 00:04:11,657
Czyli za każdym razem dodajemy 1.

82
00:04:11,757 --> 00:04:13,004
Zaczynamy od 2,

83
00:04:13,549 --> 00:04:16,834
potem jest 3, 4...
Za każdym kliknięciem - więcej.

84
00:04:16,935 --> 00:04:18,043
Spróbujmy!

85
00:04:18,252 --> 00:04:20,127
Hura! Mnóstwo baloników!

86
00:04:20,226 --> 00:04:21,944
Balonikowe szaleństwo!

87
00:04:22,043 --> 00:04:24,126
Fajnie, prawda?

88
00:04:24,708 --> 00:04:27,122
Ale to nie jest najlepsza metoda.

89
00:04:27,222 --> 00:04:28,469
Okazuje się,

90
00:04:28,569 --> 00:04:32,044
że będziemy często
dodawać elementy do tablicy.

91
00:04:32,144 --> 00:04:34,715
Jest znacznie prostszy sposób.

92
00:04:34,815 --> 00:04:37,896
Skasuję to, co napisaliśmy...

93
00:04:37,996 --> 00:04:40,907
To już nie jest potrzebne.

94
00:04:41,007 --> 00:04:42,377
Cofamy.

95
00:04:42,477 --> 00:04:45,442
Robimy tak. Piszemy: „xPositions”,

96
00:04:46,073 --> 00:04:48,132
potem kropka, „push”

97
00:04:48,232 --> 00:04:50,226
i „mouseX”.

98
00:04:50,916 --> 00:04:56,237
Przywołujemy tę metodę
w tablicy „xPositions”.

99
00:04:56,337 --> 00:04:58,353
Wydajemy polecenie.

100
00:04:58,453 --> 00:05:02,254
Mówimy: „Wepchnij nową wartość,

101
00:05:02,354 --> 00:05:05,342
czyli mouseX, na koniec tablicy“.

102
00:05:05,442 --> 00:05:09,080
Przy każdym przywołaniu,
czyli gdy ktoś klika myszką,

103
00:05:09,180 --> 00:05:12,494
program spojrzy na „mouseX”
i umieści to na końcu tablicy.

104
00:05:12,594 --> 00:05:15,118
Tablica będzie się zatem powiększać.

105
00:05:15,218 --> 00:05:16,859
Zacznijmy od nowa.

106
00:05:17,648 --> 00:05:22,247
Udało się! A program jest krótszy
niż przedtem!

107
00:05:23,082 --> 00:05:27,401
Na ogół będziecie używać „push”,
żeby dodać elementy do tablicy.

108
00:05:27,501 --> 00:05:31,541
I świetnie: tablice rosną
w czasie trwania programu.

109
00:05:31,641 --> 00:05:36,224
Np. przy animacji, albo gdy użytkownik
coś robi... Możliwości jest dużo.

110
00:05:36,324 --> 00:05:41,542
Widzieliście 90% tego, do czego
używa się tablic - i jak się to robi.

111
00:05:41,642 --> 00:05:43,864
Ale to nie wszystko.

112
00:05:43,964 --> 00:05:47,045
Jeśli macie pytania, zadawajcie je.

113
00:05:47,145 --> 00:05:49,738
Tylko najpierw opanujcie podstawy!