Webпрограммирование Практическое занятие 7
 Скачать 0.5 Mb.
|
|
Web- программирование Практическое занятие 7 1. На сегодняшнем занятии мы научимся повторять события через определённый промежуток времени, а также создавать элементы страницы с помощью скрипта. 2. Цель занятия – сделать простую игру. Мы мышкой управляем свинкой, которая собирает апельсины. За апельсины она получает очки. Также есть обратный отсчёт времени, который ограничивает игровую сессию. Давайте подумаем, что должно быть в программе, чтобы такая игра работала. Подсчёт очков и запись в переменную Проверка на касание игроком апельсина Обратный отсчёт времени Управление свинкой по событию передвижения мыши Желательно, стартовый и финальный экран с отображением результата. 3. Главное отличие сегодняшнего занятия в том, что мы практически ничего не будем писать в html. Нужно будет лишь установить кодировку в utf-8 и подключить скрипт. Повторите код. 4. Мы можем добавлять новые элементы на страницу с помощью команды insertAdjacentHTML , которая принимает следующие параметры: 1) место вставки и 2) сам элемент, который нужно вставить. Добавлять элементы мы будем в body, и его нужно сначала найти на странице. Искать мы будем по тегу, а не по id, так что команда getElementsByTagName вернёт нам целый массив элементов с таким тегом. В нашем случае у нас на странице только один тег body, так что массив будет из одного элемента. если мы хотим обратиться именно к этому элементу, нужно указать его индекс [0]. С помощью этой команды мы вставим в страницу тег img, указав путь к картинке со свинкой, и присвоим ей id, чтобы потом найти при случае. А вот этот случай и наступил, для простоты мы заведём переменную pig, в которой будем хранить этот элемент и обращаться к его свойствам по мере необходимости. Для того, чтобы перемещать свинку по экрану независимо от других элементов, установим стиль позиционирования как fixed. 5. Чтобы управлять свинкой, мы должны создать обработчик события по движению мыши. Каждый раз, когда мышь будет перемещаться, наша свинка будет обновлять свои координаты. Также мы будем иногда отключать этот обработчик, так что имеет смысл завести отдельную переменную для этого обработчика и присвоить ей безымянную функцию, вызывающую нашу функцию mouseMoveFunc, внутри которой и будет происходить обновление координат свинки. Нам очень важно передавать событие как event , чтобы мы могли получить координаты мыши. Чтобы присоединить этот обработчик, воспользуемся известной нам командой addEventListener. В функции будем менять стиль свинки, приравнивая ей координаты мыши через event.clientX и event.clientY. Выясните самостоятельно, зачем стоит -64. Вуаля, свинка бегает за мышкой. 6. Схожим образом добавляем апельсин. Пишем для него специальную функцию, с помощью которой мы будем его помещать в случайное место экрана. Чтобы это место было случайным, мы используем команду Math.random(), которая генерирует число от 0 до 1. Чтобы это число стало координатами по X и Y, будем умножать его на ширину и высоту окна. Зачем нужны -128? Дело в том, что без них наш апельсин может выходить за границы окна, слишком низко и слишком направо. 128 – размер картинки. Не забудьте поставить вызов функции, чтобы задать случайное расположение. 7. Как проверить, касаются ли наши объекты? Немного схитрим, и будем думать, что наши объекты – круги. Как определить, касаются ли они? Проще, чем кажется, нужно всего лишь вычислить расстояние между ними. Если оно вдруг окажется меньше суммы их радиусов, то явно один круг залез на другой. Воспользуемся теоремой Пифагора, чтобы вычислить гипотенузу. 8. Для реализации проверки на касание, нам понадобятся две функции Math.sqrt для вычисления корня, и Math.pow(число, степень) для возведения в степень, а также метод offsetTop и offsetLeft, чтобы узнать координаты объекта. Проверяем на «меньше 128», так как радиус каждой картинки – 64. Если расстояние меньше 128, перемещаем апельсин в другую точку. Добавьте этот код и проверьте, что свинка касается апельсинки и та перемещается. 9. Создадим элемент div, в котором будем писать набранные очки. Создаём его привычным способом, но есть особенность. Нельзя путать объект под именем ScoreObj и само количество набранных очков. Для очков мы создадим отдельную переменную – score. Её содержимое и будем выводить на экран в объекте ScoreObj. 10. Напишем функцию, которая будет обновлять содержимое нашего div, записывая туда количество очков. В начале программы не забудем вызвать эту функцию со значением 0, чтобы начинать с 0, а в проверку касания добавим инкремент очков и вызов этой функции, где параметром мы и передадим score. 11. Мы реализовали первую половину функционала – мы можем собирать апельсинки и получать за это очки. Остальную часть мы реализуем на следующем занятии. |