Розробка уроку — практичної роботи

Тема: рух об’єктів: імітація руху об'єктів та моделювання гри мовою програмування PHP.

Мета: сформувати предметні компетенції щодо технологій імітації руху та моделювання гри.

Учень повинен пояснювати:

Учень повинен вміти:

Обладнання: комп'ютери з встановленими ОС та інтегрованим середовищем програму­вання мовою PHP (наприклад, XAMPP), (дана) інструкція.

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

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

Хід уроку

1. Організаційний момент
Вітання з класом. Перевірка присутності і готовності учнів до уроку. Мотивування учнів: Чи легко створити хоча б простеньку комп'ютерну гру? Сьогодні ми спробуємо це зробити на прикладі гри "Пінг-Понг".

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

PHP виконує вказівки з боку сервера на відміну, наприклад, від Javascript. При спробі створити гру мовою PHP потрібно врахувати, що хід гравця буде враховано лише як певний запит з боку користувача на сервер з викликом певного коду на виконання. Створювати такий запит натисканням кнопки для відправлення даних, введених у поля форми, дуже незручно. Щонайменше, для гравців. Наразі визначення того, яку клавішу натиснуто на клавіатурі чи яку кнопку мишки натиснути засобами лише PHP вимагає додаткового встановлення спеціальних бібліотек.

Набагато легше використати (запозичити) опрацювання натискання клавіш засобами Javascript. Наприклад, таким способом:

<input type='text' size='1' onkeydown='f(event)' autofocus>
<script>
function f (event)
{ var c = event.keyCode;
  if (c==38) location.href=  'up.php';
  if (c==40) location.href='down.php';
}
</script>

Поданий код передбачає створення поля введення з встановленим фокусом. Натискання довільної клавіші буде спричиняти таке:

У свою чергу функція f визначає код натиснутої клавіші і діє таким чином:

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

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

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

Затримка й встановлення часу виконання коду php можуть бути викликані дією таких вказівок:

sleep (2);                 // Затримка на 2 секунди (аргумент - ціле число секунд)
usleep (3000000);          // Затримка на 3 секунди (аргумент - ціле число мікросекунд)
time_nanosleep (1, 500);   // Затримка на 1 секунду і 500 наносекунд
time_sleep_until ($t);     // Затримка до часу $t (у секундах) з 1979 року
$t=time();                 // Поточний час (у секундах) з 1979 року
set_time_limit (4);        // Встановлення часу виконання коду 4 секунди 
set_time_limit (0);        // Встановити необмежений час виконання коду
exit("текст");             // припинення виконання коду з виведенням рядка "текст"

Спрямування на іншу сторінку через певний час можна здійснити, викорис­тавши функцію header. Наприклад, вказівка:

header('Refresh: 3; URL=new.html');

 спрямовує через 3 секунди на файл new.html поточної теки. Як значення URL можна вказати шлях на файл ПК чи ресурс мережі. Для перевантаження сторінки можна не вказати адреси URL. На жаль, при пере- чи завантаженні сторінок змінні не буде збережено в оперативній пам'яті. Їх можна передати за допомогою запиту або запису у файл.

Приклад роботи з файлом

<php
$f = fopen('ping-pong.in','r'); // відкриття файлу ping-pong.in на зчитування даних
$s = fgets($f);                 // зчитування рядка з файлу 
fclose($f);                     // закриття файлу
$s[strlen($s)-1]='!';           // заміна останнього символа рядка на '!'
$f = fopen('ping-pong.in','w'); // відкриття файлу ping-pong.in на запис даних
fwrite($f, $s);                 // запис рядка у файл 
fclose($f);                     // закриття файлу
>

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

Завдання 1. Створити код html, який, використовуючи контейнер div і файл зображення білого круга на прозорому тлі, подає поле для гри у "Пінг-Понг" такого вигляду.

Порівняти отримане з очікуваним.

Виконання наступних завдань 2-4 полягає у створенні комплекса з 4 програм, які завантажують одна одну за такою схемою.

up.php
(врахування натискання
клавіші зі стрілкою вгору)
↕

ping-pong.php
    (починає роботу)

↕		↔ start.php
(зміна значення одного параметра
для переходу до гри: початок руху
м'яча і надання можливості впли­вати
на розташування ракетки, у сторону
якої рухається м'яч)
down.php
(врахування натискання
клавіші зі стрілкою вниз)

На початку своєї роботи кожна програма зчитує дані з файлу ping-pong.in крім того випадку, коли ping-pong.php працює при відсутності ping-pong.in на самому початку роботи.

` Завдання 2. Створити код ping-pong.php, який втілює такий алгоритм.

  1. При наявності файлу ping-pong.in зчитати значення параметрів гри (тут і далі у такому порядку): $w, $h, $a, $b, $d, $u, $v, $dx_min, $dx_max, $dy_max, $y0, $y1, $x, $y, $dx, $dy, $s0, $s1, $s. Інакше, тобто при відсутності файлу ping-pong.in, надати переліченим параметрам такі початкові значення:

    $w  = 780;    // ширина ігрового поля
$h  = 400;    // висота ігрового поля
$a  = 10;     // ширина "ракетки"
$b  = 50;     // висота "ракетки"
$d  = 20;     // діаметр зображення м'яча
$u  = 10;     // відступ від лівого краю вікна браузера
$v  = 10;     // відступ від верхнього краю вікна браузера
$dx_min = 10; // нижня  межа абсолютної величини приросту абсцици "м'яча"
$dx_max = 15; // верхня межа абсолютної величини приросту абсцици "м'яча"
$dy_max = 9;  // верхня межа величини приросту ординати "м'яча"
$y0 = $v + ($h-$b)/2;         // ордината ЛВК "ракетки" ліворуч
$y1 = $v + ($h-$b)/2;         // ордината ЛВК "ракетки" праворуч
$x  = $u + ($w-$d)/2;         // абсциса  ЛВК зображення м'яча
$y  = $v + ($h-$d)/2;         // ордината ЛВК зображення м'яча
$dx = rand( $dx_min,$dx_max); // випадковий приріст абсциси  ЛВК зображення м'яча при зміні кадру
$dy = rand(-$dy_max,$dy_max); // випадковий приріст ординати ЛВК зображення м'яча при зміні кадру
$s0 = 0;                      // кількість очок "ракетки" ліворуч
$s1 = 0;                      // кількість очок "ракетки" ліворуч
$s  = 0; /* стан гри:
         0 - очікування натискання кнопки з написом "Почати нову гру"
         1 - процес гри: рух м'яча з відбаванням від горизонтальних меж поля і "ракеток" */
     і записує усі ці значення у файл ping-pong.in.

  2. Якщо гру розпочато ($s==1), змінити координати ЛВК зображення м'яча з урахуванням такого:

    • прямолінійний рівномірний рух всередині ігрового поля;

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

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

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

  3. Записати значення змінених параметрів у файл з назвою ping-pong.in.

  4. Графічно подати стан гри, вивівши вказівкою echo код html, створений при виконанні завдання 1, з "вкрапленнями" позначень параметрів.

  5. Залежно від значення $s зобразити кнопку з написом: "Почати нову гру" ($s==0) або поле для керування "ракетками" ($s==1). Натискання на кнопку з написом: "Почати нову гру" має призводити до завантаження файлу start.php. Натискання клавіш зі стрілочками вгору чи вниз під час гри має призводити до завантаження файлу відповідно up.png чи down.png (див. вище зауваження щодо використання Javascript з боку клієнта).

  6. Встановити паузу 1/5 секунди для виконання програми.

  7. Перезавантажити файл ping-pong.php.

Завдання 3. Створити код start.php, який переводить роботу кодів зі стану очікування ($s==0) у стан гри ($s==1). Інакше кажучи, зчитує рядок даних з файлу ping-pong.in, замінює оснанній символ 0 на 1 і записує змінений рядок у файл ping-pong.in.

Завдання 4. Створити коди up.php i down.php, які втілюють такий алгоритм.

  1. Зчитати значення параметрів гри з файлу ping-pong.in.
  2. Графічно подати стан гри.
  3. Зменшити (в up.php) чи збільшити (в down.php) на $dy_max ординату ЛВК "ракетки":
    • лівої — при русі ліворуч ($dx < 0);
    • правої — при русі праворуч ($dx > 0).
    Але "ракетки" мають залишатися у межах ігрового поля.
  4. Записати значення параметрів у файл ping-pong.in.
  5. Завантажити файл ping-pong.php.

Завдання 5. Перевірити правильність дії кодів.

У разі потреби внести зміни у програми. Коди програм записати у теку, вказану вчителем. Порівняти отримане з демонстраційними розв'язаннями: ping-pong.php, start.php, up.php, down.php.

5. Закріплення вивченого матеріалу
Обрати чи придумати гру, яку буде створено при виконанні домашнього завдання, узгодити свій вибір з учителем, при потребі обговорити шляхи її програмного втілення. Наприклад, гра шахи (ведення протоколу, відображення поточного стану, перевірка коректності ходів) при грі двох користувачів.

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

7. Домашнє завдання
Створити комп'ютерну гру, вибрану у класі для домашнього завдання.

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