РАСЧЕТНАЯ РАБОТАПО ДИСЦИПЛИНЕ «МОДЕЛИРОВАНИЕ И

АНАЛИЗ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ»НА ТЕМУ: ПРОЕКТИРОВАНИЕ И

РАЗРАБОТКА ПРОГРАММНОГО ПРОДУКТА

ВЫПОЛНИЛА СТУДЕНТКА ГРУППЫ ПОС-10В ЗАВОЛЬНЮК М.А.

РУКОВОДИТЕЛЬ СТ. ПРЕП. ГУДАЕВ О.А.

Донецкий Национальный Технический Университет

PIXELCRAFTКЛАСС ПО: СИСТЕМНЫЙ WEBGL-КЛАСС ВЕКТОРНОЙ SVG-

ГРАФИКИ.

НИК: WEB-ИНТЕРФЕЙС САЙТА В СТИЛЕ 2D MINECRAFT.

ТЕМА: ОТОБРАЖЕНИЕ ПУНКТОВ ГРАФИЧЕСКОГО ИНТЕРФЕЙСА 2D ПОЛЕМ ПЛИТОК В ИГРОВОЙ «ПЕСОЧНИЦЕ».

НАЗНАЧЕНИЕ: ПРИМЕНЕНИЕ ДВУХМЕРНОГО ИГРОВОГО ПОЛЯ «ПЕСОЧНИЦА СТРОИТЕЛЬНЫХ БЛОКОВ PIXELCRAFT» ПЛИТОК КАК ЭЛЕМЕНТА УПРАВЛЕНИЯ ГРАФИЧЕСКИМ ИНТЕРФЕЙСОМ САЙТА ИЛИ ПРОГРАММЫ ДЛЯ СЕНСОРНОГО ЭКРАНА.

«ПОСТРОЕНИЕ КОНЦЕПТУАЛЬНОЙ МОДЕЛИ

ЗАДАННОЙ ФУНКЦИОНАЛЬНОСТИ ПРИ

ПОМОЩИ САПР «CONCEPTDRAW»

Главной задачей проекта является организация навигации в стиле “Pixelcraft”. На рис.1 показана подзадачи, которые необходимы для создания проекта.

Рисунок 1- Цель и необходимые подзадачи

НА ЧТО И НА КОГО РАССЧИТАНО.

Перед созданием проекта необходимо определиться где будет применяться разработанный продукт , какими средствами и кем.На рис 2-3 представлены средства, участники и применение продукта.

Рисунок 2-на что рассчитано

РИСУНОК 3-УЧАСТНИКИ

После прохождения предыдущего этапа(применение проекта) необходимо определить какие элементы будут составлять структуру программы в целом. На рис 4 представлены объекты, составляющие структуру программы и основные действия (рис 5)Существует следующий набор объектов – карман, сундук и поле.Поле размечено невидимой или полупрозрачной к фону сеткой прямоугольных ячеек. Ячейка - это пустое место поля, занятая ячейка поля - это плитка.Плитки добавляются динамически программным способом разработчиком сайта в свободную ячейку с начала игрового мира или мир формируется заданной конфигурации. Пользователю сайта доступны главные действия с плиткой: переход по ссылке; забрать плитку в «карман»; поставить плитку из «кармана» или «сундука». Пользователь собирает плитки из ячеек в карман, при этом освобождаемая ячейка на поле отображается цветом подложки.Карман - это временный список плиток для перемещения по игровому полю. Если пользователь не решил, куда поставить плитку на игровом поле, то он может переместить её в сундук. Сундук - это долговременный список ненужных на поле плиток. Плитки в кармане организованы очередью FIFO.Структура поля представлена подробно на рис 6.

РИСУНОК 6 - СВОЙСТВА ПОЛЯ

РИСУНОК 7- ФУНКЦИОНАЛ ПРИЛОЖЕНИЯ

НА РИС 7 ПРЕДСТАВЛЕН ФУНКЦИОНАЛ ПРИЛОЖЕНИЯ. НА РИСУНКЕ 8 ПРЕДСТАВЛЕНЫ ВАРИАНТЫ ОРГАНИЗАЦИИ

НАВИГАЦИИ ПО САЙТУ С ПОМОЩЬЮ МЫШИ

Рисунок 8- вариант навигации по сайту с помощью мыши

1 Обьекты1.1 Карман1.2 Сундук1.3 Поле1.3.1 специальная плитка 1.3.1.1 Стикер1.3.1.1.1 Свойства1.3.1.1.1.1 не имеет рамки1.3.1.1.1.2 не имеет картинки1.3.1.1.1.3 может занимать несколько ячеек1.3.2 Сетка1.3.2.1 Разметка1.3.2.2 Прозрачность1.3.3 Оформление1.3.3.1 подложки1.3.3.1.1 "лунная поверхность" 1.3.3.1.2 "крупная листва"1.3.3.1.3 "континенты планеты"1.3.3.1.4 "голубой океан"

1.3.2.2 Прозрачность1.3.3 Оформление1.3.3.1 подложки1.3.3.1.1 "лунная поверхность" 1.3.3.1.2 "крупная листва"1.3.3.1.3 "континенты планеты"1.3.3.1.4 "голубой океан"1.3.3.2 Цвет фона1.3.3.3 Градация 2-х цветов1.3.4 Плитка1.3.4.1 Текст1.3.4.1.1 положение отностильно картинки1.3.4.1.1.1 Справа1.3.4.1.1.2 Снизу1.3.4.1.1.3 Вверху1.3.4.1.1.4 Слева1.3.4.1.2 Размер1.3.4.1.3 Шрифт1.3.4.2 оформление1.3.4.2.1 цвет фона1.3.4.2.2 рамка1.3.4.2.3 картинка

1.3.3.2 Цвет фона1.3.3.3 Градация 2-х цветов1.3.4 Плитка1.3.4.1 Текст1.3.4.1.1 положение отностильно картинки1.3.4.1.1.1 Справа1.3.4.1.1.2 Снизу1.3.4.1.1.3 Вверху1.3.4.1.1.4 Слева1.3.4.1.2 Размер1.3.4.1.3 Шрифт1.3.4.2 оформление1.3.4.2.1 цвет фона1.3.4.2.2 рамка1.3.4.2.3 картинка

2 На что рассчитано2.1 Средства2.1.1 Сенсорный монитор2.1.2 Мышь2.2 Применение2.2.1 управления графическим интерфейсом сайта 2.2.2 программы для сенсорного экрана3 Участники3.1 Разработчкик3.2 Пользователь3.3 Бот4 Действия для навигации4.1 Переход по ссылке4.2 Забрать 4.3 Поставить

5 ФУНКЦИИ

5.1 ЗАРЕГИСТРИРОВАННЫЕ ПОЛЬЗОВАТЕЛИ

5.1.1 РАЗМЕЩЕНИЯ НА ПОЛЕ ПЛИТОК СОХРАНЯЕТСЯ В БАЗЕ ДАННЫХ

5.2 ОБРБОТЧИКИ СОБЫТИЙ

5.2.1 МЫШЬ

5.2.1.1 RCLICK

5.2.1.1.1 УДЕРЖИВАНИЕ ПЛИТКИ

5.2.1.1.1.1 ЗАБИРАЕМ ПЛИТКУ В КАРМАН

5.2.1.1.2 "ТРУСИМ КУРСОР" НАД ЯЧЕЙКОЙ

5.2.1.1.2.1 "СБРАСЫВАЕТСЯ" ПЛИТКА ИЗ ОБОЙМЫ КАРМАНА

5.2.1.1.2.2 СТЕК КАРМАНА СДВИГАЕТСЯ

5.2.1.2 LCLICK

5.2.1.2.1 УДЕРЖИВАНИЕ

5.2.1.2.1.1 ПРИКОСНУТСЯ И ДЕРЖАТЬ

5.2.1.2.1.1.1 ПЛИТКА ИЗ КАРМАНА ПЕРЕТЕКАЕТ

5.2.1.2.1.1.1.1 ЭФФЕКТ

5.2.1.2.1.1.1.1.1 КАПЕЛЬКИ ВОДЫ

5.2.1.2.1.1.1.1.2 ЗАДЕРЖКА 20 МС

5.2.1.2.1.1.2 ДОБАВЛЕНИЕ ПЛИТОК

РАЗРАБОТКА СТРУКТУРНО-ФУНКЦИОНАЛЬНОЙ МОДЕЛИ. СХЕМА ИНФОРМАЦИОННЫХ

ПОТОКОВ

«ОБЪЕКТНОЕ МОДЕЛИРОВАНИЕ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ С ПОМОЩЬЮ СПЕЦИФИКАЦИИ UML.

ПОСТРОЕНИЕ UML-ДИАГРАММ»

РАЗРАБОТКА ПОЛЬЗОВАТЕЛЬСКОГО

ИНТЕРФЕЙСА ПРИ ПОМОЩИ СПЕЦИА ЛИ ЗИРОВАННОГО

ГРАФИЧЕСКОГО ИНСТРУМЕНТА «GUI DESIGN STUDIO».

ОБЩАЯ СХЕМА ИНТЕРФЕЙСА

Рисунок 2-форма для входа в систему

На рис.2 изображен интерфейс формы для входа в систему.Форму можно условно разделить на 3 части. В верхней части находится название системы, иконка и также ссылка перехода в систему для незарегистрированных пользователей.Середину занимает часть для тех пользователей, кто есть в системе.Ниже находится ссылка для перехода на форму регистрации(рис 3) для тех, кого нет в БД пользователей.

РИСУНОК 3-ФОРМА ДЛЯ РЕГИСТРАЦИИ

На рисунке 3 изображена форма регистрации.Пользователю необходимо заполнить все поля, после чего нажать кнопку «ОК».По нажатию кнопки открывается окошко с сообщением об успешной регистрации и предоставлена возможность входа в систему.(рис4)

РИСУНОК 4-ВХОД В СИСТЕМУ

РИСУНОК 5- ГЛАВНАЯ СТРАНИЦА

На рисунке 6 изображена главная страница.Она условно поделена на 3 основные части: Контент, Сундук и Карман. В Кармане пополняются новые новости от разработчиков в виде плиток, которые пользователь добавляет на поле(Контент). В Сундук пользователь может убирать плитки, которые ему больше не нужны.Есть тематические подложки. С помощью контекстного меню пользователь может их менять (рисунок 7).

РИСУНОК 9- СМЕНА ПОДЛОЖКИ

РИСУНОК 10-ПЕРЕХОД ПО ССЫЛКЕ

На рис.10 изображен процесс перехода по ссылке. Это происходит когда пользовательделает клик по плитки, находящиеся в той или иной тематике, и переходит по ссылке к новостям. Новости открываются в новом окне, при этой система не закрывается.

РАЗРАБОТКА ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА.АВТОРСКИЕ ПРАВА

РИСУНОК 1 ГЛАВНОЕ ОКНО

сундук

карман

Основнойлоготип

Создание стикера

настройки

О программеаватарка

СПАСИБО ЗА ВНИМАНИЕ