IPB

Добро пожаловать, гость ( Вход | Регистрация )

 
Ответить в эту темуОткрыть новую тему
> Иконки для достижений, Добавить на странице профиля
Sheogorath
11.5.2019, 18:28
Сообщение #1


Новичок
*

Группа: Пользователи Braingames
Сообщений: 10
Регистрация: 26.6.2011
Пользователь №: 26 256



В профиле каждого игрока можно увидеть его достижения. И конечно, мозгобаксы, за которые можно купить vip-статус, мотивируют их получать.

Но взглянем на другие системы достижений: Steam, Activision, да даже воинские звания! Все эти системы объединяет наличие неких визуальных показателей достижения.

Разве не было бы здорово, если бы и система достижений на «Играх разума» содержала какие-нибудь радующие глаз картинки?

В общем, я сделал. Почему сова — потому что она символизирует мудрость: вспомним хотя бы сову Минервы. В пост выкладываю не все, чтобы не было большой простыни: я не понял, как на форуме пользоваться спойлерами, и есть ли они тут вообще. Все картинки можно посмотреть на яндекс.диске по ссылке.

Автор-10:
Изображение

На вершине:
Изображение

Рейтинг-200:
Изображение

Есть идеи и насчет других достижений, вроде ачивки за решение всех задач какого-либо раздела. Мне кажется, в таком случае можно даже мозгобаксы за эти достижения не давать, все равно игроки с удовольствием будут их зарабатывать.

Для того, чтобы они адекватно отображались в профиле, можно сделать как-то так.
В HTML добавляем:
Для открытого достижения:
HTML
<div class="achievement">
<a href="?path=usersrating&type=puzzleSolving&achCatId=5">
<img src="achievement5.png" alt="рейтинг-400[540](1.50)" />
</a>
<span>достичь рейтинга 400. Награда 1.50 МозгоБаксов. Заслужило 540 пользователей.</span>
</div>


Для неоткрытого достижения:
HTML
<div class="achievement locked">
<a href="?path=usersrating&type=puzzleSolving&achCatId=6">
<img src="achievement6.png" alt="рейтинг-1000[125](1.50)" />
</a>
<span>достичь рейтинга 1000. Награда 1.50 МозгоБаксов. Заслужило 125 пользователей.</span>
</div>


В таблицу стилей добавляем:
CODE

.achievement a, .achievement span {
    vertical-align: middle;
    display: inline-block;
}

.achievement img {
    width: 64px;
    height: 64px;
}

.achievement.locked img {
    opacity: 0.2;
}

.achievement.locked span {
    color: #aaa;
}


В приведенном коде используются ширина и высота 64х64, но можно сделать и больше: сами картинки имеют размер 256х256 пикселей.

И да, принимаю тухлые помидоры, пожелания и предложения.

Сообщение было отредактировано Sheogorath: 11.5.2019, 18:34
Пользователь в офлайнеКарточка пользователяОтправить личное сообщение
Вернуться в начало страницы
+Ответить с цитированием данного сообщения

Ответить в эту темуОткрыть новую тему
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0 -

 



- Упрощённая версия Сейчас: 27.6.2019, 7:16