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

Тема: створення моделей рівномірного прямолінійного руху об’єкта, руху об’єкта на площині з перешкодами та з вибором шляху мовою Javascript.

Мета: надати учням приклад створення моделі руху об’єкта на площині з перешкодами мовою Javascript.

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

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

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

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

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

Дати тлумачення таким вказівкам мовою Javascript.

for (i=1; i<4, i++) {…;}

switch (i)
{ case 0:
    i=0;
    break;
  case 1:
    i=11;
    break;
  case 2:
    i=222;
  break;
}

if (b)
  i=0;
else
  i=1;

t = new Array();
t.push(x);
t=[];

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

3. Вивчення нового матеріалу
Створення комп'ютерної моделі рівномірного прямолінійного руху об’єкта на площині з оминанням перешкод

передбачає:

Завантаження, подання й опрацювання зображення можна втілити засобами canvas. Для програмного втілення достатньо використати опис таких розділів (перейти за посиланнями й ознайомитися):

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

Для успішної роботи коду, що показує рух білого круга зліва направо зі "зламом перешкод" жовтого кольору ((255, 255, 0) у моделі RGB) на темно зеленому тлі ((0, 128, 0) у моделі RGB), тека з програмою має містити файл зображення поля з перешкодами field.png. Перевірку коду потрібно здійснювати з використанням сайту, моделюючи його роботу за допомогою XAMPP.

При виконанні завдання 2 (див. далі) потрібно доповнити код функції move програмним втіленням алгоритму руху площиною з оминанням перешкод. Таке доповнення обов'яз­ково міститиме визначення інтенсивностей кольорів окре­мих пікселів.

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

Завдання 1. Скласти алгоритм руху об’єкта прямокутним полем з оминанням перешкод (наприклад, відрізків прямих ліній) при таких обмеженнях:

Вхідні дані (розташування перешкод і співвідношення між розмірами поля, об'єкта й величиною стрибка) ґарантують існування розв'язку — відповідної траєкторії руху.

Створений за допомогою конкурсу ідей алгоритм проходження лабіринту у темноті без його схеми порівняти з очікуваним.

Алгоритм (діяти до досягнення правої сторони поля)

  1. Вважати:
    • напрям руху → (зліва направо);
    • номер стану гри 0 — об'єкт не дотикається до перешкоди.
  2. Рухатися вперед до досягнення перешкоди.
  3. Змінити номер стану гри на 1 — об'єкт обходить перешкоду.
  4. Запам'ятати розташування об'єкта.
  5. Змінити поточний напрям руху на перший з можливих у послідовності ↑, ←, ↓.

  6. Обійти перешкоду, полишаючи її праворуч, і знайти на шляху точку, з якої можна почати рух праворуч або почати обхід іншої перешкоди, розташованої (хоча б частково) правіше від поточної перешкоди. Інакше кажучи, поки не досягнуто правого краю поля або останнього розташування кроку, запам'ятованого на кроці 4, робити таке у кожному розташуванні об'єкта:

    • запам'ятати розташування у порядку обходу перешкоди;

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

    • наступне переміщення здійснити у першому з можливих напрямків, заданих такою послідовністю різниць кутових аргументів нового напрямку і попереднього (напрям вимірювання традиційний — проти напрямку руху годинникової стрілки):

      • −90° — повернути праворуч;
      • 0° — зберегти напрям руху, бо праворуч перешкода;
      • +90° — повернути ліворуч, якщо перешкода і праворуч, і прямо;
      • +180° — рушити назад, якщо перешкоди немає лише позаду.

  7. Змінити номер стану гри на 2 — об'єкт рухається у «точку відриву» від перешкоди, тобто у розташування з найбільшою абсцисою при обході останньої перешкоди.

  8. Повернутися у «точку відриву».

  9. Очистити пам'ять, відведену на запам'ятовування траєкторії обходу перешкоди.

  10. Перейти до виконання пункту 1.

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

Поради щодо програмного втілення:

Завдання 2. Програмно втілити складений алгоритм руху білого круга прямо­кутним полем темно зеленого кольору з оминанням перешкод (наприклад, відрізків прямих ліній) жовтого кольору.

Вважати, що існує шлях для квадрата з горизонтальними і вертикальними сторонами, описаного навколо круга. Останнє припущення дає можливість спростити код перевірки можливості руху у певному напрямку за рахунок збільшення кількості виконуваних дій.

Вказівки до виконання завдання на основі розглянутого раніше коду показу руху білого круга зліва направо поверх перешкод жовтого кольору:

  1. Описати змінні і надати їм початкових значень. Виробити пропозиції у результаті конкурсу ідей і порівняти з очікуваним кодом, який потрібно вставити на початку коду Javascript.

    var   igame = 0, // стан гри
       idir = 0, // напрям руху
         xb = 0, // найбільше досягнуте значення абсциси
         jb = 0, // номер точки траєкторії з найбільшим
                 // досягнутим значенням абсциси
         jt = 0, // поточний номер точки траєкторії при поверненні
                 // у точку "відриву" за найменшу кількість кроків
tr = new Array(),//траєкторія центрів круга
   incjt = true, // зростання поточного номера точки траєкторії
                 // при поверненні у "точку відриву від перешкоди"
                 // за найменшу кількість кроків
can = [true,true,true,true]; // can[j] - чи можна рухатися у напрямку j
r=8,     // радіус рухомого круга
s=2,      // крок переміщення круга по горизонталі чи вертикалі 
xmax=800, // розміри поля по горизонталі
ymax=450, // розміри поля по вертикалі
x=r,      // поточна абсциса  центра круга
y=ymax/2, // поточна ордината центра круга
x0 =x,    // абсциса  центра круга у попередній момент
y0 =y;    // ордината центра круга у попередній момент

  2. Програмно втілити алгоритм зміни координат центра круга у тілі функції move. Порівняти з очікуваним.

  3. Перевірити правильність виконання проекту з використанням файлів field.png і newfield.png У разі потреби внести зміни у код програми.

  4. Записати створений код HTML + Javascript у вказану вчителем теку.

  5. Повідомити вчителя про завершення роботи над проектом.

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

7. Домашнє завдання

У разі потреби доробити завдання.

Для охочих: удосконалити програму — дозволити перемі­щення центра білого круга у точки з цілими координатами, віддаленими від початкового положення на відстань, що не перевищує s за умови, що при зміні однієї з координат кінцевого розташування на 1 можна отримати точку, віддалену від початкового розташування на відстань, що не перевищує s — див. малюнок, на якому:

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

Іншим наближенням такої моделі є модель з довільним розташуванням круга без перетину з перешкодами, але векторами переміщення з такими координатами:

(s · cos(πj/2n), s · sin(πj/2n)) при j = 0, 1, …, n.

Якщо сумістити початки векторів, то їхні кінці будуть вершинами правильного 4n-кутника. Кратність 4 кількості вершин вибрано для того, щоб мати можливість рухатися по горозонталі праворуч і ліворуч та по вертикалі вгору й униз. У цьому випадку:

Для обох моделей алгоритм перевірки можливості руху у певному напрямку вимагає істотного доопрацювання з використанням рівняння прямої на площині.

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