< Return to Video

Більше взаємодії з мишею (відео версія)

  • 0:01 - 0:02
    У попередньому відео, ми показали як
  • 0:02 - 0:05
    ви можете мультиплікувати м'яч,
    щоб він відскакував від стін
  • 0:05 - 0:07
    використовуючи функцію "draw"
    та умовні оператори "if".
  • 0:07 - 0:08
    Пригадаймо все.
  • 0:08 - 0:12
    Спочатку, ми визначаємо початкові змінні
    для визначення розташування і швидкості м'яча.
  • 0:12 - 0:15
    Тоді, у фінкції "draw",
    що є спеціальною функцією
  • 0:15 - 0:17
    яка викликається кожного разу, коли
    виконується програма,
  • 0:17 - 0:21
    ми змінюємо колір фону
    і малюємо еліпс в редакторі
  • 0:21 - 0:24
    і визначаємо розташування цього еліпса
    на основі змінних "position"
  • 0:24 - 0:27
    та "speed"
    і як вони впливають один на одного.
  • 0:27 - 0:29
    Тепер, без умовного оператора "if"
  • 0:29 - 0:31
    наш м'яч буде просто безперервно рухатись
  • 0:31 - 0:33
    доки ми не натиснемо кнопку "перезапустити".
  • 0:33 - 0:37
    Тому ми додали 2 умовних оператори "if"
    тут знизу, щоб перевірити і побачити
  • 0:37 - 0:39
    чи був м'яч близько до правої сторони екрану
  • 0:39 - 0:40
    або до лівої сторони екрану.
  • 0:40 - 0:43
    І якщо так, ми змінюєм швидкість на
    додатнє або від'ємне значення
  • 0:43 - 0:45
    так, щоб м'яч
    міг просто відскакувати назад.
  • 0:45 - 0:49
    Отже, тепер у нас є просто м'яч,
    що відскакуватиме вічно, вперед і назад.
  • 0:50 - 0:51
    Це було досить круто
  • 0:51 - 0:52
    і насправді існує ще багато
    класних анімацій
  • 0:52 - 0:54
    які ми можемо використати.
  • 0:54 - 0:57
    А зараз, я хочу додати інтерфейс
    користувача до цієї програми.
  • 0:57 - 1:00
    Погляньте, прямо зараз,
    ця програма виглядає як Телешоу.
  • 1:00 - 1:01
    Якщо ви поділились нею зі своїми друзями,
  • 1:01 - 1:03
    і вони не знають як
    програмувати,
  • 1:03 - 1:05
    вони не зможуть з нею взаємодіяти.
  • 1:05 - 1:07
    Все, що вони могли б робити - це
    спостерігати, що є досить непогано,
  • 1:07 - 1:10
    але було б трохи краще, якби
    вони могли б зробити хоть щось.
  • 1:10 - 1:13
    Що ж, спробуймо надати користувачу
    способи управління нею.
  • 1:13 - 1:15
    Пам'ятаєте, раніше ми дізналися
  • 1:15 - 1:20
    про дві спеціальні глобальні змінні,
    що називаються "mouseX" і "mouseY".
  • 1:21 - 1:23
    Вони повертають числа,
  • 1:23 - 1:26
    що вказують нам на поточне розташування
    миші користувача
  • 1:26 - 1:28
    і вони є хорошим способом,
    щоб зробити програму більш інтерактивною.
  • 1:29 - 1:31
    Тож, подивімось як ми можем
    використати їх.
  • 1:31 - 1:34
    Що ж, нам потрібно використати їх
    десь всередині функції "draw".
  • 1:35 - 1:36
    Тому що це єдиний код,
  • 1:36 - 1:39
    що викликається щоразу,
    коли запускається програма.
  • 1:39 - 1:43
    Все, що знаходиться за межами функції "draw",
    викликається тільки один раз,
  • 1:43 - 1:45
    при першому запуску програми.
  • 1:45 - 1:48
    Тому, немає сенсу використовувати
    там змінні "mouseX" та "mouseY".
  • 1:48 - 1:50
    Користувач не матиме можливості
    взаємодіяти з нею.
  • 1:51 - 1:57
    Зараз у функції "draw" ми малюємо м'яч на відстані
    200 пікселів від нижньої частини екрана.
  • 1:57 - 2:00
    Чому б нам не замінити цей параметр
    змінною "mouseY"?
  • 2:01 - 2:02
    Оскільки це позиція "Y", чи не так?
  • 2:02 - 2:08
    В такий спосіб ми додамо "Y" позицію, що
    залежить від позиції "Y" користувача.
  • 2:08 - 2:10
    Чи не так? Тож оцініть.
  • 2:10 - 2:12
    Рухаючи свій курсор вниз і вгору
  • 2:12 - 2:14
    я можу змінювати лінію
    уздовж якої рухається м'яч.
  • 2:14 - 2:15
    Це досить не погано.
  • 2:16 - 2:20
    Але я хочу, також використати "mouseX"
    Отже, як мені це зробити?
  • 2:20 - 2:22
    А чому б нам не створити ще один м'яч
  • 2:22 - 2:26
    і матимемо м'ячі, що рухатимуться у
    протилежних напрямках: вгору та вниз.
  • 2:27 - 2:31
    І ми матимемо елемент для користувацького
    управління позицією "X".
  • 2:31 - 2:38
    Таким чином, ми просто зробимо навпаки.
    Еліпсу присвоїмо параметри: mouseX, position, 50, 50.
  • 2:40 - 2:42
    Отже, погляньте.
  • 2:42 - 2:49
    У мене є два м'ячі, які я контролюю,
    і вони рухаються в перпендикулярних напрямках.
  • 2:49 - 2:53
    Але, я все ще не задоволена. Я хочу,
    надати користувачеві ще більший контроль.
  • 2:53 - 2:57
    Я хочу надати користувачу здатність
    запускати другий м'яч.
  • 2:57 - 3:01
    Щоб фактично створювати його клацаючи
    мишею.
  • 3:02 - 3:04
    Тоді мені потрібно з'ясувати
  • 3:04 - 3:07
    як повідомити, що користувач
    клацає мишею.
  • 3:08 - 3:13
    На щастя, для цього у нас є супер спеціальна
    логічна змінна.
  • 3:13 - 3:18
    Вона називається "mouseIsPressed" і ми
    можемо використати її в операторі "if".
  • 3:19 - 3:22
    Що ж, погляньмо. Це наш другий м'яч.
  • 3:22 - 3:27
    То ми можемо написати "if"
    "mouseIsPressed"
  • 3:28 - 3:31
    і тоді ми переставимо код еліпса туди.
  • 3:32 - 3:34
    Отже, те що ми робимо тут,
  • 3:34 - 3:39
    це говоримо програмі, що ми лише хочемо
    намалювати цей еліпс
  • 3:39 - 3:44
    якщо оператор "if" істинний і
    "mouseIsPressed" буде тільки істинна,
  • 3:44 - 3:45
    якщо користувач натискає мишею.
  • 3:45 - 3:49
    Отже, спробуймо. Та дааам!
  • 3:50 - 3:53
    Тож тепер я можу змусити м'яч з'являтися
    кожного разу, коли я натискаю клавішу миші.
  • 3:53 - 3:55
    І він з'являється з паралельного всесвіту.
  • 3:55 - 3:59
    З'явись! З'явись! З'явись!
    Це приголомшливо!
  • 4:00 - 4:04
    Отже, найцікавіше про змінну
    "mouseIsPressed"
  • 4:04 - 4:07
    це те, що вона виконується в залежності
    від дій користувача,
  • 4:07 - 4:10
    а не від дій нашої програми.
  • 4:10 - 4:13
    і так як функція "draw"
    викликається повторювано знову і знову,
  • 4:13 - 4:16
    результат нашої програми буде змінюватись
    з плином часу.
  • 4:16 - 4:18
    з невеликим вводом даних від користувача.
  • 4:19 - 4:22
    Разом з оператором "mouseIsPressed"
    та змінною "mouseIsPressed",
  • 4:22 - 4:23
    ви маєте все, що вам потрібно
  • 4:23 - 4:26
    щоб зробити дивовижні речі такі як кнопки,
    та прогами, що малюють.
  • 4:27 - 4:33
    Переклад на українську мову виконав Соломаха Іван, Благодійний фонд "MagneticOne.org"
Title:
Більше взаємодії з мишею (відео версія)
Description:

Це просто демонстрація екрану нашої інтерактивної бесіди щодо кодування, готової щоб полегшити створення перекладу і субтитрів. Краще дивитися наші бесіди тут:
https://www.khanacademy.org/cs/programming/
more » « less
Video Language:
English
Duration:
04:29

Ukrainian subtitles

Revisions

Our website uses cookies for analysis purposes.