Файл: Курсовой проект По дисциплине По теме.docx

МИНИСТЕРСТВО НАУКИ И ВЫСШЕГО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИфедеральное государственное автономное образовательное учреждениевысшего образования«Северный (Арктический) федеральный университет имени М.В. Ломоносова»Высшая школа информационных технологий и автоматизированных систем^{(наименование высшей школы / филиала / института / колледжа)привет от автора)}Курсовой проект

По дисциплине
По теме	Разработка веб-сайта – Академия красоты Рахматулиной Анны
Выполнил обучающийся: Белоусов Андрей Фёдорович
(Ф.И.О.)
Направление подготовки: Информатика и вычислительная техника
(код и наименование)
Курс: 2
Группа: 151119
Руководитель: Деменкова Е.А
(Ф.И.О. руководителя, должность / уч. степень / звание)

Отметка о зачете
		(отметка прописью)		(дата)
Руководитель				Е.А. Деменкова
		(подпись руководителя)		(инициалы, фамилия)

---

Архангельск 2023Министерство науки и высшего образования Российской Федерациифедеральное государственное автономное образовательное учреждениевысшего образования«Северный (Арктический) федеральный университет имени М.В. Ломоносова»

ЗАДАНИЕ НА РАСЧЕТНО-ГРАФИЧЕСКУЮ РАБОТУ

по

Web-технологиям

студенту

ИТАС

высш. школы

2

курса

151119

группы

Белоусову Андрею Фйдоровичу

09.03.01 Информатика и вычислительная техника

ТЕМА:

Разработка веб-сайта – Академия красоты Рахматулиной Анны

ИСХОДНЫЕ ДАННЫЕ:

литература по теме, информация

Срок выполнения с

«

5

»

мая

2023 г. по

«

24

»

мая

2023 г.

Руководитель работы

Доцент кафедры

Деменкова Е.А

(подпись)

---

Архангельск, 2023

лист замечаний

содержани1 Теоретическая часть 51.1Описание предметной области и постановка задачи 51.2Выбор инструментов и методов реализации 52 Описание работы приложения 72.1 Создание формы сайта 72.2 Скрипт приложения 7Заключение 12Список использованных источников 13

1 Теоретическая часть

1. Описание предметной области и постановка задачи

Предметной областью выступает индустрия сайтов, для вхождения в которую в качестве разработчика требуется большой порог вхождения и опыт написания кода. Для наработки опыта была поставлена задача разработать сайт, в котором будут отражены услуги косметологии и контактная информация, соответствующая современным технологиям. Сайт – Одна или несколько логически связанных между собой веб-страниц; также место расположения контента сервера. Обычно сайт в Интернете представляет собой массив связанных данных, имеющий уникальный адрес и воспринимаемый пользователями как единое целое. Веб-сайты называются так, потому что доступ к ним происходит по протоколу HTTP.

---

2. Выбор инструментов и методов реализации

В качестве языка разработки используется язык верстки HTML5 и CSS3. HTML5 – Язык для структурирования и представления содержимого всемирной паутины. Это пятая версия HTML. Хотя стандарт был завершён только в 2014 году, уже с 2013 года браузерами оперативно осуществлялась поддержка, а разработчиками - использование рабочего стандарта. Цель разработки HTML5 - улучшение уровня поддержки мультимедиатехнологий с одновременным сохранением обратной совместимости, удобочитаемости кода для человека и простоты анализа для парсеров.Спецификация CSS3 — это неоспоримое будущее в области декоративного оформления веб-страниц, и ее разработка еще далека от завершения. Большинство модулей все еще продолжает совершенствоваться и модифицироваться, и ни один браузер не поддерживает все модули.Для разработки дизайна сайта используется браузерное приложение Figma.Figma — онлайн-редактор, в котором удобно проектировать интерфейсы, создавать макеты сайтов, мобильных приложений, презентации, иллюстрации, логотипы и анимацию. В основном инструментом пользуются дизайнеры, но продакт-менеджерам и разработчикам тоже полезно разбираться в программе. Так участникам проекта будет проще понимать друг друга и работать над продуктом.Разработка делится на следующие этапы:- определение структурный информации,- разработка рабочего дизайна,- верстка сайта,- тестирование сайта- исправление до конечной версии,- адаптив сайта,- проведение SEO оптимизации, - завершение разработки.

2 Описание работы приложения

2.1 Создание формы сайта

С помощью CSS и HTML создается форма для приложения. В этой форме указываются базовые стили для всего документа, тела и указывается сторонний шрифт для использования внутри скрипта. В теле указываются всего две строчки: параметр canvas с размерами поля и объявляется инициализация скрипта приложения. Код данной страницы приведен в листинге 1.Листинг 1 – HTML страница

2.2 Скрипт приложения

Для начала делаем массив для игрового поля и заполняем его пустыми значениями. Далее создаем массивы, которые хранят структуру и цвета фигур. В отдельном массиве будут храниться новые фигуры, которые появятся следующими в очереди. Каждая фигура – это двумерный массив, состоящий из нулей и едениц.

---

Листинг 2 – Инициирование переменных

//доступ к холсту const canvas = document.getElementById('game'); const context = canvas.getContext('2d'); //размер квадратика const grid = 32; //массив с последовательностью фигур const tetrominoSequence = []; //двумерный массив, чтобы следить за тем, что находится в каждой клетке поля const playfield = []; for (let row = -2; row < 20; row++) { playfield[row] = []; for (let col = 0; col < 10; col++) { playfield[row][col] = 0; } } // формы для фигур const tetrominos = { 'I': [ [1,0,0,0], [0,1,0,0], [0,0,1,0], [0,0,0,1] ],

Листинг 2 – Инициирование переменных

'J': [ [0,1,0], [1,1,1], [0,0,0], ], 'L': [ [1,0,1], [0,1,0], [0,0,0], ], 'O': [ [0,1], [1,0], ], 'S': [ [1,1,1], [1,1,0], [1,0,0], ], 'Z': [ [1,1,1], [0,0,0], [0,0,0], ], 'T': [ [0,0,0], [0,1,0], [0,0,0], ], '+': [ [0,1,0], [1,1,1], [0,1,0] ] }; // цвета блоков const colors = { 'I': 'cyan', 'O': 'yellow', 'T': 'purple', 'S': 'green', 'Z': 'red', 'J': 'blue', 'L': 'orange', '+': 'purple' }; let count = 0; //счетчик let tetromino = getNextTetromino(); //текущая фигура в игре let rAF = null; // следим за кадрами анимации, чтобы если что остановить игру let gameOver = false; //флаг в конце игры

Далее генерируем выпадающие фигуры. Для этого нужна функция, которая выдает случайное число в заданном диапазоне. Поэтому числу определится какая фигура выпадет следующей.Листинг 3 – Функция задания случайный чисел

function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; }

Теперь мы можем создать последовательность выпадающих фигур. Логика программы следующая:

1. 
   Задана обычная последовательность доступных фигур;
   
2. 
   Случайным образом оттуда вытаскивается одна фигура и помещается в последовательность;
   
3. 
   Так делается до тех пор, пока от обычной последовательности ничего не останется;
   
4. 
   Получили случайную игровую последовательность фигур.
   

Листинг 4 – Создание последовательности фигур

function generateSequence() { const sequence = ['I', 'J', 'L', 'O', 'S', 'T', 'Z', '+']; while (sequence.length) { const rand = getRandomInt(0, sequence.length - 1); // на рандом выбираем одну из них const name = sequence.splice(rand, 1)[0]; tetrominoSequence.push(name); //помещаем фигуру в массив } }

Чтобы получить из данной игровой последовательности фигуру, которая должна появиться, мы должны знать что это за фигура, как она рисуется, откуда она начинает движение. На выходе мы

---