Разработка web-сайта ролевой онлайн-игры «Мафия»

Пояснительная записка к курсовому проекту

Разработка web-сайта ролевой онлайн-игры «Мафия»"

Рост потребности в web-сайтах на сегодняшний день огромный. Он обуславливается тем, что каждой компании, предприятию и человеку нужен свой сайт, который бы наглядно отображал их деятельность, служил визитной карточкой или предоставлял какие-либо услуги, товары. Потребность в веб-сайтах и сформировала огромную паутину под названием Интернет, которой пользуются 90% населения всей планеты. Поэтому создание сайта является важным маркетинговым ходом.

Помимо бизнес-сайтов, социальных сетей, сайтов-визиток, существуют сайты для досуга пользователей Интернета. Как правило, на них размещаются онлайн или флеш-игры.

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

Решением возникшей проблемы будет поиск и изучение теоретического материала по разработке веб-сайтов, изучение предпочтений пользователя, выявления типа пользователей разрабатываемого сайта, изучение аналогов и выявление особенностей, а также тщательная проработка игрового процесса.

Целью данной курсовой работы является разработка веб-сайта для онлайн-игры «Мафия».

Задачи:

1) Выявить, что такое сайт и рассмотреть виды сайтов;

2) Изучить аналоги сайтов;

3) Разработать сайт для онлайн-игры Мафия.

Предмет исследования: Интерфейс онлайн-игр.

Объект исследования: Сайты онлайн-игр

1. Информационный поиск

1.1 Анализ оформления сайтов аналогичных по тематике и содержанию

Были проанализированы два сайта: онлайн игры «Лига Героев» и карточная онлайн игра.

Рассматриваемая игра Лига Героев является массово-многопользовательской игрой, в нее может играть неограниченной число людей.

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

Суть игры состоит в «прокачке» данного персонажа (повышение уровня персонажа). Конца у игры нету, поэтому в эту игру можно играть бесконечно, пока она не исчезнет с просторов интернета. Чтобы повысить уровень персонажа нужно принимать участие в боях, которые включают в себя принцип игры «камень-ножницы-бумага», прохождение квестов и прочего, за которые дают определённое количество опыта, с помощью, которого и повышается уровень персонажа.

Игра становится интересней из-за взаимодействия персонажей, модераторов и самих администраторов. Т. е. общение является важнейшей функцией игры.

У данной игры есть 2 курса валют: золотые монеты и урановые монеты. На них можно приобрести обмундирование для своего персонажа. Урановые монеты приобретаются за реальные деньги (рубли), с помощью которых можно приобрести специальный товар, в виде артефактов.

Игра представляет с собой страну «Ледрак», которая ограничивается картой данной страны, она имеет множество локаций, в каждой из которых игровой процесс проходит по-разному.

Сайт playset.ru содержит только карточные игры, в которые можно играть как одному, так и с другими пользователями интернета.

Здесь размещены такие игры как: «дурак», «покер», «блэк-джек» и прочие.

Присутствует возможность игры на деньги, т. е. сайт не исключает возможности вложения реальной валюты. Для того, чтобы начать играть нужно пройти регистрацию и создать игру, либо зайти уже в созданную игру, которая ожидает игроков.

Интерфейс и процесс игры браузерной ролевой игры «Лига Героев»

Бразуерная Игра «Лига Героев» (fantasyland.ru) имеет главную страницу и огромное количество под-страниц.

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

Главная страница выполнена в едином дизайне. Текст является контрастным по отношению к фону. Все иллюстрации подробно описывают процесс игры и выполнены в гармонии, навигация по такой странице не составит труда. Можно с легкостью и с минимальным затратам времени ознакомиться с самой игрой, главная страница игры показана на рисунке — 1.

Рисунок 1 — Главная страница онлайн-игры «Лига Героев»

После регистрации, персонаж оказывается в определенной локации. Каждая локация тщательно прорисована, обычно на них изображены здания и природа. Чтобы перейти в другу локацию, нужно просто щелкнуть на подсвечивающийся зону на иллюстрации и персонаж перейдет в другую локацию.

Экран делится на три основные части:

— Первая часть экрана является самой важной, на ней отображаются локации и сам процесс игры;

— Описание Персонажа, на ней отображаются обмундирование, навыки и опыт игрока;

— Чат, который в свою очередь делится на две части: окно с сообщениями и окно с ник-неймами персонажей, которые находятся в оналайне и в данной локации.

Ниже расположена панель для ввода сообщения в чат и кнопки: «Настройка чата» и «Выход из игры».

Весь интерфейс игры тесно связан с самим процессом, в нем нет ничего лишнего и отвлекающего. Данная игра имеет огромное количество иллюстраций и не смотря на это все они смотрятся очень гармонично.

Основной цвет в игре — это серый с текстурой камня. Преобладающие цвета — пастельные, применения которых делают игру приятной для глаз.

Процесс игры становится понятным начинающему игроку, сразу после нескольких минут, он не отпугивает пользователя, а наоборот, показывает ему новые функции.

Интерфейс и процесс игры браузерной карточной игры

Главная страница почти неотличима от остальных страниц сайта, она выполненная в синих тоннах с помощью градации цвета, которая образует выпуклые формы. Меню состоит из иконок игр с их названием. Справа расположено еще одно меню, которое состоит из ссылок. Снизу располагаются иконки с техподдержкой, новостями и прочим.

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

Справа в нижнем углу, расположена реклама, которая мешает обзору Пользователя, в соответствии с рисунком 2.

Рисунок 2 — Главная страница карточной онлайн игры После регистрации, начинается игра, в которую можно играть, либо с компьютером, либо с реальными людьми. Процесс игры обычный.

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

Новый и не опытному пользователю, придется самостоятельно искать правила предлагаемых игр, так на самом сайте их нет.

Преимущества и недостатки онлайн-игры «Лига Героев»

Преимущества:

— Гармоничное расположение всех элементов интерфейса;

— Простая навигация;

— Привлекательный дизайн выполненный в умеренных тоннах;

— Интерфейс тесно связан с процессом игры.

Недостатки:

— Чат не всегда модерируется, поэтому бывает нецензурная брань;

— Игра подразумевает возможно вложения реальных денег.

Преимущества и недостатки карточной онлайн-игры

Преимущества:

— Возможность играть с друзьями (многопользовательская игра);

— Возможность выиграть реальную сумму денег;

— Интерфейс легок для запоминаемости.

Недостатки:

— Интерфейс плохо связан с процессом самих игр;

— Дизайн прошлого столетия;

— Нет информации о правилах игр;

— Большое количество разнообразных иконок и не нужной информации.

Целевая аудитория онлайн-игры «Лига Героев»

Основная аудитория данной игры — это молодёжь в возрасте от 17 до 25 лет. По мимо молодёжи в игре можно встретить и детей от 14 и до 17 лет, но их не так много, потому что очень часто их блокируют из-за неадекватного поведения.

Также в игру играю люди и старше 25 лет, некоторые из них, активно вкладывают реальные деньги в игру.

Среднее число игроков в день — 500 человек.

Целевая аудитория карточной онлайн-игры

Простые и неопытные игроки здесь долго задерживаться не будут, особенно молодежь. Основная аудитория данного сайта — это люди, которым за 30 и больше лет, уже обеспеченные игроки, которые могут позволить себе игру на реальные деньги.

1.2 Пояснение целесообразности использования программных средств, для создания узла

С помощью ниже представленных программ можно решить практически любые задачи при разработке сайтов.

Программа для создания сайтов Adobe Dreamweaver CS5 — является самым популярным программным обеспечением для разработки сайтов. Dreamweaver представляет собой сложный продукт, подходящий для всего, от простых дизайн страниц до разработки динамических страниц, написанных на PHP, ASP, CSS, XML, XSLT и JavaScript. Adobe Dreamweaver это непросто HTML редактор, а гигант среди редакторов, благодаря поддержке большого числа скриптовых языков (PHP, ASP, CSS и более), Dreamweaver является самым мощным, самым полнофункциональный инструмент веб-разработчиков. Визуальные возможности редактора Dreamweaver позволяют начинающим и опытным web-мастерам создавать свои сайт без написания кодов вручную.

Эти функции позволяют экономить время, и могут помочь разработчикам избежать ошибок и позволяют им легко экспериментировать над кодами. Она позволяет любому типу пользователей, от новичков до профессионалов, от дизайнеров до разработчиков, легко и удобно создавать простые или сложные динамические сайты. С помощью этой программы был разработан сайт для ролевой онлайн-игры «Мафия».

PhotoshopAdobe Photoshop — является самым мощным инструментом в графическом дизайне. Используя одни цвета на сайте, невозможно создать стоящий дизайн, для этих целей разработчики и дизайнеры используют photoshop. С его помощью был разработан дизайн для сайта онлайн-игры «Мафия» (макет), который в дальнейшем был преобразован в функциональный HTML / CSS шаблон.

notepadNotepad ++ - это бесплатный текстовый редактор он поддерживает синтаксиса многих языков программирования. Этот редактор может послужить отличной заменой стандартному Блокноту для разработчиков и веб-мастеров.

Данный редактор не только имеет настраиваемую подсветку синтаксиса, также этот редактор оснащён функцией автодополнения, возможностью записи и выполнения макросов, поддержкой регулярных выражений в поиске и возможностью «перетягивания» фрагментов текста.

2. Разработка требований к Web-узлу

2.1 Требования к навигационной структуре

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

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

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

Для облегчения пользователям навигации по сайту, она должна отвечать следующим общим требованиям.

Требования к навигации сайта:

— Логична по структуре и оформлению.

— Наличие удобной основной и вспомогательной навигации с одинаковым позиционированием на всех страницах.

— Навигация сайта должна в любой момент предоставлять посетителю возможность быстро и безошибочно определить свое местонахождение на сайте и однозначно отвечать на три вопроса: «Где я нахожусь?», «Где я уже был?», «Куда я могу пойти?».

Требования к гиперссылкам:

— Все ссылки выделяются классически: цветом и подчеркиванием;

— Текущий пункт меню не должен быть кликабельным, а раздел, в котором он находится наоборот — кликабельным (ссылка с подчеркиванием);

— Цвет ссылок должен меняться: цвет неактивной, активной и посещенной ссылок (менее насыщенный цвет чем у активных ссылок, или цвет, более близкий к цвету основного текста и даже фона страницы) должен отличаться друг от друга;

— Наведение мышки на ссылку должно вызывать эффект подсветки (цвет должен быть светлее);

— Реакция при наведении — меняется цвет; допускается убирать подчеркивание;

— Адрес страницы (URL) должен быть по возможности коротким и понятным;

— Страницы должны именоваться так, чтобы было легко определить точное содержание этой страницы, без необходимости постоянно проверять, что же действительно содержится на страницах;

— Текстовые гиперссылки должны хорошо выделяться на фоне остального текста;

— Ссылки — относительные (за исключением внешних): от корневого каталога сайта до текущего документа (например: /ua/about/contacts/);

— Гиперссылки вызывающие неожиданные для пользователя действия должны об этом предупреждать, например: ссылки на файлы, ссылки, открывающие или закрывающие окна;

— Внешние ссылки, ведущие на другие ресурсы, должны отличаться наличием какого-либо графического значка и открывать новый сайт в новом окне;

— Ссылка на всплывающее окно должна сопровождаться соответствующим значком;

— Ссылки на различные документы должны четко различаться;

— Если ссылка ведет на файл для скачивания, необходимо обязательно указывать его размер;

— Ссылки, расположенные в тексте, не должны совпадать с ним по оформлению;

— Недопустимо использование ссылки, ведущей на ту же страницу, на которой эта ссылка установлена.

Навигация с помощью главного меню.

Главное меню имеет многоуровневую иерархическую (вложенную) структуру, которая позволяет пользователю двигаться, как «от общего к частному», так и «от частного к общему».

Текущее положение пользователя должно отображаться на странице любого уровня вложенности. Цвет текущего пункта меню должен иметь хороший контраст и отличаться от цвета ссылок.

Вспомогательная навигация.

Вспомогательная навигация представляет собой путь по сайту от его «корня» до текущей страницы и располагается в верхней части страницы. Имеет следующий вид:

Главная страница > Раздел > Подраздел > Текущая страница. Все элементы строки, кроме последнего, должны быть ссылками на соответствующие страницы. Такая навигация обязательно должна присутствовать на сайтах с многоуровневой структурой.

Навигация с помощью гиперссылок.

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

Навигация с помощью прямого уникального адреса страницы (URL).

Каждая страница должна иметь постоянный URL, доступный, для индексации поисковыми системами. Динамические ссылки вида www. fortress-design.com/post.php? post=9658 должны быть преобразованы в статические.

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

2.2 Требования к оформлению страниц и обязательных элементов

Оформление сайта — это первое, что видит посетитель попав на сайт.

В большинстве своём именно от оформления зависит впечатление посетителя о сайта.

Изначально посетитель оценивает сайт именно по внешнему виду (оформлению). Потом уже он обращает внимание на содержимое сайта, а затем и на удобство использование.

Но процесс оценки происходит так быстро, что он как правило незаметен.

Дизайн не должен быть нагромождённым и пестрым, достаточно быть приятным для глаза.

Оформление главной страницы сайта.

Оформляя главную страницу сайта нужно понимать, что взглянув на неё, посетитель сайта должен сразу понять куда он попал и что именно он может найти на данном сайте.

Все элементы, которые бросаются в глаза должны быть на своих местах и легко восприниматься.

Ни в коем случае нельзя чтобы посетитель отвлекался и рассеивал своё внимание.

Проектируя оформление главной страницы сайта, нужно обязательно добавить ссылки на самые важные материалы не только в меню, но и в текст самой главной страницы.

Нужно придерживаться единого стиля оформления всех страниц сайта — это создаёт ощущение целостности. В противном случае посетитель может не понять почему и зачем всё поменялось.

Оформление шапки сайта.

Дизайнеры считают, что именно шапка сайта задаёт тон и эмоциональный фон.

Оформление шапки сайта должно: нести основную смысловую нагрузку, подчёркивать индивидуальность и выделять на фоне других сайтов.

Навигация веб-сайта.

Навигация на сайте. Вертикальное и горизонтальность меню.

Оформляя меню сайта нужно понимать, что именно от меню зависит удобство навигации.

Чем проще и лучше в меню разнесены составляющие, тематические разделы тем удобнее для посетителей.

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

Оформление материалов сайта.

Оформляя статьи, новости и прочие страницы сайта нужно помнить, что он должен быть оформлен в едином стиле. Любимые многими «игры со шрифтами» не делают сайт веселее, они делают его владельца глупее. Не стоит увлекаться декоративными и экзотическими шрифтами. При оформлении материала сайта нужно думать о удобстве восприятия информации посетителем.

3. Конструкторский раздел

3.1 Разработка главной страницы

Сайт написан с помощью кода HTML, CSS и JavaScript.

Он выполнен в стиле комиксов, в черно-белых цветах. Главная страница разделяется на 3 части:

1. Строка заголовка, на которой расположено название игры, форма входа и регистрации, состоит из блока класса «name» и класса «loginform», рисунок 3;

Рисунок 3 — Заголовок сайта Шапка, на которой изображена иллюстративная часть сайта, отображающая его предназначение и название. На ней изображен черно-белый город, над которым написано оригинальным шрифтом «Мафия». По бокам располагаются иллюстрации Мафии и Шерифа, блок класса «header», рисунок 4.

Рисунок 4 — Шапка сайта

2. Строка меню, на которой располагается описание игры и иконки (Создать игру, наблюдение за игрой, правила игры и техподдержка), которые образуют меню сайта, размещено в блоке «aboutandmenu».

К ссылкам присвоен стиль подчеркиваний, при наведении на них, он подчеркиваются пунктиром.

Рисунок 5 — Описание и меню сайт Главная страница сайта очень проста в навигации, она полностью едина с процессом игры, здесь нет никаких лишних элементов. Каждый элемент несет логическую связь. Дизайн современен и привлекателен

3.2 Разработка панелей ссылок

Весь сайт состоит из относительных ссылок. На главной странице размещены гиперссылки (регистрация) и меню, стоящие из кликабельных иконок, ведущие на другие страницы сайта разработанного сайта.

На каждой странице располагаются ссылки для перехода на главную

страницу и прочие.

Такая навигация делает сайт простым для пользования как для опытного пользователя, так и для неопытного.

3.3 Оптимизация изображений, видео, анимации

Сайт содержит иллюстрации в формате.jpg. Изображения рисовались в программе Adobe Illustrator, далее оно переносилось в программу Adobe Photoshop, где подгонялись размеры и сжимался объем изображения.

Также на странице с правилами игры, был взят модуль изображения с главной страницы и размножен для фона.

3.4 Тестирование Web-узла

Был протестирован web-узел, осуществляется переход на все страницы сайта, веб-узел работает правильно.

Рисунок 6 — Главная страница

Рисунок 8 — Правила игры

Рисунок 8 — Страница наблюдения за игрой

Заключение

На сегодняшний день 90% населения всей планеты пользуются интернетом, с целью поиска информации, общения, или досуга. Поэтому актуальность разработанного сайта будет очень велика, учитывая, что точных аналогов у сайта нет.

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

Целевая аудитория у данной игры очень большая, в нее могут играть пользователи от 14 лет и больше.

Процесс игры тщательно продуман, в нее можно играть большими компаниями друзей, семьей или просто с незнакомыми людьми. Также воображение человека играет очень большую роль в этой игре, так как здесь можно придумывать свои забавные, страшные и пр. сюжеты на свой вкус.

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

Список использованных источников

1 Макфарланд Д. С. Большая книга CSS. — СПБ.: БХВ-Петербург, 2009.

2 Устин В. Б. Учебник дизайна. Композиция, методика, практика. — М.: АСТ: Астрель, 2009. — 254 с.: ил.

3 www. fortress-design.com