Тема: створення комп’ютерної моделі процесу взаємопов’язаного функціону­вання двох чи більше об’єктів за допомогою мови PHP.

Мета: навчитися створювати комп’ютерну модель процесу взаємопов’язаного функціонування двох чи більше об’єктів за допомогою мови php, вдосконалювати уміння визначати зв'язки між об'єктами, представляти їх у нових взаємозв'язках; формувати обізнаність про можливості ПК як інструменту навчально-пізнавальної діяльності. Після виконання роботи учень:

• описує: процес розв’язування задачі з використанням комп’ютерної моделі;
• уміє:
  • використовувати змінні для розв’язування задач;
  • надавати значення змінним та змінювати їх;
  • використовувати змінні при розгалуженні й повторенні.

Обладнання: ПК з встановленою ОС, браузером, середовищем програмування мовою php (наприклад, XAMPP).

Структура уроку

1. Організаційний момент.
2. Актуалізація опорних знань.
3. Інструктаж з ТБ.
4. Вироблення практичних навичок.
5. Підбиття підсумків уроку.
6. Домашнє завдання.

Хід уроку

1. Організаційний момент
Вітання з класом. Перевірка присутності і готовності учнів до уроку. Перевірка виконання домашнього завдання.

2. Актуалізація опорних знань

Умовний оператор
if (логічний вираз) оператор;
if (логічний вираз) оператор₁ else оператор₂;

Алгоритмічна структура повторення
while (логічний вираз) вказівка;
do {вказівки циклу} while (логічний вираз);
for (вказівки_початку; умова_циклу; вказівки_кінця_ітерації) {вказівки циклу}

PHP виконує вказівки з боку сервера на відміну, наприклад, від Javascript. Потреба постійно повертатися на сервер означає потребу постійного перезавантаження веб-сторінок. На жаль, якщо робити це дуже часто, спостерігатимемо мерехтіння екрану. Інколи цього можна позбутися, якщо замість імпортування зображення (тег img), що складається переважно з одноколірних прямокутників, розташувати відповідним чином блоки з певним кольором тла. Наприклад, таким чином:

• у заголовку (контейнер head) вказати стиль:

  <style>
    .field { width:360px;
            height:360px;
  background-color:green;
          position:absolute;
              left:10px;
               top:10px}
  </style>

• у тілі сторінки (контейнер body) вказати використання блоку:

  <div class='field'> </div>

У цьому випадку на спорінці з відступами 10px по вертикалі й горизонталі від верхнього лівого кута сторінки буде зображено квадрат зі стороною 360px зеленого кольору.

Примітка. Насправді, наявність чи відсутність мерехтіння екрану істотно залежить не стільки від коду, скільки від потужності ПК і віддаленості сервера. Тому при роботі з малопотужним ПК вимушені змиритися з таким мерехтінням.

Передавання значень при переході до іншого коду php можна здійснити за допомогою:

• допоміжного файлу (цей спосіб буде розглянуто пізніше);

• $_GET — асоціативного масиву змінних, переданих рядком запиту. Цей спосіб було використано при втіленні гри "Хрестики-нулики". Тому на цьому уроці обмежитися іншим (наступним) способом передавання даних;

• сесії — спеціального способу збереження даних між кількома послідов­ними доступами. Кожному відвідувачу сайту надають унікальний ідентифікатор сесії. Його зберігають або у файлі cookie на стороні користувача, або передають через URL-адресу. Використання сесії дозволяє зберігати дані запиту у глобальному масиві $_SESSION. У момент доступу відвідувача до сайту PHP перевіряє, чи ідентификатор сесії було надіслано разом із запитом:

  • автоматично — при встановленні session.auto_start;
  • за запитом — при виклику session_start().

  Якщо це так, то буде надано доступ до збережених раніше даних.

Останні два способи передавання даних продемонструємо такими прикладами.

Рядки адрес браузерів після завантаження файлів a2.php і b2.php будуть (з точністю до початку) такими:

В обох випадках буде виведено значення змінної $d з файлу, який буде завантажено спочатку: "Дані файлу *1.php".

При оновленні сторінки чи спрямуванні на іншу сторінку час виконанні цих операцій може перевищувати бажаний проміжок часу на оновлення зображення. У цьому випадку (наприклад, при поданні руху об'єктів виключно засобами PHP, як це вимагається у завданнях 1 і 2) штучну затримку влаштовувати недоцільно. На жаль, при цьому проміжок часу між оновленнями може змінюватися залежно від стану сервера і мережі.

rand($a,$b) — випадкове ціле число з [$a, $b].
Header("Location:1.php"); — негайна переадресація на файл 1.php.
Header('Refresh: 0'); — негайне оновлення поточної сторінки.

3. Інструктаж з ТБ
4. Вироблення практичних навичок

Завдання 1. Створити проект «Рухомий квкадрат», що відображає рух оранжевого квадрата у межах зеленого квадрата з такими значеннями параметрів:

• 360 — стала довжина сторони зеленого квадрата;

• 20 — початкова довжина сторони помаранчевого квадрата;

• 2 — приріст довжини сторони квадрата між послідовними кадрами;

• 4 — величина зменшення координат лівої верхньої вершини квадрата між послідовними кадрами.

Таким чином, помаранчевий квадрат рухається по діагоналі знизу вгору і справа наліво зі збільшенням розміру. У початковий момент праві нижні вершини квадратів збігаються. При досягненні помаранчевим квадратом верхньої і лівої меж зеленого квадрату рух починається спочатку (показ зациклено).

Створені файли:

• 0.php — надання початкових значень;

• 1.php — зміна властивостей помаранчевого квадрата, побудоваа зображень квадратів, перевантаження 1.php або перенаправлення на 0.php при доягненні помаранчевим квадратом верхньої і лівої меж зеленого квадрату

записати у вказану вчителем теку. Порівняти створене з очукуваним: 0, 1.

Завдання 2. Створити проект «Злипання квадратів», в якому:

• спочатку є 25 квадратів зі стороною 10 пікселів випадкових кольорів з випадковими початковими координатами і початковими швидкостями (приростами координат між кадрами);

• проєкції початкових швидкостей квадратів — випадкові цілі числа у межах від -10 до 10 включно;

• квадрати рухаються прямокутним чорним полем розміру 760 × 560 рівномірно і прямолінійно до дзеркального відбивання від його меж або до дотику з іншим квадратом;

• при кожному такому дотику двох квадратів відбувається злипання і перетворення двох квадратів на один при збереженні маси (пропорційна площі) й імпульсу руху (сума добутків мас і швидкостей);

• центр O новоствореного квадрата є центром мас квадратів, що злипаються. Інакшк кажучи, він поділяє відрізок, що сполучає O₁, O₂ — центри квадратів — у відношенні, оберненому до відношення S₁ і S₂ — площ відповідних квадратів:

  O₁O : OO₂ = S₂ : S₁

• кольором новоутвореного квадрата стає колір, у якому інтенсивності кольорів (R, G, B) моделі RGB є відношенням суми добутків інтенсивностей (R₁, G₁, B₁), (R₂, G₂, B₂), і площ квадратів S₁, S₂ до суми площ квадратів:

  R = (R₁ S₁ + R₂ S₂) / (S₁ + S₂);
  G = (G₁ S₁ + G₂ S₂) / (S₁ + S₂);
  B = (B₁ S₁ + B₂ S₂) / (S₁ + S₂).

Вказівки до виконання

1. Створити файл 2.php, у якому:

   • надано початкових значень координатам, швидкостям і кольорам рухомих квадратів;

   • використано сесію для збереження наданих значень;

   • здійснено перехід до файлу 3.php.

2. Створити файл 3.php, у якому:

   • використано сесію для отримання значень параметрів моделі (усі дійсні, крім площ квадратів);

   • запрограмовано:

     • відображення всіх наявних об'єктів для переданих значень параметрів моделі;

     • прямолінійний рівномірний рух квадратів;

     • відбивання від меж чорного прямокутника;;

     • перебір всіх можливих пар квадратів щодо можливості злиття у даному кадрі (квадрати дотикаються) або між поточним і попереднім кадром (квадрати перетинаються);

     • злиття квадратів з усіма зауваженнями щодо площ, швидкостей, координат і кольорів;

     • зменшення на 1 кількості дисків після злиття пари дисків;

     • зміна координат при відбиванні від країв після злиття;

     • використання сесії для збереження значень парараметрів моделі для наступного кадру;

     • оновлення сторінки;

Примітка. Вказівка: «Надати початкових випадкових значень коодинатам і швидкостям» передбачає розташування кругів без самоперетинів. Якщо учень не знає, як це зробити, він може розташувати диски з перетинами і застосувати процедуру злиття дисків для отримання початкового стану. Але таке відхилення від плану понижує оцінку на 1 бал.

5. Підбиття підсумків уроку
Виставлення оцінок.

6. Домашнє завдання
У разі потреби завершити роботу над завданням 2. Порівняти з очікуваним: 2, 3.

Завдання 3. Створити програму «Папуги», в якому є такі персонажі: Рудий Кіт та 6 папуг — по два червоного, жовтого та зеленого кольору. Папуги сидять по колу, їх занумеровано послідовними натуральними числами від 1 до 6. Рудий Кіт — у центрі кола. З інтервалом 3 секунди Кіт називає два різні випадкові натуральні числа у межах від 1 до 6 включно — номери папуг. Якщо ці папуги однакового кольору, нічого не відбувається. Інакше, якщо їхній колір різний, вони змінюють свій колір на один і той самий, який відмінний від кольору їх обох. Зображення знайти або виготовити самостійно.

Текст упорядкував Олександр Рудик.