Розробка уроку

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

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

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

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

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

Хід уроку

1. Організаційний момент

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

або

if (умова) вказівка1 else вказівка2;

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

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

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

var myArray= []

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

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

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

myArray[2011]= "kiev"

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

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

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

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

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.