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

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

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

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

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

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

Хід уроку

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

2. Актуалізація опорних знань
Після завантаження середовища програмування Lazarus на екрані монітора з'являється кілька вікон.

Головне вікно
Верхню частину головного вікна поділяють на три функціональних блоки (див. малюнок знизу):

Інспектор об'єктів
У верхній частині вікна показано ієрархічну структуру об'єктів, а внизу розташовано вкладки: Властивості, Події, Улюблені.

Редактор тексту
Саме у цьому вікні вводять і редагують текст програми. Жирним шрифтом буде виділено зарезервовані слова, червоним — знаки пунктуації, синім — коментарі.

Вікно повідомлень
Вікно призначене для повідомлень щодо компілювання, компонування й налаштування проекту.

Вікно платформи
Вікно призначене для розташування об'єктів, у тому числі елементів керування.

3. Вивчення нового матеріалу

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

Для успішного досягнення поставленої мети потрібно знати відповіді на такі запитання.

  1. Назвіть складові Lazarus'а, які використовують для побудови графічних зображень? Для побудови графічних зображень використовують компоненти TShape, який знаходиться на вкладці Additional.

  2. Які графічні примітиви можна побудувати, використовуючи компонент Shape — Коло (stCircle), ромб (stDiаmond), еліпс (stElipce), прямокутник (stRectangle), заокруглений прямокутник (stRoundRect), квадрат (stSquare), трикутник (stTriangle) та інші.

  3. Як задати колір тла, контурів об’єкта Shape? — колір тла Brush.Color, контурів — Pen.Color

  4. Для чого використовують властивість Brush? — для задання кольору тла та стилю заповнення.

  5. Для чого використовується властивість Pen? — для задання кольору контура фігури та стилю лінії, розміру лінії.

  6. Як можна перемістити об'єкт Shape на формі? — об'єкт можна перемістити змінюючи координати фігури Top та Left.

  7. Як визначають розташування об’єкта Shape на формі? — за допомогою властивостей Top та Left.

  8. Що описують властивості Top і Left для об’єкта Shape? — допомогою властивостей Top — відстань від верхньої межі копонента до верхньої межі форми, Left — відстань від лівої межі компонента до лівої межі форми( у пікселях.)

  9. Як програмно перевірити, що один об’єкт Shape сумістився з іншим об'єктом? За допомогою функції InterSectRect(Overlay, shape2.BoundsRect, Shape1.BoundsRect).

4. Інструктаж з ТБ
5. Закріплення вивченого матеріалу

  1. Створити окрему теку з назвою Ваше прізвище у теці, вказаній учителем. У цю теку зберігати проект, періодично натискаючи кнопку Зберегти всі.

  2. У середовищі Lazarus скористатися вказівкою меню Проект / Новий проект

    для виклику вікна діалогу Створити новий проект. У цьому вікні вибирати пункт Застосунок.

  3. Побачити форму — об’єкт для розташування кнопок, полів, написів, меню, смуг прокрутки тощо.

  4. У вікні Інспектор об'єктів на вкладенні Властивості надати такі значення властивостям:

    • Сaption — Animation;
    • Color — clForm;
    • Height — 650;
    • Left — 200;
    • Top — 100;
    • Width — 900.

  5. Створити окрему теку для проекту з назвою Ваше прізвище у теці, вказаній учителем. Для збереження всіх файлів скористатися кнопкою Зберегти всі на панелі інструментів.

  6. Відкрити проект. Для цього завантажити файл project1.lpi з теки з назвою Ваше прізвище. Цей файл буде створено у результаті виконання вказівки (див. попередній абзац).

  7. Використовуючи Панель компонентів, розташувати на формі такі об’єкти:

    • button1, button2, button3, button4 — натиснути кнопку TButton на вкладці Standart.

    • timer1, timer2 — натиснути кнопку TTimer яка знаходиться на вкладці System.

    • panel1, panel2 — натиснути на кнопку TPanel яка розміщена на вкладці Standart.

  8. На Panel1 розмістити довільним чином 16 об’єктів Shape3, Shape4, …, Shape18. Для цього натиснути на кнопку TShape, яку розміщено на вкладці Additional. В інспекторі об'єктів властивості Shape надати значення stRectangle для всіх об'єктів Shape3, Shape4, …,-Shape18. Ці об'єкти будуть перешкодами на формі.

  9. Також на Panel1 встановити об’єкти:

    • Shape1 у вигляді круга (цей об'єкт буде рівномірно переміщатись по формі) — в інспекторі об'єктів властивості Shape надати значення stCircle.

    • Shape2 у вигляді прямокутника, що буде означати фініш — в інспекторі об'єктів властивості Shape і вибрати значення stRectangle.

  10. Використовуючи Інспектор об'єктів, змінити властивості об'єктів таким чином:

    Shape 1
    ВластивістьЗначення
    Height20
    Width20
    Brush.ColorclBlue
    Top170
    Left8

    Shape 2
    ВластивістьЗначення
    AlignLeft
    Brush.ColorclBlue
    Left8

    Shape 3 — Shape 18
    ВластивістьЗначення
    Width4
    Height70
    Brush.ColorclBlack
    VisibleFalse

    Використовуючи Інспектор об'єктів, змінити значення властивості Caption об'єктів-кнопок таким чином (невказані властивості — довільні):

    • button1 — Лабіринт1;
    • button2 — Лабіринт2;
    • button3 — Старт;
    • button4 — Стоп.

  11. Кнопки розташувати зверху форми. Розмір кнопок довільний.

  12. Використовуючи Інспектор об'єктів, задати властивості Enabled таймерів timer1 i timer2 значення false.

    Примітка. Властивості Panel1, Panel2 задамо далі програмним шляхом при створенні форми.

  13. Надати формі такого вигляду.

  14. У вікні Редактор тексту службовим словом implementation перед виконуваною частиною проекту описати глобальні змінні проекту.

    const n=16; m=11; // кількість фігур у лабіринтах відповідно 1 і 2 
var
  Form1: TForm1;
   dx: integer=3;               // зміщення фігури на формі
   dy: integer=3;
   n_maze:integer;              //номер лабіринту
   Sh  :array[1..n] of TShape;  // масив Shape - лабіринт 1
   Shap:array[1..m] of TShape;  //масив для лабіринту 2

    Для того, щоб задати початкові властивості форми та компонентів Shape3-Shape18, Shape21-Shape31, створити подію для форми Form1 onCreate. Для цього потрібно в інспекторів об'єктів вибрати вкладення Події, вибрати властивість OnCreate, клацнути на її значення двічі і внести такий код у процедуру:

    procedure TForm1.FormCreate(Sender: TObject):


Form1.Height:=500;
Form1.Width:=850;
sh[1]:=Shape3;
sh[2]:=Shape4;
sh[3]:=Shape5;
sh[4]:=Shape6;
sh[5]:=Shape7;
sh[6]:=Shape8;
sh[7]:=Shape9;
sh[8]:=Shape10;
sh[9]:=Shape11;
sh[10]:=Shape12;
sh[11]:=Shape13;
sh[12]:=Shape14;
sh[13]:=Shape15;
sh[14]:=Shape16;
sh[15]:=Shape17;
sh[16]:=Shape18;
Shape3.Visible:=True;
Shape4.Visible:=True;
Shape5.Visible:=True;
Shape6.Visible:=True;
Shape7.Visible:=True;
Shape8.Visible:=True;
Shape9.Visible:=True;
Shape10.Visible:=True;
Shape11.Visible:=True;
Shape12.Visible:=True;
Shape13.Visible:=True;
Shape14.Visible:=True;
Shape15.Visible:=True;
Shape16.Visible:=True;
Shape17.Visible:=True;
Shape18.Visible:=True;
shap[1]:=Shape21;
shap[2]:=Shape22;
shap[3]:=Shape23;
shap[4]:=Shape24;
shap[5]:=Shape25;
shap[6]:=Shape26;
shap[7]:=Shape27;
shap[8]:=Shape28;
shap[9]:=Shape29;
shap[10]:=Shape30;
shap[11]:=Shape31;
Shape21.Visible:=True;
Shape22.Visible:=True;
Shape23.Visible:=True;
Shape24.Visible:=True;
Shape25.Visible:=True;
Shape26.Visible:=True;
Shape27.Visible:=True;
Shape28.Visible:=True;
Shape29.Visible:=True;
Shape30.Visible:=True;
Shape31.Visible:=True;

    Тут кожному елементу масиву надано значення конкретного об’єкта Shape і задано значення true властивості Visible, щоб ці об'єкти було видно на формі (на початковому етапі вони невидимі).

  15. Створити подію для кнопки Button1.Click (Лaбіринт1). Для цього вибрати кнопку з написом Лабіринт1, клацнути по ній двічі і у код процедури

    procedure TForm1.Button1Click(Sender: TObject);

     вписати таке:

    n_maze:=1;
Panel1.Visible:=True;
Panel2.Visible:=False;
Panel1.Height:=450;
Panel1.Width:=850;
Panel1.Top:=50;
Panel1.Left:=1;

    В цьому коді задано видимість компонету Panel1, його розміри та координати розташування.

  16. Створити подію для кнопки Button2.Click (Лабіринт2). Для цього вибираємо кнопку з написом Лабіринт2, клацнути по ній двічі й у код процедури

    procedure TForm1.Button2Click(Sender: TObject);

     вписати таке:

    n_maze:=2;
Panel1.Visible:=False;
Panel2.Visible:=True;
Panel2.Height:=450;
Panel2.Width:=850;
Panel2.Top:=50;
Panel2.Left:=1;

  17. Створити подію для кнопки Button3.click (Старт). Для цього вибирати кнопку з написом Старт, клацнути по ній двічі й у код процедури

    procedure TForm1.Button3Click(Sender: TObject);

     вписати таке:

    var x,y,i:integer;
begin
  if n_maze=1 then
BEGIN             //лабіринт1
  Randomize;
  x:=Random(20);
  y:=Random(10);
  for i:=1 to 4 do
  begin
    sh[i].Left:=sh[i].left+30+x;
    sh[i].Top:=sh[i].Top+10+y;
  end;
  for i:=5 to 8 do
  begin
    sh[i].Left:=sh[i].left+30+x;
    sh[i].Top:=sh[i].Top-10+y;
  end;
  for i:=9 to 12 do
  begin
    sh[i].Left:=sh[i].left+30+x;
    sh[i].Top:=sh[i].Top-10+y;
  end;
  for i:=12 to 16 do
    
  begin
    sh[i].Left:=sh[i].left+30+x;
    sh[i].Top:=sh[i].Top+10+y;
  end;
  timer1.Enabled:=true;
END
ELSE
BEGIN        // лабіринт2
  Randomize;
  x:=Random(20);
  y:=Random(10);
  for i:=1 to 11 do
  begin
    shap[i].Left:=shap[i].left+30+x;
    shap[i].Top:=shap[i].Top+10+y;
  end;
  timer2.Enabled:=true;
END;

    В цій процедурі зроблено перевірку, який вибрано лабіринт і задано розташування перешкод випадковим чином.

  18. Для того, щоб відбулось переміщення м'ячика (Shape1), створити події для таймера timer1. Для цього достатньо по ньому клацнути двічі й у тіло процедури

    procedure TForm1.Timer1Timer(Sender: TObject);

     вписати код, що задаватиме зміщення круга Shape1 і перевірятиме, чи відбулося зіткнення з перешкодою чи виходу на фініш Shape2. Для перевірки того, чи Shape1 зіткнувся з іншим об’єктом Shape використати таку функцію:

    InterSectRect (Overlay, shape2.BoundsRect, Shape1.BoundsRect)

     Саме за допомогою цієї функції буде перевірено, чи м'ячик (Shape1) накриває фініш (Shape2). При накладанні буде створено повідомлення про фініш, інакше буде змінено координати Shape1, що сторюватиме видимість відбивання м'ячика від перешкоди.

    var
c:TColor;
i:integer;
Overlay: TRect;

begin   // рух м'ячика по таймеру, перевірка перешкод
    with Shape1 do
    begin
     Left:=Left+dx;
      if InterSectRect(Overlay, Shape3.BoundsRect, Shape1.BoundsRect) then
      begin
        Top:=Top+3;
        Left:=Left-5;
      end;
    if InterSectRect(Overlay, Shape4.BoundsRect, Shape1.BoundsRect) then
      begin
        Top:=Top-3;
        Left:=Left-5;
      end;
    if InterSectRect(Overlay, Shape5.BoundsRect, Shape1.BoundsRect) then
      begin
        Top:=Top+3;
        Left:=Left-5;
      end;
    if InterSectRect(Overlay, Shape6.BoundsRect, Shape1.BoundsRect) then
      begin
        Top:=Top-3;
        Left:=Left-5;
      end;
    if InterSectRect(Overlay, Shape7.BoundsRect, Shape1.BoundsRect) then
      begin
        Top:=Top+3;
        Left:=Left-5;
      end;
      if InterSectRect(Overlay, Shape8.BoundsRect, Shape1.BoundsRect) then
      begin
        Top:=Top-3;
        Left:=Left-5;
      end;
      if InterSectRect(Overlay, Shape9.BoundsRect, Shape1.BoundsRect) then
      begin
        Top:=Top+3;
        Left:=Left-5;
      end;
      if InterSectRect(Overlay, Shape10.BoundsRect, Shape1.BoundsRect) then
      begin
        Top:=Top-3;
        Left:=Left-5;
      end;
      if InterSectRect(Overlay, Shape11.BoundsRect, Shape1.BoundsRect) then
      begin
        Top:=Top+3;
        Left:=Left-5;
      end;
      if InterSectRect(Overlay, Shape12.BoundsRect, Shape1.BoundsRect) then
      begin
        Top:=Top-3;
        Left:=Left-5;
      end;
      if InterSectRect(Overlay, Shape13.BoundsRect, Shape1.BoundsRect) then
      begin
        Top:=Top+3;
        Left:=Left-5;
      end;
      if InterSectRect(Overlay, Shape14.BoundsRect, Shape1.BoundsRect) then
      begin
        Top:=Top-3;
        Left:=Left-5;
      end;
      if InterSectRect(Overlay, Shape15.BoundsRect, Shape1.BoundsRect) then
      begin
        Top:=Top+3;
        Left:=Left-5;
      end;
      if InterSectRect(Overlay, Shape16.BoundsRect, Shape1.BoundsRect) then
      begin
        Top:=Top+3;
        Left:=Left-5;
      end;
      if InterSectRect(Overlay, Shape17.BoundsRect, Shape1.BoundsRect) then
      begin
        Top:=Top+3;
        Left:=Left-5;
      end;
      if InterSectRect(Overlay, Shape18.BoundsRect, Shape1.BoundsRect) then
      begin
        Top:=Top-3;
        Left:=Left-5;
      end;
      end; //end  width
      if InterSectRect(Overlay, shape2.BoundsRect, Shape1.BoundsRect) then
      begin
        timer1.Enabled:=false;
        Showmessage('FINISH');
      end;  
   end;

  19. Створити подію для таймеру timer2 — рух компонента Shape19 (м'ячик) для Лабіринта2. Клацаємо по компоненту timer2 двічі лівою кнопкою миші і у тіло процедури

    procedure TForm1.Timer2Timer(Sender: TObject);

     вписати таке:

    var
c:TColor;
i:integer;
Overlay: TRect;
begin   // рух м'ячика по таймеру, перевірка перешкод
  with Shape19 do
  begin
    Left:=Left+dy;
    if InterSectRect(Overlay, Shape21.BoundsRect, Shape19.BoundsRect) then
    begin
      Top:=Top+3;
      Left:=Left-5;
    end;
    if InterSectRect(Overlay, Shape22.BoundsRect, Shape19.BoundsRect) then
    begin
      Top:=Top-3;
      Left:=Left-6;
    end;
    if InterSectRect(Overlay, Shape23.BoundsRect, Shape19.BoundsRect) then
    begin
      Top:=Top-3;
      Left:=Left-5;
    end;
    if InterSectRect(Overlay, Shape24.BoundsRect, Shape19.BoundsRect) then
    begin
      Top:=Top-3;
      Left:=Left-6
    end;
    if InterSectRect(Overlay, Shape25.BoundsRect, Shape19.BoundsRect) then
    begin
      Top:=Top+3;
      Left:=Left-5;
    end;
    if InterSectRect(Overlay, Shape26.BoundsRect, Shape19.BoundsRect) then
    begin
      Top:=Top-3;
      Left:=Left-6;
    end;
    if InterSectRect(Overlay, Shape27.BoundsRect, Shape19.BoundsRect) then
    begin
      Top:=Top+3;
      Left:=Left+5;
    end;
    if InterSectRect(Overlay, Shape28.BoundsRect, Shape19.BoundsRect) then
    begin
      Top:=Top+3;
      Left:=Left-6;
    end;
    if InterSectRect(Overlay, Shape29.BoundsRect, Shape19.BoundsRect) then
    begin
      Top:=Top-3;
      Left:=Left-5;
    end;
    if InterSectRect(Overlay, Shape30.BoundsRect, Shape19.BoundsRect) then
    begin
      Top:=Top-3;
      Left:=Left-6;
    end;
    if InterSectRect(Overlay, Shape31.BoundsRect, Shape19.BoundsRect) then
    begin
      Top:=Top+3;
      Left:=Left+3;
    end;
    end; //end  width
    if InterSectRect(Overlay, shape20.BoundsRect, Shape19.BoundsRect) then
    begin
      timer2.Enabled:=false;
      Showmessage('FINISH');
    end;

    Перевірку накладання м'ячика (Shape19) на фініш буде здійснено за допомогою функції

    InterSectRect(Overlay, shape20.BoundsRect, Shape19.BoundsRect).

     Якщо відбудеться накладання м'ячика на фініш, то буде створено повідомлення про фініш, інакше буде змінено координати Shape19, що створюватиме видимість відбивання м'ячика від перешкоди.

  20. Виконати проект, натиснувши кнопку Виконати. Якщо все зроблено правильно, у вікні повідомлень побачити напис: Проект успішно зібрано. Інакше виправити помилки. Наприклад, порівнявши з кодом демонстраційного розв'язання, доповнити замовлення роботи з модулями до такого:

    uses Classes, SysUtils, FileUtil, Forms, Controls, Graphics, Dialogs, ExtCtrls, StdCtrls, types;

  21. Запустити створений файл exe на виконання і пересвідчитися у коректності роботи. Порівняти з роботою демонстраційного розв'язання.

  22. Зберегти остаточну редакцію проекту: скористатися кнопкою Зберегти всі і закрити вікно програми Lazarus.

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

7. Домашнє завдання
Виробити пропозиції щодо удосконалення проекту (наприклад, розбити область на комірки без перешкод, здійснити пошук у ширину ламаної з вершинами у центрах комірок тощо). При можливості реалізувати.

Текст упорядкувала Білик Оксана Василівна, вчитель школи № 126 Дніпровського району міста Києва, під час виконання випускної роботи на курсах підвищення кваліфікації з 16.01.2017 по 20.01.2017.