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

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

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

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

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

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

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

Хід уроку

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

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

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

Алгоритмічна структура повторення
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>")

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

• властивості left (абсциси) ЛВК елемента з назвою (ідентифікатором) 'r'
  document.getElementById('r').style.left = '9px';

• властивості visibility (видимість) елемента з назвою 'button'
  document.getElementById('button').style.visibility = 'hidden';

Періодичний виклик функції 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) з певним кольором тла. Наприклад, таким чином:

• у заголовку (контейнер head) вказати стиль:

  <style>
    .field { width:360px;
            height:360px;
  background-color:#003300;
          position:absolute;
              left:10px;
               top:10px}
  </style>

• у тілі сторінки (контейнер body) вказати використання блоку:

  <div class='field'> </div>

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

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

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

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

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

• початкові значення параметрів:

  var
  w = 760; // ширина відображуваного поля
  h = 560; // висота відображуваного поля
  dw= 10;  // відступ по горизонталі від краю вікна
  dh= 10;  // відступ по вертикалі від краю вікна
  a = 20;  // довжина сторони клітини ігрового поля
  da= 2;   // відступ від краю клітини до зображення сегмента змійки
  i = 0;   /* стан гри:
            0 - до оголошення результату (змійка пересувається)
            1 - користувач програв
            2 - користувач виграв
            3 - повідомлення про результат уже виведено
                і потрібно перезавантажити сторінку */
                // номер клітини з "плодом"
  do { x0 = Math.trunc(Math.random()*(w/a-1));
       y0 = Math.trunc(Math.random()*(h/a-1));
     }
  while ((x0 <= 4) && (y0==1));
  
  n_max = 20;// максимальна кількість сегментів змійки,
             // досягнення якої вважають перемогою гравця 
  n = 4;     // початкова кількість сегментів змійки
             // опис змійки "з хвоста"
  x = new Array (1,2,3,4); // номери клітини по горизонталі
  y = new Array (1,1,1,1); // номери клітини по вертикалі
  z = new Array (0,0,0,0); /* напрям руху сегмента:
                           0 - ліворуч;
                           1 - догори;
                           2 - праворуч;
                           3 - донизу */

• стилі поля кольору #003300, білого сегмента "змійки" і червоного "плоду";

• розташування поля, сегментів "змійки" і "плоду" на сторінці;

• виведення кнопки з написом "Почати гру" і автофокусом, натискання на яку призводить до виклику функції f;

• функцію f, яка перетворює кнопку на навидиму і викликає функцію g з періодичністю 1/5 секунди;

• функцію g, у тілі якої виконати такі дії:

  • при i = 1 або i = 2:
    • вивести повідомлення про результат гри;
    • надати значення і = 3;
    
    
  • при і = 0:
    • відстежувати подію натискання клавіші зі стрілкою;
    • змінити напрям руху голови залежно від натиснутої клавіші;
    • визначити наступне розташування голови "змійки";
    • надати значення i = 1 при спробі перетнути межу ігрового поля або самоперетину;
    • при і = 0:
      • при поглинанні "плоду":
        • збільшити довжну "змійки";
        • розташувати "плід" у новому випадковому місці;

      • інакше (без поглинання "плоду") продовжити рух, тобто координатам і напряму руху кожного сегмента "зміки" надати значення відповідних координат наступного сегмента, рахуючи від "хвоста змійки", а "голову" розашувати вже визначене місце з тим самим напрямом руху.

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

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

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

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