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

Тема: cтворення нескладної комп’ютерної гри з викорис­танням змінних величин мовою Javascript.

Мета: навчитися створювати та редагувати програму мовою Javascript.

Після виконання роботи учень:

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

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

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

Хід уроку

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

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

Умовний оператор
if (логічний вираз) оператор;
if (
логічний вираз) оператор1 else оператор2;

Алгоритмічна структура повторення
while (логічний вираз) вказівка;
do {вказівки циклу} while (логічний вираз);
for (вказівки_початку; умова_циклу; вказівки_кінця_ітерації) {вказівки циклу}


Виведення інформаціного вікна з повідомленням
alert('Повідомлення');

Cтворення масиву зі значеннями елементів 1, 2, 3
x = new Array (1,2,3);

Випадкове число з проміжку [0, 1]
Math.random()

Результат відкидання дробової частини від числа х
Math.trunc(х)

Запис даних у поточну сторінку
document.write("текст або код HTML");

Стиль кнопки з написом "Почати гру" і автофокусом, натискання на яку призводить до виклику функції f
<div class='button' id='button'>
<input type='button' value='Почати гру' onkeydown='f(event)' onmousedown='f(event)' autofocus>
</div>")


Зміна властивості елемента сторінки:

Періодичний виклик функції f щосекунди
setInterval (f, 1000);

Опрацювання натискання клавіш засобами Javascript можна здійснити таким чином::

  document.addEventListener // відстеження події натискання клавіші
    ( "keydown",
      function(event)
      { c=event.keyCode;
        switch (c)   /  опрацювання натискання клавіш: 
        { case (37): /* ArrowLeft  ← */ break;
          case (38): /* ArrowUp    ↑ */ break;
          case (39): /* ArrowRight → */ break;
          case (40): /* ArrowDown  ↓ */ break;
        }
      }
    )

Зображення одноколірного прямокутника можна отримати, розташувавши блок (контейнер div) з певним кольором тла. Наприклад, таким чином:

У цьому випадку на спорінці з відступами 10px по вертикалі й горизонталі від верхнього лівого кута сторінки буде зображено квадрат зі стороною 360px темнозеленого кольору #003300.

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


Snake (Пітон, Удав, Змійка)комп'ютерна гра Танелі Арманто, що уперше з'явилася у кнопочному телефоні Nokia 6110. Гравець керує довгою тонкою істотою, схожою на змію, яка повзає клітинами прямокутного поля, збираючи їжу й уникаючи зіткнення з власним хвостом і краями ігрового поля. Кожного разу після поглинання їжі змія стає довшою. Зазвичай, на один сегмент, що займає одну клітину ігрового поля — див. приклад.

Завдання: cтворити гру «Змійка» (Snake).

Вказівки до виконання
Створити файл html з кодом Javascript, у якому описати таке:

Файл записати у вказану вчителем теку. Порівняти з очікуваним.

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

6. Домашнє завдання
Удосконалити програму, додавши запам'ятовування резуль­татів гри і збільшивши кількість плодів.


Текст упорядкував Олександр Рудик