Урок 1. Создание браузерных игр (веб приложений) на JavaScript. Тренажер 2 в степени

0 просмотров 20 июн. 2023 г. СУРГУТ #созданиеигр #javascript #урокипрограммирования #браузерныеигры Сообщество Вконтакте: https://vk.com/club212762429 Ссылка на файлы: https://disk.yandex.ru/d/0lURCCS4ALVsoQ В рамках нашего конкурса интерактивных страниц «Планета Веб» (https://пвеб.рф), и как дополнение к урокам JavaScript, мы начинаем цикл видеоуроков по созданию браузерных игр (веб-приложений). Ориентир будем делать на дидактические обучающие игры, а курс разбиваем на модули, представленные в виде проектов. Объяснять буду максимально подробно, пошагово. Так, что каждый человек, посмотрев это видео, сможет повторить и получить аналогичный результат. Как на мотивационной картинке, постараемся исключить больших ступеней, которые поставят вас в тупик. Планомерно будем разбирать создание каждого проекта. Для создания веб-приложения мы будем разрабатывать сайт со сценариями на языке JavaScript. Для этого, как бы это странно не звучало, нам не нужно дополнительных объемных программ. Стандартных браузера и текстового редактора, например, Блокнот, будет достаточно. Создайте папку, откройте ее. Это будет наш проект. В этой папке создаем текстовый документ. Имя меняем на index.html. Важно, чтобы расширение фала было видно – это точка в конце имени и 3 буквы txt. Мы их стираем и пишем .html. У нас уточняют об изменении расширения фала. Жмем Да. Если операционная система не отображает расширения файлов, то в настройках, показываю для Windows 7, для других «операционок» можно найти алгоритм в интернете, нам нужно убрать галочку «Срывать расширения для зарегистрированных фалов». Открываем созданный файл с помощью Блокнота. В качестве минимального кода для начала мы напишем открывающие и закрывающие теги html, head и body. Ну и по традиции «Привет, Мир!». Сохраняем документ. Открываем его с помощью браузера. Блокнот как текстовый редактор не очень удобный. Мы будем пользоваться редактором Visual Studio Code. Это тоже текстовый редактор, он бесплатный, устанавливается очень просто. В поисковой строке пишем название программы. Скачиваем с официального сайта. Для операционной системы выше 8 установка проходит даже без прав администратора. Для Windows 7 воспользуйтесь старой версией по ссылке https://disk.yandex.ru/d/INid8s3OiKC60w Запускаем установку от имени администратора и со всем соглашаемся. Открываем программу. Нажимаем в меню File, Открыть папку (Open Folder…), находим нужную директорию. Выделяем мышкой папку и нажимаем Выбор папки. Visual Studio Code позволяет работать со всем проектом. Мы можем создать папку. Назовем ее JS. Там будем хранит JavaScript фалы. В нашей директории при этом данная папка тоже появилась. Открываем html файл. Здесь для удобства теги выделены цветом, также появляются подсказки и автоматически заполняет зарезервированные слова. Мы будем разрабатывать веб-приложения двух видов: с применением DOM-объектов (это непосредственно объекты браузера: картинки, текст) или с применением холста Canvas (элемент HTML5 для создания растровых изображений). Данный проект мы будем реализовывать первым способом - с помощью структуры DOM. Мы создадим DIV объекты и будем управлять их свойствами. Программа будет содержать все виды алгоритмов – это линейный, разветвленный и циклический. Мы можем представить, что HTML документ – это визуальная оболочка, к которой подключаем дополнительные файлы сценариев. Начнем с редактирования нашего файла index.html. Удаляем текст «Hellow World!» и добавляем блоки с идентификаторами – ID. Это DIV блоки, в которых будем отображать задание: в основании будет число 2 и степень, которая будет меняться от 2 до 10. Сохраним документ, откроем в браузере. Данные блоки пока размещены в левом верхнем углу. Для изменения свойств подключим файл стилей CSS, в котором опишем, ссылаясь на id объектов, их свойства. Подключение файла style.css мы осуществляем в разделе HEAD. Удерживая клавишу Ctrl на клавиатуре, нажимаем мышкой на style.css. Программа предлагает нам создать файл, соглашаемся. Для ссылки на id применяется знак решетка и его название. Даем абсолютное позиционирование в документе, отступы сверху 10%, и авто по краям. Левый отступ указываем 50%, цвет задаем фиолетовый. Наведя на цвет, мы можем изменить его, выбрав из палитры. Для объекта «основание» зададим прижиматься к левому краю, отступ сверху – 40 пикселей и размер шрифта 60 пунктов. Для объекта «степень», также прижиматься к левому краю, отступ сверху 24 пикселя и 30 пунктов размер шрифта. Сохраняем файл стилей. Не забываем сохранять изменения в фале index.html, переходим к браузеру, там страница уже загружена, мы просто обновляем ее. Блоки теперь размещены в центре.

Видео Урок 1. Создание браузерных игр (веб приложений) на JavaScript. Тренажер 2 в степени автора Планета Веб