Тема: реалізація алгоритму гри «Сапер» з визначенням для кожного елемента таблиці кількість сусідніх елементів з мінами мовою Javascript.

Мета:

• навчити учнів створювати програми мовою Javascript;
• розвинути:
  • уважність;
  • здатність логічно мислити;
  • розраховувати час виконання роботи;
  • уміння використовувати на практиці набуті знання і навички;
• виховати:
  • самодисципліну;
  • відповідальність за якісне виконання роботи.

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

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

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

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

2. Актуалізація опорних знань
Протлумачити дію вказівок мовою Javascript і порівняти з очікуваними відповідями.

• function f(){…} — оголошення функції f;
• a=new Array(); — оголошення масиву а;
• for(i=0; i<n; i++) {…} — запис n-кратного повторення виконання вказівок;
• if (умова) {вказівка} — якщо справджується умова, виконати вказівку;
• if (умова) {вказівка₁} else {вказівка₂} —
  при справдженні умови виконати вказівку₁, інакше — вказівку₂;
• Math.round(x) — результат округлення х до найближчого цілого;
• Math.random() — випадкове число з проміжку [0; 1];

• <img src='g.svg' name='Im' border=1> — опис у коді html
  розташування з назвою Im зображення з файлу g.svg;

• document.Im.src="0.svg"; — опис у коді Javascript
  зміни на "0.svg" назви файлу в розташуванні Im;

• <form><input type=button value="напис" onClick="f()"></form>
  — опис у коді html форми з кнопкою виклику функції f.

Правила комп'ютерної гри «Сапер»

Мета гри: знайти всі порожні клітинки, не зачепивши міни.
Рівні складності вказують, обираючи розмір поля.
Початок гри: потрібно клацнути по довільній клітині ігрового поля.
Перебіг гри:

• якщо відкрито клітину з міною, гру програно;
• якщо відкрито всі клітини без мін, гру виграно;
• інакше гра триває.

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

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

Розглянемо таке навчальне завдання.

Завдання. Створити комп'ютерну гру «Сапер» мовою Javascript.

При виконанні цього завдання доречно скороистатися такими можливостями мови Javascript.

• myWin= open("", "displayWindow", "width="+x+",height="+y+",status=yes, toolbar=yes, menubar=yes"); — відкриття вікна з назвою myWin розміру x × y;

• myWin.document.open(); — відкриття на запис коду, що у вікні myWin;
• myWin.document.write('текст'); — запис тексту у коду, що у вікні myWin;
• myWin.document.close(); — закриття на запис коду, що у вікні myWin.

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

Вказівки до виконання завдання:

1. Створити сторінку html з формою, що містить кнопку виклику функції. Порівняти з очікуваним.

2. У коді Javascript описати функцію, у тілі якої:

   • описати і задати значення висоти й ширини поля й кількості мін;
   • описати масиви:
     • для вибору номерів полів з мінами;
     • обліку кількостей сусідів;
   • заповнити описані масиви, тобто:
     • випадково вибрати поля з мінами;
     • для кожного з полів підрахувати кількість сусідніх полів з мінами;
     • для полів з мінами замість цієї кількості взяти 9.

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

3. Створити код для гри на полі сталої конфігурації (наприклад, 2×2) зі сталою кількістю мін (наприклад, 2), використавши такі зображення у форматі svg:

   
   

   Перші 9 зображень використати для відкритих полів без мін, одне з наступних двох — для полів з мінами (не кожний браузер коректно відображає перший з них), зелений квадрат — для невідкритого поля. Одне з останніх двох зображень виводити при завершенні гри. Для контейнера <a onClick ="…">…</a> в обробнику події клацання onClick (замість першої трикрапки) записувати заміну назви файлу зображення або виклик функції, що робить такі заміни. Код писати з розрахунку, що його було легко створити програмою. Порівняти з очікуваним.

4. На основі створеного на попередньому кроці коду доповнити код функції вказівками Javascript динамічного створення вікна для гри «Сапер» із довільним розміром поля. Порівняти з очікуваним.

5. Перевірити роботу програми. У разі потреби внести зміни. Порівняти з роботою демонстраційного розв'язання.

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

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

Текст упорядкував Суденко Оксана Анатоліївна, вчитель СЗШ № 66 Дніпровського району міста Києва, під час курсів підвищення кваліфікації з 22.10.2018 по 26.10.2018.