Тема: створення ігрових проектів мовою Javascript.

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

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

• будувати інформаційну модель задачі;
• працювати у середовищі програмування;
• описувати змінні;
• здійснювати обмін значеннями між змінними;
• застосовувати функції перетворення типів і породження випадкових чисел;
• обчислювати значення арифметичних виразів;
• розв’язувати задачі з галуженням;
• записувати мовою програмування арифметичні й логічні вирази ;
• використовувати структури розгалуження й повторення (всіх видів);
• використовувати вкладені одна в одну базові структури програмування;
• вибирати найдоцільніші оператори циклу;
• створювати код для виведення текстових повідомлень;
• надавати змінним значення властивостей елементів керування і навпаки;
• вводити й виводити дані з використанням елементів керування;
• виконувати програму у покроковому режимі;
• локалізувати помилки за допомогою консолі браузера;
• встановлювати точки переривання й виконувати програму до цих точок;
• вилучати точки переривання.

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

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

• Організаційний момент
• Актуалізація опорних знань
• Інструктаж з ТБ
• Закріплення вивченого матеріалу
• Підбиття підсумків уроку
• Домашнє завдання

Хід уроку

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

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

JavaScript (JS) — це об’єктно-орієнтована мова програмування, призначена для додавання інтерактивності веб-сторінкам.

Величина — одиниця даних, якими оперує програма. Вона має такі властивості:

• назва (ідентифікатор) — послідовність літер латиниці, цифр і нижнього підкреслювання «_», на початку — обов'язково літера;

• тип — визначає обсяг відведеної пам'яті, можливі дії, правила тлумачення бітів пам'яті та множину допустимих значень;

• розмірність — проста або складена (структурована);

• значення — елемент множини допустимих значень величини.

З кожною величиною (або її складовою для структурованої величини) пов'язана ділянка оперативної пам’яті, куди її під час роботи програми заносять та у якій зберегають. Цю ділянку визначено її адресою. Тут під адресою розуміють адресу першого байту з послідовновних щодо адресації байтів, відведених для збереження величини. Назва змінної слугує назвою цієї послідовності байтів під час виконання програми.

Змінні — вид даних, значення яких дозволено змінювати протягом виконання програми.

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

Оголошення змінної у JavaScript здійснюють таким чином:

var назва змінної;

Назва змінної:

• має починатися начинаться з літери латиниці або символів "_" чи "$", містити лише літери латиниці, цифри і символи "_" та "$";

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

  break     case      catch    class     const    continue  
  debugger  default   delete   do        else     enum  
  export    extends   false    finally   for      function
  if        import    in       new       null     return
  super     switch    this     throw     true     try
  typeof    var       void     while     with

Наприклад, test, _test, var _my_test1.

Кожній змінній можна надати значення і при її оголошенні, і далі у коді програми. Оператор надання значення позначають знаком =, що не є знаком порівняння.

Тип змінної JavaScript надає лише при наданні змінній певної величини. Після такого надання значення змінної стане доступним навіть якщо змінну попередньо не було оголошено.

Типи змінних:

• ціле число;
• дійсне число;
• рядок (тексту);
• логічні дані.

Змінній можна надати спеціальне значення null, якому не відповідає жоден з типів.

Якщо у виразах зустрічаються змінні різних типів, інтерпретатор JavaScript може автоматично перетворити числові дані в рядки тексту. Перетворення рядка у число виконують з допомогою спеціальних функцій parseInt (у ціле) і parseFloat (у дійсне).

Якщо результат виконання операцій з числами не можна подати числом, то повертається величина NaN (від англійського Not a Number).

З числовими змінними можна виконувати математичні операції (додавати, множити, ділити, віднімати, порівнювати, тощо). Операцію збільшення або зменшення значення змінної на 1 позначають дописуванням (праворуч) до назви змінної знаків «++» або «--». Наприклад, count++ або count--.

Вбудовані математичні функції:

• Math.floor(x) повертає результат округлення до найближчого цілого.
• Math.random() повертає випадкове число з проміжку [0; 1].

Логічні оператори:

• || — оператор «або» (логічне «або»), який повертає true, якщо хоча б один з операндів дорівнює true, інакше повертає false;

• && — оператор «і» (логічне «і»), який повертає true, якщо обидва операнди дорівнюють true , інакше повертає false.

• !== — заперечення рівності, читати «відмінне» або «не дорівнює».

Умовний оператор має такий вигляд:

if (умова) вказівка₁;

або

if (умова) вказівка₁ else вказівка₂;

При справдженні умови браузер виконує вказівку₁. Для другої повної форми при хибності умови браузер виконує вказівку₂

Оператори циклу використовують для багатократного виконання послідов­ності операторів поки певне вислов­лювання не стане хибним. Схожий на оператори циклу оператор ітерації for…in, який використовують при роботі з об'єктами. JavaScript має такі форми оператора циклу (перелік неповний):

• for (ініціалізація; висловлювання; змiнa) вказівка
  
  Оператор for працює таким чином.

  1. Ініціалізація: лічильникам надають початкове значення.
  2. Встановлюють істинність висловлювання.
  3. При хибності переходять до наступної за for вказівки.
  4. Виконують вказівку.
  5. Виконують зміну лічильника.
  6. Переходять до пункту 2.
  
  Наприклад,
  
  for (var i = 0; i < 10; i++) document.write(i);
  
  виводить усі цифри у порядку зростання без пробілів між ними.

• while (висловлювання) вказівка
  
  Оператор while працює так.

  1. Встановлюють істинність висловлювання.
  2. При хибності переходять до наступної за while вказівки.
  3. Виконують вказівку й переходять до пункту 1.

Створення нового порожнього масиву myArray можна здійснити так:

var myArray= []

Нумерацію елементів починають з нуля. Номер вказують у квадратних дужках одразу після назви масиву. Елементам масиву можна надати різні за типом значення:

myArray[0]= 2011;
myArray[1]= "ua";

Розмiр масиву (кількість елементів) встановлюється динамічно. Наприклад, після виконання вказівки:

myArray[2011]= "kiev"

масив myArray містить щонайменше 2012 елементів.

Вбудовані функції масивів (деякі):

• myArray.length повертає довжину (кількість елементів) масиву результат округлення до найближчого цілогоmyArray;

• myArray.join(" ")) повертає рядок тексту, у якому записано значення елементів масиву через пробіл;

Звернення до симолів рядка (тексту) — таке саме, як до елементів масиву — за допомогою запису у квадратних дужках номера символа (нумерація починається з нуля). Наприклад, Name[4] — 5-ий символ рядка Name.

Виведення вікон:

• alert("Повідомлення") — для виведення повідомлення;
• s = prompt("Повідомлення") — для введення рядка s.

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

Задача. Створити проект гри «Поле чудес», в якій користувач має вгадати літери слова, вибраного випадковим чином.

Етапи розв’язання бажано отримати за допомогою конкурса ідей.

1. Задавання масиву слів.
2. Випадковий вибір слова.
3. Створення основного ігрового циклу.
4. Виведення слова:
   • відгадані літери на своїх місцях;
   • замість невідгаданих літер — символ підкреслення знизу «_».
5. Виведення повідомлень:
   • при порожньому введенні;
   • при введенні кількох літер.
6. Перевірка на повторювання літер.
7. Вихід з ігрового циклу у разі перемоги.
8. Вітання гравця з перемогою або застереження, що грати потрібно до перемоги.
9. Виведення правильної відповіді.

Для виконання наступних завдань використати демонстраційне розв'язання задачі, умову якої подано вище.

Завдання 1 (початковий рівень: ознайомлення з засобами програмування).

1. Відкрити файл демонстраційного розв'язання за допомогою різних браузерів.

2. Використавши контексне меню, переглянути код сторінки, користуючись коментарями.

3. Спробувати вгадати літери слів (радимо спочатку перебрати голосні, потім приголосні), вводячи літери української абетки. Перевірити дію коду при натисканні клавіші Esc при невідгаданому слові.

Завдання 2 (середній рівень: зміна коду).

1. Знайти частину коду, що задає перелік слів. Замінити наявні слова на довільні 5 назв понять певної навчальної дисципліни — за вказівкою вчителя.

2. Знайти частину коду, що відповідає за виведення символу «_» замість букви і змінити його на символ «*».

3. Зберегти зміни та перезавантажити сторінку з грою у браузері.

4. Перевірити роботу гри.

Завдання 3 (достатній рівень: обмеження кількості невдалих спроб корис­тувача).

1. Знайти частину коду з початком ігрового циклу.

2. Описати перед ним змінну count і надати їй значення 0.

3. До умови продовження ігрового циклу додати через логічне «і» (оператор &&) ще одну умову:
   
   count < word.length + 5

4. У тілі ігрового циклу (у розділі виведення стану гри) збільшити значення змінної count на 1.

5. Передбачити виведення відповідного повідомлення при перевищенні кількості невдалих спроб 5.

6. Зберегти код та перезавантажити сторінку у браузері.

7. Перевірити, чи працює обмеження спроб до 5 невдалих спроб.

Завдання 4 (високий рівень: істотна зміна коду). Внести у код такі зміни, що дозволяють ввести кілька літер в одному вікні діалогу.

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

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

1. Змінити код гри, передбачивши нечутливість до регістру літер.

2. Створити проект вгадування чисел у діапазоні від 1 до певного натурального n.

Текст упорядкувала Шитова Світлана Леонідівна, вчитель СЗШ № 13 імені І. Хитриченка Святошинського району міста Києва, під час курсів підвищення кваліфікації з 28.10.2018 по 02.11.2018.