WEBVTT

00:00:01.082 --> 00:00:02.115
У попередньому відео, ми показали як

00:00:02.115 --> 00:00:04.588
ви можете мультиплікувати м'яч,
щоб він відскакував від стін

00:00:04.588 --> 00:00:07.175
використовуючи функцію "draw"
та умовні оператори "if".

00:00:07.175 --> 00:00:08.223
Пригадаймо все.

00:00:08.493 --> 00:00:11.996
Спочатку, ми визначаємо початкові змінні
для визначення розташування і швидкості м'яча.

00:00:12.196 --> 00:00:14.744
Тоді, у фінкції "draw",
що є спеціальною функцією

00:00:14.744 --> 00:00:17.197
яка викликається кожного разу, коли 
виконується програма,

00:00:17.287 --> 00:00:20.731
ми змінюємо колір фону
і малюємо еліпс в редакторі

00:00:20.731 --> 00:00:23.536
і визначаємо розташування цього еліпса
на основі змінних "position"

00:00:23.536 --> 00:00:26.848
та "speed"
і як вони впливають один на одного.

00:00:27.468 --> 00:00:28.905
Тепер, без умовного оператора "if"

00:00:28.905 --> 00:00:31.116
наш м'яч буде просто безперервно рухатись

00:00:31.116 --> 00:00:32.921
доки ми не натиснемо кнопку "перезапустити".

00:00:32.921 --> 00:00:36.823
Тому ми додали 2 умовних оператори "if" 
тут знизу, щоб перевірити і побачити

00:00:36.823 --> 00:00:39.134
чи був м'яч близько до правої сторони екрану

00:00:39.134 --> 00:00:40.329
або до лівої сторони екрану.

00:00:40.329 --> 00:00:43.263
І якщо так, ми змінюєм швидкість на
додатнє або від'ємне значення

00:00:43.263 --> 00:00:45.442
так, щоб м'яч
міг просто відскакувати назад.

00:00:45.442 --> 00:00:49.455
Отже, тепер у нас є просто м'яч,
що відскакуватиме вічно, вперед і назад.

00:00:49.955 --> 00:00:51.095
Це було досить круто

00:00:51.095 --> 00:00:52.398
і насправді існує ще багато 
класних анімацій

00:00:52.398 --> 00:00:53.805
які ми можемо використати.

00:00:53.805 --> 00:00:57.117
А зараз, я хочу додати інтерфейс
користувача до цієї програми.

00:00:57.477 --> 00:00:59.936
Погляньте, прямо зараз,
ця програма виглядає як Телешоу.

00:01:00.086 --> 00:01:01.314
Якщо ви поділились нею зі своїми друзями,

00:01:01.494 --> 00:01:03.122
і вони не знають як
програмувати,

00:01:03.122 --> 00:01:04.817
вони не зможуть з нею взаємодіяти.

00:01:04.817 --> 00:01:07.435
Все, що вони могли б робити - це
спостерігати, що є досить непогано,

00:01:07.435 --> 00:01:09.933
але було б трохи краще, якби
вони могли б зробити хоть щось.

00:01:10.193 --> 00:01:12.744
Що ж, спробуймо надати користувачу 
способи управління нею.

00:01:13.264 --> 00:01:15.335
Пам'ятаєте, раніше ми дізналися

00:01:15.335 --> 00:01:20.032
про дві спеціальні глобальні змінні,
що називаються "mouseX" і "mouseY".

00:01:20.901 --> 00:01:22.708
Вони повертають числа,

00:01:22.708 --> 00:01:25.790
що вказують нам на поточне розташування
миші користувача

00:01:25.790 --> 00:01:27.857
і вони є хорошим способом,
щоб зробити програму більш інтерактивною.

00:01:28.867 --> 00:01:30.811
Тож, подивімось як ми можем 
використати їх.

00:01:30.811 --> 00:01:34.201
Що ж, нам потрібно використати їх
десь всередині функції "draw".

00:01:34.631 --> 00:01:36.153
Тому що це єдиний код,

00:01:36.183 --> 00:01:38.582
що викликається щоразу,
коли запускається програма.

00:01:39.272 --> 00:01:42.557
Все, що знаходиться за межами функції "draw",
викликається тільки один раз,

00:01:42.557 --> 00:01:44.572
при першому запуску програми.

00:01:44.623 --> 00:01:47.594
Тому, немає сенсу використовувати
там змінні "mouseX" та "mouseY".

00:01:47.594 --> 00:01:50.242
Користувач не матиме можливості
взаємодіяти з нею.

00:01:50.862 --> 00:01:56.769
Зараз у функції "draw" ми малюємо м'яч на відстані
200 пікселів від нижньої частини екрана.

00:01:56.969 --> 00:02:00.204
Чому б нам не замінити цей параметр
змінною "mouseY"?

00:02:00.944 --> 00:02:02.440
Оскільки це позиція "Y", чи не так?

00:02:02.440 --> 00:02:07.832
В такий спосіб ми додамо "Y" позицію, що
залежить від позиції "Y" користувача.

00:02:07.832 --> 00:02:09.511
Чи не так? Тож оцініть.

00:02:09.831 --> 00:02:11.661
Рухаючи свій курсор вниз і вгору

00:02:11.661 --> 00:02:14.226
я можу змінювати лінію
уздовж якої рухається м'яч.

00:02:14.226 --> 00:02:14.940
Це досить не погано.

00:02:15.850 --> 00:02:19.906
Але я хочу, також використати "mouseX" 
Отже, як мені це зробити?

00:02:19.906 --> 00:02:22.068
А чому б нам не створити ще один м'яч

00:02:22.068 --> 00:02:26.268
і матимемо м'ячі, що рухатимуться у 
протилежних напрямках: вгору та вниз.

00:02:26.988 --> 00:02:31.035
І ми матимемо елемент для користувацького
управління позицією "X".

00:02:31.035 --> 00:02:38.270
Таким чином, ми просто зробимо навпаки.
Еліпсу присвоїмо параметри: mouseX, position, 50, 50.

00:02:39.967 --> 00:02:41.970
Отже, погляньте.

00:02:41.970 --> 00:02:48.544
У мене є два м'ячі, які я контролюю,
і вони рухаються в перпендикулярних напрямках.

00:02:48.731 --> 00:02:53.429
Але, я все ще не задоволена. Я хочу, 
надати користувачеві ще більший контроль.

00:02:53.429 --> 00:02:56.845
Я хочу надати користувачу здатність
запускати другий м'яч.

00:02:56.845 --> 00:03:00.900
Щоб фактично створювати його клацаючи
мишею.

00:03:02.000 --> 00:03:03.621
Тоді мені потрібно з'ясувати

00:03:03.621 --> 00:03:06.759
як повідомити, що користувач 
клацає мишею.

00:03:07.760 --> 00:03:12.524
На щастя, для цього у нас є супер спеціальна 
логічна змінна.

00:03:12.674 --> 00:03:18.336
Вона називається "mouseIsPressed" і ми
можемо використати її в операторі "if".

00:03:19.126 --> 00:03:21.707
Що ж, погляньмо. Це наш другий м'яч.

00:03:21.797 --> 00:03:26.920
То ми можемо написати "if" 
"mouseIsPressed"

00:03:28.330 --> 00:03:30.995
і тоді ми переставимо код еліпса туди.

00:03:31.898 --> 00:03:33.930
Отже, те що ми робимо тут,

00:03:33.930 --> 00:03:39.301
це говоримо програмі, що ми лише хочемо
намалювати цей еліпс

00:03:39.301 --> 00:03:43.603
якщо оператор "if" істинний і
"mouseIsPressed" буде тільки істинна,

00:03:43.603 --> 00:03:45.483
якщо користувач натискає мишею.

00:03:45.483 --> 00:03:49.222
Отже, спробуймо. Та дааам!

00:03:49.702 --> 00:03:52.697
Тож тепер я можу змусити м'яч з'являтися
кожного разу, коли я натискаю клавішу миші.

00:03:52.697 --> 00:03:54.950
І він з'являється з паралельного всесвіту.

00:03:55.050 --> 00:03:58.963
З'явись! З'явись! З'явись! 
Це приголомшливо!

00:03:59.806 --> 00:04:04.500
Отже, найцікавіше про змінну 
"mouseIsPressed"

00:04:04.500 --> 00:04:07.254
це те, що вона виконується в залежності
від дій користувача,

00:04:07.254 --> 00:04:09.523
а не від дій нашої програми.

00:04:09.523 --> 00:04:13.362
і так як функція "draw"
викликається повторювано знову і знову,

00:04:13.362 --> 00:04:16.004
результат нашої програми буде змінюватись
з плином часу.

00:04:16.004 --> 00:04:17.684
з невеликим вводом даних від користувача.

00:04:18.605 --> 00:04:22.264
Разом з оператором "mouseIsPressed"
та змінною "mouseIsPressed",

00:04:22.264 --> 00:04:23.201
ви маєте все, що вам потрібно

00:04:23.301 --> 00:04:26.427
щоб зробити дивовижні речі такі як кнопки,
та прогами, що малюють.

00:04:26.566 --> 00:04:32.606
Переклад на українську мову виконав Соломаха Іван, Благодійний фонд "MagneticOne.org"