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

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

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

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

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

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

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

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

Хід уроку

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

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

Javascript виконує вказівки з боку клієнта на відміну, наприклад, від PHP. Якщо код Javascript повністю втілює всі можливі варіанти перебігу гри без потреби звертатися із запитом до сервера, перебіг гри може бути дуже динамічним. На відміну, наприклад, від реалізації тієї самої гри мовою PHP.

Запис коду здійснюють такою вказівкою Javascript:

document.write("код HTML");

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

Встановлення спостерігача події здійснюють вказівкою:

document.addEventListener
( "назва_події",
  function(event){вказівки_обробника_події}
)

Наприклад, вивести код натиснутої клавіші можна таким чином:

document.addEventListener
( "keydown",
  function(event) {alert(event.keyCode);}
)

Код натиснутої клавіші отримують як event.keyCode. Для виконання завдання уроку достатньо знати такі коди:

• 38 — клавіша ArrowUp зі стрілкою вгору;
• 40 — клавіша ArrowDown зі стрілкою вниз;
• 87 — клавіша w;
• 90 — клавіша z.

Для визначення коду довільної клавіші зручно використати online-сервіс.

Виведення зображень прямокутників можна здійснити, викорис­тав­ши блоки (контейнер div) з певним кольором тла, а не імпортуючи зображення (тег img). Наприклад, таким чином:

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

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

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

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

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

Доступ до значення властивості об'єкта мовою Javascrip здійсню­ють за допомогою вказівки доступу за ідентифікатором (властивість id). Наприклад, вказівка:

document.getElementById('button').style.visibility = 'hidden';

приховує об'єкт з назвою 'button'. Аналогічно, можна змінювати колір тла, розташування й розміри тощо.

Таймер дає можливість запрограмувати виклик функції f або виконання вказівок коду code (у лапках) через інтервал часу t (у мілісекундах) з необов'язковим переліком a1, a2, … (через кому) аргументів функції:

• setTimeout (f | code, t, a1, a2, …) — однократне;
• setInterval (f | code, t, a1, a2, …) — багатократне.

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

Завдання 1. Створити код html, тіло якого (контейнер body) містить лише код Javascript. А код Javascript містить таке.

• надання початкових значень параметрам гри:

  var 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 = Math.trunc(dx_min + Math.random()*(dx_max-dx_min)), // випадковий приріст абсциси  ЛВК зображення м'яча при зміні кадру
      dy = Math.trunc((1 - 2 * Math.random())*dy_max),         // випадковий приріст ординати ЛВК зображення м'яча при зміні кадру
      s0 = 0,                   // кількість очок "ракетки" ліворуч
      s1 = 0,                   // кількість очок "ракетки" ліворуч

• опис стилю і розташування блоків (контейнери style і div) за допомогою вказівки:
  
  document.write("код HTML");
  
  з метою отримати такий вигляд сторінки.

  

  В описі кнопки передбачити виклик функції від події f(event) при натисканні клавіші чи кнопки миші

  <input type='button' value='Почати гру' onkeydown='f(event)' onmousedown='f(event)' autofocus>

  при фокусі на кнопці.

• опис фунції f(event), яка приховує кнопку і виводить повідомлення: "Можемо рухатися далі!".

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

Завдання 2. У створеному коді функції f(event) вказівку виведення повідомлення на виклик кожні 0,2 секунди деякої функції g. У коді функції g подати такий алгоритм.

1. Змінити координати ЛВК блока зображення м'яча:

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

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

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

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

2. Збільшити або зменшити ординату ЛВК "ракетки":
   • праворуч при натиснутій клавіші зі стрілочкою відповідно вгору чи вниз;
   • ліворуч при натиснутій клавіші відповідно w чи z;

   "Ракетки" мають постійно залишатися у межах ігрового поля.

3. Перевірити правильність дії кодів. У разі потреби внести зміни у програму.
4. Код HTML + Javascript записати у теку, вказану вчителем.
5. Порівняти отримане з демонстраційними розв'язанням.

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

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

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

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