Тема: рух об'єктів і використання таймера у середовищі Lazarus.
Мета: сформувати предметні компетенції щодо технологій використання таймера, рух, моделювання гри.
Учень повинен пояснювати:
Учень повинен вміти:
Обладнання: комп'ютери з встановленими ОС та інтегрованим середовищем програмування Lazarus, (дана) інструкція.
Структура уроку
Хід уроку
1. Організаційний момент
Вітання з класом. Перевірка присутності і готовності учнів до уроку.
Мотивування учнів: чи легко створити хоча б простеньку комп'ютерну гру? Хто з вас бажає спробувати створити таку гру? Сьогодні спробуємо цьому навчитися.
2. Актуалізація опорних знань
3. Інструктаж з ТБ
4. Вироблення практичних умінь і навичок
Примітка. На розсуд вчителя: або виконувати покроково вправи, або (що краще) попередньо обговорити алгоритм виконання навчальних вправ, які учні виконуватимуть самостійно.
Координати у середовищі Lazarus запроваджено за допомогою такої моделі:
(0; 0) | ⋯ | (Width; 0) |
⋮ | ⋮ | |
(0; Heigt) | ⋯ | (Width; Heigt) |
Інакше кажучи:
Щоб зробити будь-який об'єкт ширшим або вужчим (довшим або коротшим), потрібно відповідно збільшити або зменшити значення його властивості Width (Height).
Навчальна вправа 1 — зміна координат розташування об'єктів на формі: виконати подані далі вказівки для розташування у центрі форми кнопок, натискання на які призведе до їхнього переміщення.
У середовищі Lazarus розташувати 4 компоненти ТButton з групи Standart на формі Form1 (з'явиться на екрані автоматично після завантаження середовища). Для цього на панелі компонентів
на вкладенні групи Standart клацнути (лівою кнопкою миші) на кнопці
Змінити властивості наявних об'єктів. Клацнути по компоненту Button1 на формі. Навколо Button1 з'являться чорні маркери, а у переліку компонентів вікна Інспектора об'єктів цей компонент буде підсвічено. Лише для такого вибраного компоненту можна змінювати значення властивостей та виконувати інші зміни. На вкладенні Властивості вікна Інспектор об'єктів переглянути перелік властивостей (лівий стовпчик вікна Інспектора об'єктів) та значень властивостей (правий стовпчик вікна Інспектора об'єктів) компонента Button1. Значення властивостей у вікні Інспектора об'єктів можна змінювати двома способами дій: або вибором іншого значення певної властивості із пропонованого переліку (легший варіант дій), або вилученням наявного значення властивості та вписуванням з клавіатури нового значення (варіант для більш досвідчених користувачів, бо у цьому випадку потрібно знати правильні діапазони значень, яких може набувати певна властивість). Встановити такі значення властивостей (вилученням наявних значень та вписуванням нових з клавіатури):
Form1:procedure TForm1.Button1Click(Sender: TObject); begin Button1.Left:=0; end;
Відкомпілювати програми (натиснути клавішу F9). Після успішної компіляції у вікні програми натиснути кнопку Button1 і отримати такий результат.
Аналогічно записати процедури для переміщення інших кнопок (для кожної кнопки — окрема процедура):
procedure TForm1.Button2Click(Sender: TObject); begin Button2.Top:=0; end; procedure TForm1.Button3Click(Sender: TObject); begin Button3.Left:=250; end; procedure TForm1.Button4Click(Sender: TObject); begin Button4.Top:=270; end;
У процедурі натискання кнопки Button2 записано: Button2.Top:=0, тобто верхній край кнопки має суміститися з верхнім краєм форми.
У процедурі натискання кнопки Button3 записано: Button3.Left:=250, тобто (з урахуваням ширини кнопки 50 і ширини форми 300) правий край кнопки має суміститися з правим краєм форми. У загальному випадку бажано написати так:
Button3.Left:=TForm1.Width-Button3.Width
У процедурі натискання кнопки Button4 написано: Button4.Top:=270, тобто (з урахуваням висоти кнопки 30 і висоти форми 300) нижній край кнопки має суміститися з нижнім краєм форми. У загальному випадку бажано написати так:
Button4.Top:=TForm1.Height-Button3.Height
Отже, зміною значень властивостей Width і Heigh змінюють розміри об'єкта, а зміною значень властивостей Top і Left розташування об'єкта на формі.
Відкомпілювати програму і запустити її на виконання, натиснувши кнопку F9.
Перевірити правильність роботи програми: вікні програми Рух кнопок натиснути послідовно кнопки: Button1, Button2, Button3, Button4 і отримати такий результат.
Зберегти всі файли проекту, натиснувши клавіші Shift + Ctrl+ S у теку Ваше прізвище-1 у вказаному вчителем місці.
Призначення таймера — виконувати опрацювання подій у задані проміжки часу (час задають у мілісекундах). Під час роботи таймер не відображається у вікні програми (він діє приховано). Попередньо проміжок часу у таймері встановлено на 1 тисячу мілісекунди (самостійно визначте, скільки разів на секунду буде опрацьовано подій у цьому випадку). Програміст може на свій розсуд змінювати цей інтервал.
Навчальна вправа 2 — застосування таймера: створити невеличку гру, в якій таймер запускає дискретний рух кнопки по формі у випадкових напрямках. Інакше кажучи, кнопка «стрибатиме» по формі. Гравець повинен «впіймати» кнопку вказівником і зупинити гру, клацнувши лівою кнопкою миші по цій кнопці. У результаті кнопка зупиниться, а у заголовку форми з'явиться напис: «Гру завершено!»
У середовищі Lazarus розташувати на формі Form1 компонент TButton з групи компонентів Standart (на початку попередньої вправи описано, як це зробити).
Розташувати на формі Form1 компонент Timer1, натиснувши кнопку TTimer (перше зліва направо зображення годинника) на панелі компонентів у групі System.
Форма може мати такий вигляд.
Зауваження 1. Для компонентів типу кнопки Button* істотним є розташування і розміри, тобто значення властивостей Width і Heigh, Top і Left. А для компонента Timer* таких властивостей взагалі немає. Де саме на формі розташувати таймер не істотно, бо таймер невидимий під час роботи програми.
Змінити проміжок часу таймера. Клацнути лівою кнопкою миші на компоненті Timer1 і побачити чорні маркери навколо Timer1. У вікні Інспектор об'єктів на вкладенні Властивості змінити значення властивості Interval з 1000 на 500 (мілісекунд) і натинути клавішу Enter.
Зауваження 2. У таймера є властивість Interval на вкладенні Властивості, а на вкладенні Подіі є такі події:
OnStartTimer — вмикання таймера;
OnStopTimer — вимикання таймера;
OnTimer — визначає, що виконуватиме програма, коли спливе заданий проміжок часу.
Усі встановлені компоненти відображено у вікні Інспектор об'єктів і у вікні Редактор коду програми. Щодо останнього — після рядка:
TForm1 = class(TForm)
є такий опис:
Button1: TButton;
Timer1: TTimer;
Змінити значення властивостей наявних об'єктів на вкладенні Властивості, попередньо виділивши відповідний об'єкт:
Form1:
Width (ширина форми) — 300;
Height (висота форми) — 300;
Caption (заголовок) — Впіймай кнопку.
Button1:
Width (ширина кнопки) — 50;
Height (висота кнопки) — 30.
Записати процедуру руху кнопки не лише по горизонталі, а й по вертикалі вниз, у правий нижній кут форми змінивши текст процедури на такий:
procedure TForm1.Timer1Timer(Sender: TObject); begin Button1.Left:=(Form1.Width -Button1.Width); Button1.Top :=(Form1.Height-Button1.Height); end;
Запрограмувати рух кнопки по формі випадковим чином, застосувавши функцію Randomize, яка активізує генератор випадкових чисел. Процедура руху кнопки має набути такого вигляду:
procedure TForm1.Timer1Timer(Sender: TObject); begin Randomize; Button1.Left:=random(Form1.Width -Button1.Width); Button1.Top :=random(Form1.Height-Button1.Height); end;
Записати процедуру натискання кнопки Button1Click, внаслідок чого після натискання кнопки гру буде зупинено, а у заголовку форми з'явиться напис: «Гру завершено!». Клацнути лівою кнопкою миші на кнопці Button1, і у тому місці вікна Редактор коду програми, де встановиться вказівник миші (між словами begin і end) записати таке:
Timer1.Enabled:= false; Form1.Caption :='Гру завершено!';
Інакше кажучи, процедура має виглядати таким чином:
procedure TForm1.Button1Click(Sender: TObject); begin Timer1.Enabled:= false; Form1.Caption :='Гру завершено!'; end;
Відкомпілювати програму і запустити її на виконання, натиснувши клавішу F9, і після успішної компіляції, у вікні Form1 спостерігати переміщення кнопки Button1 випадковим чином по формі.
Зберегти всі файли проекту у теку Ваше прізвище-2 у вказаному вчителем місці, натиснувши клавіші Shift + Ctrl+ S.
5. Підбиття підсумків уроку
Виставлення оцінок.
6. Домашнє завдання
Повторити навчальний матеріал уроку. При потребі доробити навчальні вправи.
Розробка уроку — практичної роботи (урок 2)
Тема: моделювання гри в середовищі Lazarus.
Мета: сформувати предметні компетенції щодо технологій використання таймера, рух, моделювання гри.
Учень повинен пояснювати:
Учень повинен вміти:
Обладнання: комп'ютери з встановленими ОС та інтегрованим середовищем програмування Lazarus, (дана) інструкція.
Структура уроку
Хід уроку
1. Організаційний момент
Вітання з класом. Перевірка присутності і готовності учнів до уроку.
2. Актуалізація опорних знань
3. Інструктаж з ТБ
4. Вироблення практичних навичок
Мотивування учнів: Сьогодні ми створимо комп'ютерну гру «Ping-pong», у якій нашим суперником буде комп'ютер.
Правила гри. Два гравці (у нашому випадку першим гравцем буде людина, а другим — комп'ютер) намагаються своїми тенісними ракетками відбивати м'ячик, і не пропустити жодної атаки суперника. Вважають, що «гол забито», коли супернику не вдалося відбити м'ячик.
Порада. Для створення гри на формі доцільно використати компоненти:
Timer з вкладення System;
Shape з вкладення Additional
— кнопка у верхньому рядку з зображенням синьо-жовто-червоних фігур.
Компонент Shape призначено для відображення на формі різноманітних геометричних фігур (прямокутників, квадратів, кругів, трикутників, тощо). Розміщення компонента Shape на формі виконують так само як і компонента Button (див. навчальну вправу 1 попереднього уроку). Для того, щоб надати потрібну форму об'єкту Shape, який вже є на формі, необхідно цей компонент виділити (клацнути на ньому лівою кнопкою миші), помітити появу навколо нього чорних маркерів і у вікні Інспектор об'єктів вибрати вкладення Властивості, знайти властивість Shape, у (правому) стовпчику значень властивості відкрити перелік можливих значень, обрати потрібне та натиснути клавішу Enter.
Значення властивості Shape (форма/вид геометричної фігури):
У вікні Інспектор об'єктів на вкладенні Властивості для компонента Shape можна встановлювати значення властивостей Color (колір фігури) через властивість Brush/Color. А компонент Timer (Таймер) можна запрограмувати на виконання дій через певні інтервали часу.
Основні властивості об'єкту Timer:
При виконанні завдання потрібно змоделювати рух м'ячика (об'єкту Shape1) на полі, відбивання його від меж ігрового поля прямокутної форми, від ракетки (об'єкту Shape2), якою може керувати за допомогою миші, і від ракетки (об'єкту Shape3), якою керуватиме програма інший гравець.
Вказівки до виконання
Створити новий проект з формою, використавши вказівку меню Файл / Новий…, у вікні діалогу Новий… обрати Програма й натиснути кнопку Гаразд.
Тут і далі після виконня дій у кожного пункту зберегти всі файли проекту в окрему новостворену папку, натиснувши клавіші Shift + Ctrl + S.
Створити зображення м'ячика. На формі Form1 (її буде відображено після виконання попереднього кроку) розмістити компонент Shape з вкладення Additional.
Поки чорні маркери ще є навколо фігури Shape1, можна змінювати значення її властивостей (перелік властивостей та значень подано у вікні Інспектор об'єкта). На формі спочатку буде розміщено фігуру Shape1 у вигляді білого квадрата, а для гри потрібен м'ячик (круг). Тому потрібно вибрати у вікні Інспектор об'єктів вкладення Властивості, встановити такі значення властивостей для фігури Shape1:
Shape (форма фігури) — stCircle (круг);
Brush / Color (колір фігури) — clRed (червоний);
Width (ширина фігури) — 24;
Height (висота фігури) — 24
і отримати такий результат.
Створити ракетку для гравця: розмістити на формі компонент Shape з вкладення Additional. Поки чорними маркерами виділено фігуру Shape2, змінити значення деяких її властивостей. Для цього у вікні Інспектор об'єктів на вкладенні Властивості надати таких значень для фігури Shape2 — жовтої смужки:
Shape (форма фігури) — stRectangle (прямокутник);
Brush / Color (колір фігури) — clYellow (жовтий);
Width (ширина фігури) — 100;
Height (висота фігури) — 10
і отримати такий результат.
Примітка. На цей момент виконання завдання у вікні Інспектора об'єктів на формі Form1 (ігрове поле) вже вказано два підлеглих компоненти Shape1 (м'ячик) і Shape2 (ракетка гравця). Також автоматично сформовано перелік застосованих компонентів у верхній частині вікна Редактора коду програми (праве вікно середовища Lazarus).
Запрограмувати рух м'ячика, використавши змінні цілого типу:
Form1: TForm1; implementation
запиcати:
Var PosX, PosY, dX, dY: single;
Клацнути лівою кнопкою миші на формі Form1 і у тому місці вікна Редактора коду програми, де буде відображено вказівник (між словами begin і end) записати процедуру встановлення початкового розташування м'яча на формі. Процедура має набути такого вигляду:
procedure TForm1.FormCreate(Sender: TObject); begin PosX:=50; PosY:=50; dX:=2; dY:=3; end;
Далі записати нову процедуру Shar — процедуру переміщення м'ячика по ігровому полю — такого вигляду:
procedure TForm1.Shar; begin PosX:=PosX+dX; PosY:=PosY+dY; Form1.Shape1.Left:=round(PosX); Form1.Shape1.Top:=round(PosY); end;
Для того, щоби м'ячик самостійно розпочав рух по ігровому полю, встановити таймер. Для цього на Панелі компонентів із групи компонентів System обрати компонент Timer (таймер), розмістити його на формі Form1, натиснувши кнопку TTimer. Поки чорні маркери є навколо таймера – можна змінити значення деяких його властивостей: у вікні Інспектора об'єктів на вкладенні Властивості надати властивості Interval значення 10, а властивості Enabled — значення True. Потім на вкладенні Події обрати для OnTimer значення Timer1Timer. Таким чином таймер буде увімкнено.
Залишиться лише записати, які дії через кожні 10 мілісекунд виконуватиме ця програма: здійснювати рух м'ячика згідно з процедурою TForm1.Shar. Отже, потрібно клацнути лівою кнопкою миші на таймері Timer1 (що вже є на формі), і у тому місці вікна Редактора коду програми, де буде відображено вказівник миші (між словами begin і end) записати процедуру запуску руху м'ячика, яка має набути такого вигляду:
procedure TForm1.Timer1Timer(Sender: TObject); begin Shar; end;
Перевірити правильність попередніх дій: відкомпілювати програму і запустити її на виконання натисканням клавіші F9). Після успішної компіляції у вікні Form1 спостерігати рівномірний прямолінійний рух Shape1 (м'ячика) без відбивання від меж форми чи від ракетки.
Подолати проблему прозорості меж: записати вказівки для перевірки, чи торкнувся м'ячик межі форми, і, якщо це відбулося, то змінити напрямок руху м'яча. При дотику до вертикальної межі приріст гормзонтальної координати змінити на протилежне число, при дотику до горизонтальної межі приріст вертикальної координати змінити на протилежне число. Інакше кажучи, надати процедурі руху м’ячика TForm1.Shar такого вигляду:
procedure TForm1.Shar; begin PosX:=PosX+dX; PosY:=PosY+dY; If PosX > (Form1.Width-Form1.Shape1.Width) Then dX:=-dX; If PosX < 0 Then dX:=-dX; If PosY > (Form1.Height-Form1.Shape1.Height) Then dY:=-dY; If PosY < 0 Then dY:=-dY; Form1.Shape1.Left:=round(PosX); Form1.Shape1.Top :=round(PosY); end;
Тут:
Form1.Width — ширина ігрового поля (форми Form1);
Shape1.Width — ширина м’ячика (його діаметр);
Form1.Height — висота форми;
Shape1.Height — висота м’ячика (його діаметр);
Shape1.Left — відстань від лівого краю форми до лівого краю м’ячика;
Shape1.Top — відстань від верхнього краю форми до верхнього краю м’ячика.
Відкомпілювати програму і запустити її на виконання (натиснувши клавішу F9) і після успішної компіляції спостерігати у вікні Form1 рух м'ячика з відбиванням від стінок форми. Але ракетка для м'яча залишитьсяься прозорою (невидимою).
Запрограмувати відбивання м'ячика від ракетки гравця-користувача. Записати у процедуру TForm1.Timer1Timer вказівки перевірки торкання м'ячиком ракетки (використати функцію InterSectRect), яка дає змогу будувати перетин прямокутників, описаних навколо Shape1 (м’ячика) і Shape2 (ракетки). І не забути оголосити змінну Overlay на початку процедури. За результатами перевірки при перетині змінити напрям руху м'ячика. Інакше кажучи, процедура TForm1.Timer1Timer має набути такого вигляду:
procedure TForm1.Timer1Timer(Sender: TObject); var Overlay: Trect; begin Shar; If InterSectRect(Overlay, Shape2.BoundsRect, Shape1.BoundsRect) Then dY:=-dY; end;
Тут, як і вище для відбивання від меж ігрового поля, використано модель пружного відбивання від площини: після відбивання складова швидкості, перпендикулярна до площини, змінюється на протилежну — див. вказівку dY:=-dY. А складова швикості, дотична до поверхні відбивання, залишається бех змін — dX не змінюється при виконанні цієї процедури.
Відкомпілювати програму і запустити її на виконання (натиснути клавішу F9) і після успішної компіляції спостерігати рух м'ячика у вікні Form1 з відбиванням від ракетки.
Створити ракетку для гравця-комп'ютера. Розташувати на форму компонент Shape3, натиснувши відповідну кнопку Shape на вкладенні Additional.
Поки чорними маркерами виділено фігуру Shape3 (ракетку гравця-комп’ютера), можна змінити значення її властивостей. Для цього у вікні Інспектор об'єктів на вкладенні Властивості надати таких значень:
Shape (форма фігури) — stRectangle (прямокутник);
Brush / Color (колір фігури) — clBlue (синій);
Width (ширина фігури) — 100;
Height (висота фігури) — 10.
Таким чином, фігура Shape3 (ракетка гравця-комп’ютера) набуде форми синьої смужки (100×10). Запустити програму на виконання й пересвідчитися, що ця ракетка «прозора» для м'ячика (тобто він від цієї ракетки м'ячик не відбивається.
Запрограмувати відбивання м'ячика від ракетки гравця-коп'ютера: вписати вказівки для перевірки умов дотикання м'ячика до другої ракетки та відбивання у процедуру TForm1.Timer1Timer:
if InterSectRect(Overlay, Shape3.BoundsRect, Shape1.BoundsRect) then dY:=-dY;
Надати «ознаки інтелекту» ракетці гравця-комп'ютера. Встановити на форму це один таймер Timer2, який керуватиме поведінкою ракетки Shape3, натиснувши кнопку Timer з вкладення System. Встановити для другого таймера (компонента Timer2) такі значення властивостей:
Enabled — True;
Interval — 20.
Цей таймер буде повільнішим (20 > 10), щоб дати шанс людині перемогти комп'ютер.
Запрограмувати перевірку й контроль того, щоб ракетка Shape3 не переміщувалася поза межі ігрового поля. Тобто, як і для ракетки Shape2, виконати програмування другого таймера:
procedure TForm1.Timer2Timer(Sender: TObject); var Overlay: Trect; begin if not ((Shape3.Left>0) and (Shape3.Left < ClientWidth-Shape3.Width)) then begin if Shape3.Left<0 then Shape3.Left:=0; if (Shape3.Left+Shape3.Width)>Form1.Width then Shape3.Left:=Form1.Width-Shape3.Width; end;
А далі записати вказівки відслідковування ракеткою руху м’ячика:
if Shape1.Left < Shape3.Left then Shape3.Left:=Shape1.Left; if Shape1.Left > (Shape3.Left + Shape3.Width) then Shape3.Left:=Shape1.Left;
Для ракетки Shape2 записати процедуру, яка дає змогу гравцеві виконувати керування цією ракеткою за допомогою миші (застосувати метод MouseMove):
procedure TForm1.FormMouseMove(Sender: TObject; Shift: TShiftState; X, Y: Integer); begin Shape2.Left:=Mouse.CursorPos.X-Form1.CLientOrigin.X; end;
Перевірити правильність виконання усіх попередніх дій. Після компіляції і запуску поекту на виконання (натиснути клавішу F9) верхня синя ракетка має самостійно переміщатися, відстежуючи рух м'ячика. А нижню ракетку гравець може рухати за допомогою миші: встановивши вказівник миші на зображення жовтої ракетки, натиснувши ліву кнопку миші і рухаючи мишкою праворуч чи ліворуч, помітити, що жовта ракетка гравця переміщується синхронно цим рухам (див. два малюнки знизу).
Додати елемент випадковості у гру. За допомогою randomize — функції виклику генератора випадкових чисел — можна надати елемент деякої несподіваності у виборі м’ячиком напрямку руху. Функцію randomize потрібно дописати на початок процедури TForm1.FormCreate для ініціалізації герератора випадкових чисел за поточним станом ком'ютера (щоб не отримувати кожного разу одну й ту саму послідовність псевдовипадкових чисел.):
procedure TForm1.FormCreate(Sender: TObject); begin randomize;
Далі можна застосувати генератор випадкових чисел до процедури руху м'ячика. Клацнути лівою кнопкою миші на складовій Timer1 і дописати застосування елементів випадковості щодо переміщення м’ячика. Процедура руху м’ячика має набути такого вигляду:
procedure TForm1.Timer1Timer(Sender: TObject); var Overlay: Trect; begin Shar; if InterSectRect(Overlay, Shape3.BoundsRect, Shape1.BoundsRect) then begin dX:=-random(5); dY:=-random(5); end; end;
Зберегти всі файли проекту, натиснувши клавіші Shift + Ctrl + S, у теку, вказану вчителем.
5. Закріплення вивченого матеріалу.
Обрати чи придумати гру, яку буде створено при виконанні домашнього завдання, узгодити свій вибір з учителем, при потребі обговорити шляхи її програмного втілення.
6. Підбиття підсумків уроку.
Виставлення оцінок.
7. Домашнє завдання
Створити комп'ютерну вибрану гру, вибрану у класі для домашнього завдання.
Текст упорядкувала Наталія Вадимівна Вовковінська, викладач інформатики та робототехніки ДЗНЗ «Дитяча інженерна академія» міста Києва, під час виконання випускної роботи на курсах підвищення кваліфікації з 16.01.2017 по 20.01.2017.