Web программирование Практическое занятие 8 1
 Скачать 0.62 Mb.
|
|
Web- программирование Практическое занятие 8 1. Сегодня мы доделаем то, что не успели в прошлый раз. 2. А не успели мы добавить таймер обратного отсчёта, чтобы игра заканчивалась. 3. Но перед этим нужно, чтобы игра не начиналась неожиданно для игрока. У игрока должна быть возможность запустить её. Для этого мы создадим специальный блок div с приветственным текстом. Остальные блоки мы спрячем, так как они должны появиться только после старта игры. Прятать мы их будем с помощью команды .style.display = ‘none’ Создадим объект для приветственного сообщения и спрячем в начале все другие блоки 4. В самом начале игры у нас не должен работать обработчик передвижения мыши, так что закомментируйте его на время. Добавьте новый обработчик для запуска игры и присоедините его к документу по событию нажатия клавиши. 5. Что же нужно сделать, чтобы игра запустилась? Во-первых, проверить, что была нажата клавиша enter, а не любая другая. Для этого мы сравним код клавиши с 13. 13 – это код клавиши enter. После этого обнулим счёт, спрячем приветственное окно и покажем все остальные элементы – счёт, апельсин и свинку. Кроме того, и это важно, мы отключим обработчик нажатия клавиши и включим обработчик перемещения мыши командами removeEventListener и addEventListener соответственно. После этого можно смело перемещать апельсинку в случайную точку нашей командой spawnOrange(); 6. На данный момент игра должна начинаться с текста «нажмите клавишу…» и только после нажатия – запускаться. Проверьте, что так и есть. 7. Таймер – это счётчик временных интервалов. Благодаря ему мы можем запускать какие-то действие через определённые промежутки времени. Один из способов реализовать таймер – это воспользоваться командой setInterval (команда, время_в_мс), которая будет повторять код из первого параметра каждые (количество мс) из второго параметра. Если мы планируем отключать и включать этот таймер (а мы планируем), то лучше завести переменную для хранения ID таймера, чтобы по этому ID его выключать и включать. Для выключения используется команда clearInterval. Код на слайде повторять не нужно. 8. Как и раньше, создадим специальный div для вывода значения таймера, а также специальную переменную, в которой и будет хранится время, которое осталось игроку. Не забудем, что в начале мы не видим этот блок. 9. Напишем функцию для вывода информации о времени в div блок и запустим её в конце функции StartGame. 10. Создадим переменную для записи ID таймера, и назначим ей запуск функции cntdwn(); каждую секунду (1000 мс). 11. Сама же эта функция (cntdwn) очень проста – уменьшаем оставшееся время на единицу и выводим его в блок div. 12. На данный момент у нас должно уменьшатся время. Но это уменьшение не прерывается, так как у нас нет проверки на истечение времени. 13. Чтобы организовать эту проверку, в функции cntdwn добавим if, который будет проверять значение нашей переменной на 0. Если она равна нулю, то тогда мы: • Останавливаем таймер • Выключаем обработчик передвижения мыши • Выводим надпись о конце игры на экран • Прячем все остальные блоки • Подключаем обработчик нажатия клавиши клавиатуры. 14. Теперь по истечению времени у нас выводится такое окно. Игра официально закончена, можно соревноваться с друзьями. 15. Дополнительные задачи для страждущих. |