Проект 2 #1 Шутер - Пиратская математика. Общие классы для нескольких проектов в JavaScript

Описание

#javascript #браузерныеигры #созданиеигр #урокипрограммирования #классыjavascript
Сообщество Вконтакте: https://vk.com/club212762429
Ссылка на файлы: https://disk.yandex.ru/d/XqTf4QGXmDZ55Q
Уроки JavaScript: https://xn--90abj2b.xn--p1ai/lessons_JS/les1/index.html
https://пвеб.рф/lessons_JS/les1/index...
Приветствую вас на нашем виртуальном уроке по изучению клиентского языка JavaScript. Мы переходим ко второму проекту это браузерная игра пиратская математика. Игра направлена на развитие навыка сравнивать числа. На предыдущих уроках мы уже рассмотрели механизм создания HTML документы с помощью текстового редактора блокнот или Visual Studio code. Каждый новый проект будет опираться на знание предыдущих игр, поэтому подробно рассматривать процесс создания файлов сайта, процесс изменения расширений, установку текстового редактора мы не будем. В случае необходимости будем ссылаться на предыдущие уроки. В игре пиратская математика Нам необходимо защищать Наш корабль. Сбивая летающих роботов, мы получаем бомбы с различными числами. В центре экрана находится условия например нам нужно выбрать числа Больше шести. В этом случае счёт будет ограничен на единицу. Завершается игра через заданное запрограммированное время. Результат - это количество набранных баллов. При создании второго проекта мы рассмотрим, как можно использовать одни и те же классы для нескольких игр. Персонажи в разных проектах будут подчиняться одним и тем же свойством классов. Второй урок будет посвящен слушателям событий мыши. Мы рассмотрим движение и щелчок мышки. Игры созданные с помощью структуры DOM имеют преимущества использовать GIF анимацию. Это будет третий урок. Основа всех игр - это, конечно же, взаимодействие между объектами. Противники атакуют союзных персонажей. И, наоборот, союзники могут защищаться. Такую группировку можно осуществлять при помощи имён класса. И пятый урок Мы посвятим музыкальному оформлению игры. Сегодня первый урок и мы планируем наш проект. Первого проекта. Скопируем папку и сделаем из неё заготовку, чтобы сэкономить время при создании новых игр. Откроем папку с первым проектом/ Давайте посмотрим и удостоверимся что всё работает. Часть кода будет универсальной для всех проектов. Мы будем использовать во всех проектах базовый класс, файлы стилей CSS. А вот некоторые классы будут частными, создаются для конкретных игр - их мы удаляем. Удаляем название игры. Пишем заготовка. Вставляем блоки задания, сцены один, поле счёт. Основную программу тоже оставляем prog.js. Сохраняем файл индекс HTML. Открываем основную программу. Здесь остаются переменные, функция draw() и базового класса. Далее идут условия для конкретной игры , они будут меняться. Их удаляем. Функция Flick формируется в базовом классе с0, поэтому она остаётся. Даже если в игре не предусмотрено нажатие на персонажах, функции всё равно должна остаться. Просто она будет пустой. Оставляем ID и имя класса. Остальное убираем. Закрываем основную программу. Классы для одной конкретной игры, это c_move() и c_bonus() тоже убираем. В базовом классе ничего менять не будем. Процесс его создания рассматривается в первом проекте. Здесь мы задаём свойства объектов - это координаты, ширина, высота, угол направления движения Альфа. Функция конструктор запускается в момент создания объекта. Здесь мы создаём div-объект, таймер его удаление и слушатель нажатия мышки Flick. Также мы разработали функции движения вперёд идти в точку. Функция f0 меняет свойства див объектов. Оставляем всё без изменений. Стили оформления CSS для каждой конкретной игры будет свой, но для заготовки мы ничего менять не будем. Скопируем папку. Изменение названия на заготовка. Папка используется в программе Visual Studio Code. Папку заготовка мы редактировать практически не будем. Поэтому скопирование папку мы вставляем и уже её используем для создания сейчас мы рассмотрим алгоритм формирование папки для нескольких проектов, когда мы можем использовать общие классы в разных играх. Изменим название файла индекс HTML на тренажёр два в степени. Также, поменяем название основной программы, добавив в тренажёр два в степени. Поменяем название файла стилей CSS. Скопируем Это дополнение в названии и Встаём в название непосредственно самого файла стилей и файла основной программы. В нашей заготовке имеются картинки. Мы будем использовать не только файлы JPEG, но и PNG, а также GIF анимацию, поэтому поменяем название папки на Image все картинки мы подгружаем через оформление в стилях, поэтому новый путь к картинкам Нужно обновить именно в этом файле. Вместо JPEG автоматически все ссылки поменяем на Image.