Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты

Html 5

С этим тегом используют

HTML Программирование CSS Javascript Css3 IT Разработка Все
89 постов сначала свежее
4

HTML5 Black Hole (Черная Дыра)⁠⁠

HTML5 Black Hole (Черная Дыра) Черная дыра, Javascript, Анимация, Html 5, Web-программирование, 2D, Звезды, Музыка, Fl Studio, Видео, Вертикальное видео, Длиннопост

JS canvas HTML5 Black Hole (Черная Дыра)

— Звезды решают судьбы людей?

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

Чёрная дыра́ — область пространства-времени, гравитационное притяжение которой настолько велико, что покинуть её не могут даже объекты, движущиеся со скоростью света, в том числе кванты самого света. Граница этой области называется горизонтом событий.

Я люблю вникать в звёздное небо безоблачными ночами вдалеке от городской засветки. Глубокие и противоречивые чувства вызывают они у землян.

До них не докричаться, не дозвониться, не допечататься (что в меру своих возможностей я попытался отразить в аудио через FL). От нас они абсолютно независимы, но вот мы без них никак. Вообще без них мы не способны даже существовать. Се Ля Ви!

А сегодня я попытался минималистично смоделировать на HTML5-канвасе как эти гиганты притягиваются к центру масс, чтобы впоследствии начать новую жизнь "большим взрывом"...

Но это потом.., а сейчас для нас они бесконечно стабильны и непостигаемо вечны !


Разработка скрипта и музыка:

BarMentaLisk © 2025

ссылка на исходный код (в браузере жмите: ПКМ -> Просмотреть код)

поддержка в ТГ (на случай ЛонгТаймСапорта)

Показать полностью 1 1
[моё] Черная дыра Javascript Анимация Html 5 Web-программирование 2D Звезды Музыка Fl Studio Видео Вертикальное видео Длиннопост
3
5

Готовая textarea с использованием emoji без подключения библиотек⁠⁠

Привет, это мой первый пост, поэтому не судите строго.

Не думал сначала, что вообще буду что то публиковать, но потом подумал, что может быть кому то будет это полезно.

Итак начнем, для начала создаем файл с названием index.html, открываем через любой доступный вам редактор и делаем ctrl+c -> ctrl+v в него следующее содержимое:

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Стена с эмоджи</title>

<link rel="stylesheet" href="css/style.css"/>

</head>

<body>

<div class="container" style="height: 500px">

<div id="emojiHistory"></div> <!-- Контейнер для истории смайлов -->

<div class="wallcontainer">

<div class="emoji-container">

<button id="emojiButton">😊</button>

<div class="emoji-menu" id="emojiMenu" style="overflow-y: auto; height: 200px; width: 450px;">

<div class="emoji">Эмоции</div><br/>

<div class="emoji">😀</div>

<div class="emoji">😁</div>

<div class="emoji">😂</div>

<div class="emoji">🤣</div>

<div class="emoji">😃</div>

<div class="emoji">😄</div>

<div class="emoji">😅</div>

<div class="emoji">😆</div>

<div class="emoji">😉</div>

<div class="emoji">😊</div>

<div class="emoji">😇</div>

<div class="emoji">🥰</div>

<div class="emoji">😍</div>

<div class="emoji">🤩</div>

<div class="emoji">😘</div>

<div class="emoji">😗</div>

<div class="emoji">😙</div>

<div class="emoji">😚</div>

<div class="emoji">😋</div>

<div class="emoji">😜</div>

<div class="emoji">😝</div>

<div class="emoji">😛</div>

<div class="emoji">🧐</div>

<div class="emoji">🤓</div>

<div class="emoji">😎</div>

<div class="emoji">🥸</div>

<div class="emoji">🤔</div>

<div class="emoji">😳</div>

<div class="emoji">😬</div>

<div class="emoji">😱</div>

<div class="emoji">😨</div>

<div class="emoji">😰</div>

<div class="emoji">😢</div>

<div class="emoji">😭</div>

<div class="emoji">😩</div>

<div class="emoji">😫</div>

<div class="emoji">😵</div>

<div class="emoji">😳</div>

<div class="emoji">🤯</div>

<div class="emoji">😶</div>

<div class="emoji">😐</div>

<div class="emoji">😑</div>

<div class="emoji">🙄</div>

<div class="emoji">😬</div>

<div class="emoji">😏</div>

<div class="emoji">😒</div>

<div class="emoji">😤</div>

<div class="emoji">😮</div>

<div class="emoji">❤️</div>

<div class="emoji">🧡</div>

<div class="emoji">💛</div>

<div class="emoji">💚</div>

<div class="emoji">💙</div>

<div class="emoji">💜</div>

<div class="emoji">🤎</div>

<div class="emoji">🖤</div>

<div class="emoji">💖</div>

<div class="emoji">💗</div>

<div class="emoji">💓</div>

<div class="emoji">💞</div>

<div class="emoji">💕</div>

<div class="emoji">💟</div>

<div class="emoji">❣️</div>

<div class="emoji">💔</div>

<div class="emoji">😘</div>

<div class="emoji">😗</div>

<div class="emoji">😙</div>

<div class="emoji">😚</div>

<div class="emoji">💋</div>

<br/><div class="emoji">Руки</div><br/>

<div class="emoji">👋</div>

<div class="emoji">🤚</div>

<div class="emoji">✋</div>

<div class="emoji">🖐️</div>

<div class="emoji">👌</div>

<div class="emoji">✌️</div>

<div class="emoji">🤞</div>

<div class="emoji">🤟</div>

<div class="emoji">✊</div>

<div class="emoji">👊</div>

<div class="emoji">🤛</div>

<div class="emoji">🤜</div>

<div class="emoji">🙌</div>

<div class="emoji">👏</div>

<div class="emoji">🤝</div> <!-- Рукопожатие -->

<div class="emoji">🙏</div> <!-- Молитва (скрещенные руки) -->

<div class="emoji">👐</div> <!-- Открытые руки -->

<div class="emoji">🤲</div> <!-- Руки с открытыми ладонями (помощь) -->

<div class="emoji">🤹‍♂️</div> <!-- Жонглер (человек) -->

<div class="emoji">🤹‍♀️</div> <!-- Жонглер (женщина) -->

<div class="emoji">🖖</div> <!-- Жест вулканца (Спок) -->

<div class="emoji">✋</div> <!-- Рука с поднятым пальцем -->

<div class="emoji">👈</div> <!-- Указатель рукой влево -->

<div class="emoji">👉</div> <!-- Указатель рукой вправо -->

<div class="emoji">👆</div> <!-- Указатель вверх -->

<div class="emoji">👇</div> <!-- Указатель вниз -->

<div class="emoji">🖐️</div> <!-- Рука с открытой ладонью -->

<div class="emoji">👋</div> <!-- Помахать рукой -->

<div class="emoji">👐</div> <!-- Открытые руки -->

<div class="emoji">✊</div> <!-- Сжатый кулак -->

<div class="emoji">🙌</div> <!-- Поднятые руки (радость) -->

<div class="emoji">👍</div> <!-- Пальцы вверх (поддержка) -->

<div class="emoji">👎</div> <!-- Пальцы вниз (неодобрение) -->

<br/><div class="emoji">Еда</div><br/>

<div class="emoji">🍏</div> <!-- Яблоко -->

<div class="emoji">🍎</div> <!-- Красное яблоко -->

<div class="emoji">🍐</div> <!-- Груша -->

<div class="emoji">🍊</div> <!-- Апельсин -->

<div class="emoji">🍋</div> <!-- Лимон -->

<div class="emoji">🍌</div> <!-- Банан -->

<div class="emoji">🍉</div> <!-- Арбуз -->

<div class="emoji">🍇</div> <!-- Виноград -->

<div class="emoji">🍓</div> <!-- Клубника -->

<div class="emoji">🍈</div> <!-- Дыня -->

<div class="emoji">🍒</div> <!-- Вишня -->

<div class="emoji">🥭</div> <!-- Манго -->

<div class="emoji">🍍</div> <!-- Ананас -->

<div class="emoji">🥥</div> <!-- Кокос -->

<div class="emoji">🥑</div> <!-- Авокадо -->

<div class="emoji">🍅</div> <!-- Томат -->

<div class="emoji">🥕</div> <!-- Морковь -->

<div class="emoji">🥔</div> <!-- Картофель -->

<div class="emoji">🌽</div> <!-- Кукуруза -->

<div class="emoji">🥬</div> <!-- Листовая зелень -->

<div class="emoji">🥦</div> <!-- Брокколи -->

<div class="emoji">🍄</div> <!-- Гриб -->

<div class="emoji">🌰</div> <!-- Орех -->

<div class="emoji">🍞</div> <!-- Хлеб -->

<div class="emoji">🥖</div> <!-- Багет -->

<div class="emoji">🥯</div> <!-- Бейгл -->

<div class="emoji">🥐</div> <!-- Круассан -->

<div class="emoji">🍩</div> <!-- Пончик -->

<div class="emoji">🍪</div> <!-- Печенье -->

<div class="emoji">🍰</div> <!-- Торт -->

<div class="emoji">🎂</div> <!-- День рождения (торт) -->

<div class="emoji">🍫</div> <!-- Шоколад -->

<div class="emoji">🍬</div> <!-- Конфета -->

<div class="emoji">🍭</div> <!-- Сосарная сладость -->

<div class="emoji">🍮</div> <!-- Птичье молоко -->

<div class="emoji">🍯</div> <!-- Воск -->

<div class="emoji">🥤</div> <!-- Напиток -->

<div class="emoji">🍵</div> <!-- Гречка -->

<div class="emoji">🍲</div> <!-- Горячее блюдо -->

<div class="emoji">🍴</div> <!-- Посуда -->

<div class="emoji">🍰</div> <!-- Торт -->

<div class="emoji">🍕</div> <!-- Пицца -->

<div class="emoji">🍔</div> <!-- Гамбургер -->

<div class="emoji">🍟</div> <!-- Картошка фри -->

<div class="emoji">🌭</div> <!-- Хот-дог -->

<div class="emoji">🍿</div> <!-- Попкорн -->

<div class="emoji">🍣</div> <!-- Суши -->

<div class="emoji">🍱</div> <!-- Бенто -->

<div class="emoji">🥗</div> <!-- Салат -->

<div class="emoji">🍜</div> <!-- Рамен -->

<div class="emoji">🍲</div> <!-- Горячее блюдо -->

<div class="emoji">🍛</div> <!-- Карри -->

<div class="emoji">🥘</div> <!-- Паэлья -->

<div class="emoji">🥮</div> <!-- Лунный торт -->

<div class="emoji">🍺</div> <!-- Пиво -->

<div class="emoji">🍷</div> <!-- Вино -->

<div class="emoji">🥂</div> <!-- Тост -->

<div class="emoji">🍸</div> <!-- Коктейль -->

<div class="emoji">🍹</div> <!-- Коктейль с зонтиком -->

<div class="emoji">🥛</div> <!-- Молоко -->

<div class="emoji">🥛</div> <!-- Сыворотка -->

<div class="emoji">🍴</div> <!-- Посуда -->

<div class="emoji">🍲</div> <!-- Горячее блюдо -->

<div class="emoji">🥘</div> <!-- Паэлья -->

<div class="emoji">🥗</div> <!-- Салат -->

<div class="emoji">🍜</div> <!-- Рамен -->

<div class="emoji">🍣</div> <!-- Суши -->

<div class="emoji">🍲</div> <!-- Горячее блюдо -->

<div class="emoji">🍛</div> <!-- Карри -->

<div class="emoji">🥮</div> <!-- Лунный торт -->

<div class="emoji">🍺</div> <!-- Пиво -->

<div class="emoji">🍷</div> <!-- Вино -->

<div class="emoji">🥂</div> <!-- Тост -->

<div class="emoji">🍸</div> <!-- Коктейль -->

<div class="emoji">🍹</div> <!-- Коктейль с зонтиком -->

<div class="emoji">🌮</div> <!-- Тортугас -->

<div class="emoji">🌯</div> <!-- Сальса -->

<div class="emoji">🥗</div> <!-- Салат -->

<div class="emoji">🌽</div> <!-- Кукуруза -->

<div class="emoji">🥦</div> <!-- Брокколи -->

<div class="emoji">🍆</div> <!-- Баклажан -->

<div class="emoji">🥬</div> <!-- Листовая зелень -->

<div class="emoji">🥕</div> <!-- Морковь -->

<div class="emoji">🌽</div> <!-- Кукуруза -->

<div class="emoji">🌮</div> <!-- Тортугас -->

<div class="emoji">🌯</div> <!-- Сальса -->

<div class="emoji">🥗</div> <!-- Салат -->

<div class="emoji">🥑</div> <!-- Торговля -->

<div class="emoji">🍄</div> <!-- Гриб -->

<div class="emoji">🌰</div> <!-- Орех -->

<div class="emoji">🍞</div> <!-- Хлеб -->

<div class="emoji">🥖</div> <!-- Багет -->

<div class="emoji">🥐</div> <!-- Круассан -->

<div class="emoji">🍩</div> <!-- Пончик -->

<div class="emoji">🍪</div> <!-- Печенье -->

<div class="emoji">🍰</div> <!-- Торт -->

<div class="emoji">🎂</div> <!-- День рождения (торт) -->

<div class="emoji">🍫</div> <!-- Шоколад -->

<div class="emoji">🍬</div> <!-- Конфета -->

<div class="emoji">🍭</div> <!-- Сосарная сладость -->

<div class="emoji">🍮</div> <!-- Птичье молоко -->

<div class="emoji">🍯</div> <!-- Воск -->

<div class="emoji">🥤</div> <!-- Напиток -->

<div class="emoji">🍵</div> <!-- Гречка -->

<div class="emoji">🍰</div> <!-- Торт -->

<div class="emoji">🍴</div> <!-- Посуда -->

<div class="emoji">🥘</div> <!-- Паэлья -->

<div class="emoji">🥗</div> <!-- Салат -->

<div class="emoji">🌮</div> <!-- Тортугас -->

<div class="emoji">🌯</div> <!-- Сальса -->

<div class="emoji">🥑</div> <!-- Торговля -->

<div class="emoji">🍊</div> <!-- Апельсин -->

<div class="emoji">🍋</div> <!-- Лимон -->

<div class="emoji">🍌</div> <!-- Банан -->

<div class="emoji">🥭</div> <!-- Манго -->

<div class="emoji">🌮</div> <!-- Тортугас -->

<div class="emoji">🌯</div> <!-- Сальса -->

<div class="emoji">🥗</div> <!-- Салат -->

<div class="emoji">🌽</div> <!-- Кукуруза -->

<div class="emoji">🥦</div> <!-- Брокколи -->

<div class="emoji">🥖</div> <!-- Багет -->

<div class="emoji">🥐</div> <!-- Круассан -->

<div class="emoji">🍩</div> <!-- Пончик -->

<div class="emoji">🍪</div> <!-- Печенье -->

<div class="emoji">🍰</div> <!-- Торт -->

<div class="emoji">🎂</div> <!-- День рождения (торт) -->

<div class="emoji">🍫</div> <!-- Шоколад -->

<div class="emoji">🍬</div> <!-- Конфета -->

<div class="emoji">🍭</div> <!-- Сосарная сладость -->

<div class="emoji">🍮</div> <!-- Птичье молоко -->

<div class="emoji">🍯</div> <!-- Воск -->

<div class="emoji">🥤</div> <!-- Напиток -->

<div class="emoji">🍵</div> <!-- Гречка -->

<div class="emoji">🎂</div> <!-- День рождения -->

<div class="emoji">🍰</div> <!-- Торт -->

<div class="emoji">🍴</div> <!-- Посуда -->

<div class="emoji">🍲</div> <!-- Горячее блюдо -->

<div class="emoji">🍕</div> <!-- Пицца -->

<div class="emoji">🍔</div> <!-- Гамбургер -->

<div class="emoji">🍟</div> <!-- Картошка фри -->

<div class="emoji">🍿</div> <!-- Попкорн -->

<div class="emoji">🍣</div> <!-- Суши -->

<div class="emoji">🌮</div> <!-- Тортугас -->

<div class="emoji">🌯</div> <!-- Сальса -->

<div class="emoji">🥗</div> <!-- Салат -->

<div class="emoji">🥑</div> <!-- Торговля -->

<div class="emoji">🍄</div> <!-- Гриб -->

<div class="emoji">🌰</div> <!-- Орех -->

<div class="emoji">🍞</div> <!-- Хлеб -->

<div class="emoji">🥖</div> <!-- Багет -->

<div class="emoji">🥐</div> <!-- Круассан -->

<div class="emoji">🍩</div> <!-- Пончик -->

<div class="emoji">🍪</div> <!-- Печенье -->

<div class="emoji">🍰</div> <!-- Торт -->

<div class="emoji">🎂</div> <!-- День рождения -->

<div class="emoji">🍫</div> <!-- Шоколад -->

<div class="emoji">🍬</div> <!-- Конфета -->

<div class="emoji">🍭</div> <!-- Сосарная сладость -->

<div class="emoji">🍮</div> <!-- Птичье молоко -->

<div class="emoji">🍯</div> <!-- Воск -->

<div class="emoji">🥤</div> <!-- Напиток -->

<div class="emoji">🍵</div> <!-- Гречка -->

<div class="emoji">🌯</div> <!-- Сальса -->

<div class="emoji">🥗</div> <!-- Салат -->

<div class="emoji">🥑</div> <!-- Торговля -->

<div class="emoji">🍆</div> <!-- Баклажан -->

<div class="emoji">🥦</div> <!-- Брокколи -->

<div class="emoji">🌽</div> <!-- Кукуруза -->

<div class="emoji">🌮</div> <!-- Тортугас -->

<div class="emoji">🍲</div> <!-- Горячее блюдо -->

<div class="emoji">🍕</div> <!-- Пицца -->

<div class="emoji">🍣</div> <!-- Суши -->

<div class="emoji">🌭</div> <!-- Хот-дог -->

<div class="emoji">🍴</div> <!-- Посуда -->

</div>

</div>

<textarea id="emojiTextarea" rows="3" style="min-height: 350px" placeholder="О чем вы хотите написать?"></textarea>

</div>

</div>

<script src="js/script.js"></script>

</body>

</html>

Далее нам понадобиться создать 2 папки с названиями css и js.

Открываем папку css и создаем файл style.css со следующим содержим:

body {

font-family: Arial, sans-serif;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

background-color: #f2f2f2;

}

.container {

display: grid;

grid-template-rows: auto 1fr;

gap: 10px;

width: 600px;

}

.wallcontainer {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

background-color: white;

padding: 10px;

border: 1px solid #ccc;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

overflow: hidden;

}

h1 {

margin: 0;

font-size: 24px;

}

.emoji-container {

position: relative;

width: 100%;

}

#emojiButton {

font-size: 16px;

background-color: #eaeaea;

border: 1px solid #2c2c2c;

border-radius: 3px;

padding: 3px;

cursor: pointer;

transition: border-color 0.2s;

text-align: center;

}

#emojiButton:focus {

outline: none;

border-color: #000;

}

.emoji-menu {

display: none;

position: absolute;

top: calc(100% + 5px);

left: 0;

background-color: white;

border: 1px solid #ccc;

border-radius: 5px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

z-index: 1000;

transition: opacity 0.3s ease;

opacity: 0;

pointer-events: none;

}

.emoji-menu.show {

display: block;

opacity: 1;

pointer-events: auto;

}

.emoji {

font-size: 16px;

cursor: pointer;

margin: 2px;

display: inline-block;

}

#emojiHistory {

display: flex;

flex-wrap: wrap;

max-height: 30px;

overflow-y: auto;

height: 30px;

background: none;

border: none;

padding: 0;

}

#emojiHistory p {

margin: 0;

padding: 5px 0 0 5px;

font-size: 16px;

}

.history-emoji {

font-size: 20px;

transition: margin-left 0.1s;

margin-left: 6px;

cursor: pointer;

}

#emojiTextarea {

width: 100%;

border: 1px solid #ccc;

border-radius: 5px;

padding: 5px;

margin-top: 10px;

resize: none;

box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);

outline: none;

}

#emojiTextarea:focus {

border-color: #007BFF;

}

#emojiMenu {

width: 100%;

height: 300px;

overflow-y: auto;

border: 1px solid #ccc;

padding: 10px;

box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

}

Сохраняем и закрываем, далее идем в папку js и создаем файл script.js со следующим содержимым:

const emojiButton = document.getElementById('emojiButton');

const emojiMenu = document.getElementById('emojiMenu');

const emojiTextarea = document.getElementById('emojiTextarea');

const emojiHistory = document.getElementById('emojiHistory');

const maxHistorySize = 15; // Максимальный размер истории

let emojiHistoryArray = JSON.parse(localStorage.getItem('emojiHistory')) || []; // Загружаем историю из Local Storage

function saveEmojiHistory() {

localStorage.setItem('emojiHistory', JSON.stringify(emojiHistoryArray)); // Сохраняем историю в Local Storage

}

function updateEmojiHistory() {

emojiHistory.innerHTML = ''; // Очищаем историю смайлов

if (emojiHistoryArray.length === 0) {

const historyText = document.createElement('p');

historyText.innerText = 'История пуста';

emojiHistory.appendChild(historyText);

} else {

emojiHistoryArray.forEach((emoji) => {

const span = document.createElement('span');

span.innerText = emoji;

span.className = 'history-emoji';

span.addEventListener('click', (event) => {

const clickedEmoji = event.target.innerText;

// Записываем смайл в текстовую область

emojiTextarea.value += clickedEmoji + ' ';

// Перемещаем смайл в начало истории

emojiHistoryArray = emojiHistoryArray.filter(e => e !== clickedEmoji);

emojiHistoryArray.unshift(clickedEmoji);

updateEmojiHistory();

saveEmojiHistory(); // Обновляем хранилище

});

emojiHistory.appendChild(span); // Добавляем смайлы в историю

});

}

}

emojiButton.addEventListener('click', (event) => {

emojiMenu.classList.toggle('show');

event.stopPropagation();

});

document.querySelectorAll('.emoji').forEach(emojiElement => {

emojiElement.addEventListener('click', (event) => {

const selectedEmoji = event.target.innerText;

// Изменение смайла на кнопке

emojiButton.innerText = selectedEmoji;

// Добавление в текстовое поле

emojiTextarea.value += selectedEmoji + ' ';

// Добавление в историю эмоджи

emojiHistoryArray.unshift(selectedEmoji);

if (emojiHistoryArray.length > maxHistorySize) {

emojiHistoryArray.pop();

}

updateEmojiHistory();

saveEmojiHistory(); // Сохраняем обновленную историю

emojiMenu.classList.remove('show');

});

});

// Загружаем историю смайлов при загрузке страницы

updateEmojiHistory();

// Закрыть меню при клике вне

window.addEventListener('click', (event) => {

if (!emojiButton.contains(event.target) && !emojiMenu.contains(event.target)) {

emojiMenu.classList.remove('show');

}

});

Сохраняем и открываем index.html через браузер должно получиться следующее:

Готовая textarea с использованием emoji без подключения библиотек Гайд, Html 5, Css3, Javascript, Длиннопост

Итоговый вариант

Также при использовании emoji они будут записываться с помощью скрипта в память с помощью local storage, поэтому при обновлении страницы, история использований emoji будет запоминаться вот так:

Готовая textarea с использованием emoji без подключения библиотек Гайд, Html 5, Css3, Javascript, Длиннопост

Надеюсь это будет кому то полезно, камни не кидайте все таки первый раз пишу статейку))
Всех благ!

Показать полностью 2
[моё] Гайд Html 5 Css3 Javascript Длиннопост
3
2

Что выбрать начинающему HTML5-разработчику: сравниваем российские игровые площадки⁠⁠

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

Что выбрать начинающему HTML5-разработчику: сравниваем российские игровые площадки Гайд, Gamedev, Игры, Html 5, Unity, Construct, Telegram (ссылка), ВКонтакте (ссылка), YouTube (ссылка), Длиннопост, Яндекс Игры

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

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

Меня зовут Сергей Епонешников, несколько лет назад я сделал простую игру и опубликовал на российских площадках — посмотреть, что из этого выйдет. Нашёл свою аудиторию и понял, что можно пробовать игры посложнее и не ограничиваться одной площадкой. Запустил филворды, которые довольно хорошо зашли, — в итоге я получил около миллиона рублей пассивного дохода, и деньги продолжают поступать, хотя я ничего не обновлял уже больше двух лет.

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

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

Основные российские площадки для HTML5-игр — «ВКонтакте», «Яндекс» и «Одноклассники»

Количество игроков в браузерные игры растёт: можно играть бесплатно, без загрузки на телефон и компьютер. Это удобно и просто. Всё начиналось в ВК и «Одноклассниках», чуть позже присоединился «Яндекс» и быстро всех догнал. 2022 год вообще качественно изменил ситуацию и заставил всех зашевелиться.

  • К концу 2022 года аудитория «Игр ВКонтакте» достигла 10 млн пользователей и грозит сравняться с показателями VK Play, активная аудитория которого составляет 11 млн игроков.

  • За 2022 год количество разработчиков на «Яндекс Играх» выросло в три раза, 96% из них — инди-команды. Удвоилось количество игр, их теперь около 16 тысяч, а самый популярный жанр — головоломки.

  • На «Одноклассниках» за 2022 год доходы разработчиков за размещение рекламы выросли на 40%. В ближайшее время ОК планируют увеличивать привлекательность игровой платформы для разработчиков с помощью запуска новых рекламных форматов.

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

Сейчас «Игры ВКонтакте», «Яндекс Игры» и «Одноклассники» — главные отечественные платформы для браузерных игр с примерно одинаковыми возможностями и набором функций вроде подключения рекламы, покупок и социальных действий. Их вполне достаточно для реализации идей и монетизации. При этом на них совершенно разная аудитория, а значит, и перформят там разные игры. Это важно.

Есть ещё и SmartMarket, но они ушли в игры для умных устройств и стали совсем нишевой историей. Судите сами: игры у них работают через голосового ассистента, который общается с бэкендом игры. Управление реализовано через голосовые команды типа «открой игру», «вызови рейтинг», «купи предмет». Это будет хорошо работать далеко не в каждом проекте.

Зачем выходить на эти платформы

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

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

Впрочем, у этого варианта есть свои плюсы и минусы:

Плюсы

— охваты и трафик, обеспеченные площадкой;

— довольно быстрый старт;

— относительно простой вход;

— поддержка и продвижение;

— отлаженная система привлечения и удержания игроков.

Минусы

— зависимость от условий платформы;

— высокая конкуренция внутри площадки;

— высокая комиссия.

Как и в случае с маркетплейсами, попробовать стоит всё, но сначала лучше освоить одну площадку, а затем выходить на остальные.

Для начинающих технически удобнее «Яндекс Игры»: там простой процесс публикации. Всё обрабатывается на стороне «Яндекса» и уже подготовлено к интеграции. Условно, достаточно подключить скрипт площадки к игре, добавив в код нужные методы, перетащить архив в поле загрузки — и всё заработает. Конечно, на деле всё несколько сложнее, но лишь немного.

Интеграция в «Одноклассниках» и «ВКонтакте» более трудоёмкая. Хотя, если ограничиться только подключением рекламы без покупок и других активностей, можно разобраться достаточно быстро. Правда, техническая простота сама по себе — далеко не самое главное:

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

  2. При низком пороге входа конкуренция в «Яндекс Играх» в разы выше — одномоментно можно соперничать с 600 новыми проектами. Это по сравнению с десятком на «Играх ВКонтакте», например.

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

Что важно при выборе площадки и почему

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

Что выбрать начинающему HTML5-разработчику: сравниваем российские игровые площадки Гайд, Gamedev, Игры, Html 5, Unity, Construct, Telegram (ссылка), ВКонтакте (ссылка), YouTube (ссылка), Длиннопост, Яндекс Игры

Вот ряд параметров, по которым мы сравним все три платформы:

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

Смотрим, как обстоят дела на наших площадках: что там за аудитория и какие игры она предпочитает.

Что выбрать начинающему HTML5-разработчику: сравниваем российские игровые площадки Гайд, Gamedev, Игры, Html 5, Unity, Construct, Telegram (ссылка), ВКонтакте (ссылка), YouTube (ссылка), Длиннопост, Яндекс Игры

Условно, «Три в ряд» стоит нести на «Яндекс», а если вы сделали RPG, то лучше — в «Игры ВКонтакте». Трафик и деньги есть на всех площадках, но решающим будет именно попадание в аудиторию и жанровую нишу.

Условия входа и регистрации

Физлицам доступны «Яндекс» и «ВКонтакте», а «Одноклассники» работают только с предпринимателями и юрлицами. То есть попасть туда можно либо через издателя, либо зарегистрировав ИП или фирму.

Получается, «Одноклассники» — самая закрытая площадка, но, судя по отзывам разработчиков, игроки там активнее донатят. Стоит заморочиться, чтобы туда попасть, если игра уже показала результат на других площадках и есть фундамент для удержания игроков.

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

Начнём с самого простого случая — игра с рекламой. Каждая площадка имеет свой SDK и требует указания в коде игры своих методов.

С «Играми ВКонтакте» есть нюанс: в игре нужно сделать какую-то социальную активность, например дать игрокам возможность приглашать друзей или публиковать посты с игровой статистикой. Это решается через SDK без особых усилий. В «Одноклассниках» и «Яндекс Играх» социальных активностей не требуется, но они приветствуются.

Для выхода на «Игры ВКонтакте» и «Одноклассники» нужен будет хостинг для размещения игры. Это либо купленный домен и хостинг, на который заливается игра и потом публикуется, либо какое-то бесплатное решение для хранения, условно, файлов. У «Яндекса» хостинг свой и туда достаточно просто залить архив, чтобы игра хранилась автономно.

Таков минимальный набор: SDK внедрили, рекламу показали, где-то социальной активности добавили — игру разместили.

Вероятно, скоро захочется пойти дальше, например добавить покупки. В «Яндекс Играх» это просто — всё автоматически, достаточно вызвать метод покупки, «Яндекс» сам проведёт оплату и сообщит, что готово. В «Одноклассниках» и «Играх ВКонтакте» сложнее. Придётся поднимать базу данных и писать серверный код, который сохранит покупку и обработает различные условия вроде непрошедшей оплаты. Тут лучше привлечь к разработке опытного бэкендера, который всё это сделает.

Безопасность и надежность

«Одноклассники» и «ВКонтакте» исторически работают с мидкорными проектами, у них всё крутится на сервере, а игрок лишь кликает на кнопки в графическом интерфейсе. Интеграция сложнее, но такая концепция сложилась изначально, к ней привыкли, и она даёт существенное преимущество в плане безопасности. Авторизация и другие действия пользователя тоже проходят проверку безопасности на сервере.

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

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

Да, так проще интегрироваться, а весь архив с игрой лежит на площадке «Яндекса». Но с другой стороны — это дыра в безопасности, потому что такая архитектура позволяет всем желающим изменять код игры. Да, как когда-то с ArtMoney.

Старт, привлечение и удержание игроков

Российские игровые платформы предполагают удержание игроков и не ориентируются на анонимных гостей, как Poki например.

В «Одноклассниках» и «ВКонтакте», так как это соцсети, помимо авторизации, больше возможностей работать с социальными активностями: стимулировать игроков писать посты, приглашать друзей и дарить друг другу подарки. Такие социальные механики положительно влияют на вовлечение. А «Яндекс» — исторически поисковик и там такого нет, шерить игру друзьям получится только по прямой ссылке.

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

Есть стандартные практики, чтобы привлекать и удерживать игроков:

  • награды за вход;

  • лидерборды и достижения;

  • повторяющиеся и ежедневные активности; 

  • покупка скинов и разблокировка тем и т. д.

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

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

Модерация и продвижение

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

После интеграции и модерации игра подаётся на публикацию. Что дальше:

  • В «Одноклассниках» есть пробный период: около трёх недель игра крутится в новых и площадка собирает данные, насколько хорошо перформит. Если у игры достаточно хорошие показатели — пускают в релиз, а если нет, то она так и зависнет в разделе «Игры в тестировании».

  • В «Яндекс Играх» проект сначала крутится вверху одну-две недели, потом выходит из новых, и дальше всё зависит от показателей. Алгоритмы автоматически рассчитывают, насколько игра интересна той или иной аудитории, как много и активно в неё играют и начинают предлагать другим людям. То есть дальше работает сама система, и продукт с плохой статистикой она продвигать не будет.

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

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

Монетизация и вывод денег

На всех трёх площадках разработчики в основном получают доход от рекламы и покупок — это стандартная схема монетизации браузерных игр.

В плане вывода денег проще и удобней организованы «Яндекс Игры». Они без проблем работают со всеми физлицами и юрлицами, российскими и зарубежными (да, даже сейчас). Сколько за месяц пришло денег — на них выставляют счёт, а налог уплачивается автоматически в приложении. Выплаты раз в месяц, в районе 10-го числа для самозанятых и в 20-х числах для физлиц.

«Игры ВКонтакте» тоже работают со всеми, начисления после 25-го числа, но скопившиеся на счету деньги можно забрать в любой момент. Только там должно пройти минимум три месяца с первого дохода, плюс подача декларации и уплата налога лежат на разработчике.

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

Частые проблемы и нюансы интеграции игр с площадками

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

Если в «Яндекс Играх» всё более-менее просто, понятно и автоматизировано, то в «Играх ВКонтакте» взаимодействие между серверами по платежам и подпискам надо качественно поддерживать. В «Одноклассниках» для подключения этих опций нужно формировать специальные запросы к администрации и пояснять, на что нужно сделать подписку и какой товар продаётся. По всем вопросам контактировать персонально, — в общем бюрократия.

Ещё вызывает затруднения и требует дополнительных усилий такой момент: чтобы интегрировать одну игру с несколькими площадками, часто приходится создавать и поддерживать несколько разных версий одной и той же игры. Каждую — со своими методами для взаимодействия с API конкретной площадки. Потому сейчас я и занимаюсь объединением SDK разных платформ, но это уже другая история.

Сложности с «Яндекс Играми»

Ещё есть и более тонкие, индивидуальные различия. У «Яндекса» строгая политика в отношении внешних источников: нельзя подключать внешние скрипты, работать с внешними API. Для использования внешних сервисов нужно обоснование, например нужно показать, что есть мультиплеер.

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

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

Сложности с «Играми ВКонтакте»

Тут нужен довольно развитый бэкенд: проверка авторизации, синхронизация между устройствами, обработка платежей, работа с API площадки. Часть функций доступна только на мобильных устройствах, например стики-баннеры и лидерборды.

У площадки довольно обширная документация, но ответы на многие вопросы нужно собирать по частям: чтобы понять фичу, приходится одномоментно читать порядка 5–10 страниц.

А вот ещё один мелкий, но неудобный нюанс: если хочется опубликовать пост с изображением игры, то изображение заливается в соцсеть и вместо ссылки используется ID картинки. Скриншоты приходится грузить, например, в альбом игрока. Для этого нужно получить разрешение на работу с изображениями.

Сложности с «Одноклассниками»

Тут повторяются те же проблемы, что и с «ВКонтакте», но к ним прибавляется множество особенностей, связанных с платежами. Так, в «Одноклассниках» не предусмотрено тестирование платежей, нужно пополнять ОКи и выставлять для теста минимальную валюту в 1 ОК. При работе с подписками нет возможности отменить или возобновить подписку внутри приложения. Отменять подписку можно только глубоко в настройках профиля.

Информация о покупке и её стоимости задаётся на стороне фронта, и, чтобы защититься от покупок 9999 кристаллов за 1 ОК, нужно дополнительно валидировать данные на бэкенде.

В качестве вывода — сводная таблица по параметрам и функциональности российских игровых площадок

Что выбрать начинающему HTML5-разработчику: сравниваем российские игровые площадки Гайд, Gamedev, Игры, Html 5, Unity, Construct, Telegram (ссылка), ВКонтакте (ссылка), YouTube (ссылка), Длиннопост, Яндекс Игры
Что выбрать начинающему HTML5-разработчику: сравниваем российские игровые площадки Гайд, Gamedev, Игры, Html 5, Unity, Construct, Telegram (ссылка), ВКонтакте (ссылка), YouTube (ссылка), Длиннопост, Яндекс Игры

Официальные инструкции

Игры ВКонтакте: страница разработчиков, инструкции по интеграции, требования к игре

Одноклассники: страница разработчиков, инструкции по интеграции, требования к игре

Яндекс Игры: страница разработчиков, инструкции по интеграции, требования к игре


Больше о сервисе:
Сайт
Новостной канал
Комьюнити разработчиков
Видеогайды
Группа ВК
Конференция по web-играм

Показать полностью 4
Гайд Gamedev Игры Html 5 Unity Construct Telegram (ссылка) ВКонтакте (ссылка) YouTube (ссылка) Длиннопост Яндекс Игры
3

4PDA и их модераторы⁠⁠

4PDA и их модераторы 4PDA, Блокировка, Негодование, Тупость, CSS, Html 5, Видео, YouTube, Мат, Длиннопост

вся модераторская братия на 4PDA , и остальные админы там же

я разместил самое толковое  после автора шапки пост в теме SOUL браузер .
моих там было 2 поста:
1. "еще один браузер на CSS" -- Это оставили
2. пост о возможностях CSS ,  применительно к этому браузеру,  с иллюстрацией того, что там может быть.


Да, именно это , сделанное моими руками на простом CSS, я предлагал показать вашим членам в теме.

Это модер-гандон удалил.

Кто из вашим модеров-говноедов, может это повторить ? Они ТУПО удаляют то, что им непонятно.
Это пиздец вредительство. Вы их еще на ЗП возьмите ))))))) .

Это мог сделать только самый ТУПОЙ СУКА ЗАСРАНЕЦ который про CSS и JS и не слышал. Ваш пиздюк-модер из SOUL может хоть квадрат Малевича на CSS нарисовать ???

да пошти вы НУХАЙ с вашими мульлинками , модерами и всеми вами , засранцами тупозасранными администрации.  Сами себе бирки навешали.
Наверное, сам 4PDA создавался не вами, настоящие профи ушли, наверное, уже померли. И вы , на их костях,  своих тупых уебанов продвигаете.

вы СТОЛЬКО ИСПОГАНИЛИ вашими модерами,  могу представить сколько  ваши тупари поудаляли.

Кто там был, если вы постоянно видите, что весь ЧПДА превращен свалку жалоб в 1-2 строки: "не работает, а как  ...  а  где,  ровняй руки, читай шапку ..." И так 100, 200, 1000 страниц. Если вы все это видите, значит модеры это все читают и ОСТАВЛЯЮТ. Там 1% инструкций, 98% "а как, а где ????", и 1% кто пытается что-то  новое написать , но до инструкции в шапке не дотягивает. Конечно, мои тексты имеют меньшую значимость , чем 98% "а как, а где ????".

У меня главный принцип -- НИ ОДНОГО КЛИКА по вашим рекламным коллаборациям. Да, именно так вы это и называете  . И так я знаю русский в отличие, от вас ,признаю , что я тоже коллаборант, вляпался в вас, сотрудничаю с врагом. Но использую средства предохранения, чтобы ваши гниды ни копейки не получили с меня. Да, от вашего счетчика просмотров я не смогу защититься, но вашим рекламным подсосам (хотя это вы у них  на подсосе:) ), от моих просмотров ни холодного, ни жарко. Вы можете гнать на мои просмотры в сотни миллионов, но если конверсия от них 0,00001% , это это моя работа.

это фак мой 15 аккаунт и ваши сучки меня не остановят. У меня только одна проблема : не клепать мылы вида seraga123515-_otso-site@bk.ru ,  а что-то осмысленное. Я даже с удовольствием ими пользуюсь для связи с нормальными людьми. Но в процессе изучения разных языков программирования эта проблема красиво решена.

По сути , я как качал все бесплатно и на халяву так и буду. У давно все ссылки структурованы, все скачивается на 5 минут.  Даже если ценой будет каждый новый логин. Здесь вы, суки, не успеете.
У меня даже выработалась психологическая устойчивость: вы ждете, что я должен следить за словами, подбирать их, следить за своей репой/кармой. )))  Нет , теперь я говорю тупым комментаторам всю правду о них.
это вы, бляти , на меня бесплатно работаете )))) , платите за новости своим писателям, чтобы я их читал , платите за сервера, за аренду,  обновляете железо, ЗП  всему штату , 50%  от всего этого еще и налоги в бюджет , ... но  НИКОГДА НИКОГДА вы это не конвертируете в бабло с меня.  По сути, это вы вы минусе, а не я. сдохните , блюдочный Чпда

Пушу этот  текст на Пикабу, параллельно им просьбу о рассмотрении чего-то.  Сверху: ПРЕДУПРЕЖДАЕМ ! Да предупреждайте вы своих тупарей , кто испоганили все форумы.

Показать полностью 1 1
[моё] 4PDA Блокировка Негодование Тупость CSS Html 5 Видео YouTube Мат Длиннопост
2
47

Раздается симулятор фермерства Sprout Valley на Itch.io⁠⁠

Раздается симулятор фермерства Sprout Valley на Itch.io Разработка, Инди игра, Gamedev, Эволюция, YouTube, Инди, Itchio, Не Steam, Фермерство, Милота, Windows, Mac Os, Linux, Android, Godot Engine, Godot, Видео, Длиннопост, Html 5

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

Предупреждение ! Для суровых геймеров любящих Дарк Соул-сы не входить! Опасно!)

Игра издана также на стим.

ЗАБРАТЬ

Sprout Valley — это очаровательный симулятор фермерства, в котором вы сможете отвлечься от суеты жизни и вырастить сад своей мечты. Увлекательная история, созданный вручную опыт.

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

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

Вы можете продавать и покупать собранные вами ресурсы. Используйте свои инструменты для достижения своей цели — жить мирной жизнью в гармонии и природе. Уровни генерируются процедурно, поэтому существует практически бесконечное количество комбинаций. Каждый уровень имеет «семя», и в будущем им можно будет поделиться с другими игроками, чтобы воссоздать острова и поделиться ими со всей базой игроков.

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

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

ЗАБРАТЬ

Обновлено 3 дня назад

Опубликовано 24 марта 2022 г.

Статус выпущен

Платформы Windows, macOS, Linux, Android, HTML5.

Оценка 4,7 из 5 звезд

Автор ZeFrost

Жанр Симуляторы

Сделано с Годо

Теги 2D, Милые, Фермерство

Средняя сессия Около получаса

Языки английский

Ввод Клавиатура, контроллер Xbox, контроллер Playstation

Ссылки Steam

Показать полностью 1
Разработка Инди игра Gamedev Эволюция YouTube Инди Itchio Не Steam Фермерство Милота Windows Mac Os Linux Android Godot Engine Godot Видео Длиннопост Html 5
6
0

Как сделать плавный спойлер из этого кода?⁠⁠

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

<div class="ba-testimonial__body">

Спойлер — это раскрытие интриги, влияющее на восприятие сюжета книги или фильма.

</br>

<div class="ba-testimonial__more" id="timore01">

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

</div>

<button class="ba-extra-text ba-testimonial__toggle" onclick="document.getElementById('timore01').classList.toggle('open')" aria-label="Читать далее" data-more-text="Читать далее" data-less-text="Свернуть"></button>

</div>

.ba-testimonial p {

margin-bottom: 16px

}

.ba-testimonial__body>:last-child {

margin-bottom: 0

}

.ba-testimonial__toggle {

color: var(--color);

font-size: 14px

}

.ba-testimonial__toggle:hover {

color: var(--color);

text-shadow: 0 0 5px

}

.ba-testimonial__toggle:before {

content: attr(data-more-text)

}

.open+.ba-testimonial__toggle:before {

content: attr(data-less-text)

}

.ba-testimonial__more {

display: none;

margin-bottom: 0px

}

.ba-testimonial__more.open {

display: block

}

.ba-testimonial__more>:last-child {

margin-bottom: 0

}

Демо

https://jsitor.com/AfkX7g1EG0

Показать полностью
Html 5 CSS Спойлер Текст
5
35

Раздача визуальной новеллы про голубя Джонни на диком западе Johnny The Pigeon на itch.io⁠⁠

Визуальной новеллы про голубя Джонни на диком западе Johnny The Pigeon (жаль, что без закадрового голоса Володарского😃)

Раздача визуальной новеллы про голубя Джонни на диком западе Johnny The Pigeon на itch.io Не Steam, Инди игра, Разработка, Gamedev, Раздача, Itchio, Визуальная новелла, Html 5, Windows, Mac Os, Linux, Android, Длиннопост
Раздача визуальной новеллы про голубя Джонни на диком западе Johnny The Pigeon на itch.io Не Steam, Инди игра, Разработка, Gamedev, Раздача, Itchio, Визуальная новелла, Html 5, Windows, Mac Os, Linux, Android, Длиннопост

Забрать

Сюжет

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

Гнездышко, где жил Джонни, когда-то славилось своим непреклонным правосудием и законами. Но появился кто-то, кто решил поставить под сомнение право на мирную жизнь нашего юного героя Голубя Джонни.

Сможет ли голубь Джонни дать отпор? Придется ли ему навсегда покинуть родной город?

Функции

Драйвовый сюжет с не драйвовым голубем.

Незабываемые 5 минут насыщенного геймплея

Нет выбора, мы все выбрали за вас!

И не забудем про самую драйвовую музыку дикого запада, от которой даже перья встают дыбом (взято с бесплатных ресурсов)

Обновлено : 26 дней назад

Опубликовано : 16 июля 2023 г.

Статус: выпущен

Платформы : Windows, MacOS, Linux, Android, HTML5

Оценка : 4,4 из 5 звезд

Автор : Синяя гарпия

Жанр : Визуальный роман

Сделано с помощью Ren'Py

Теги : 2D, комедия, голубь, Ren'Py, vhs, вестерн

Средняя сессия Несколько минут

Языки : английский, испанский; Латинская Америка, Украинская, Китайская

Специальные возможности : Субтитры, одна кнопка

Забрать

Так же от того же разработчика приключение - новелла

На диком западе Quiet West Butcher Noose

Раздача визуальной новеллы про голубя Джонни на диком западе Johnny The Pigeon на itch.io Не Steam, Инди игра, Разработка, Gamedev, Раздача, Itchio, Визуальная новелла, Html 5, Windows, Mac Os, Linux, Android, Длиннопост
Раздача визуальной новеллы про голубя Джонни на диком западе Johnny The Pigeon на itch.io Не Steam, Инди игра, Разработка, Gamedev, Раздача, Itchio, Визуальная новелла, Html 5, Windows, Mac Os, Linux, Android, Длиннопост

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

Они жили мирной жизнью, пока ужасная болезнь не охватила Дикий Запад. К сожалению, это затронуло семью «Мясника», и теперь нам нужно найти лекарство и спасти нашу семью в его роли.

Забрать

Показать полностью 3
Не Steam Инди игра Разработка Gamedev Раздача Itchio Визуальная новелла Html 5 Windows Mac Os Linux Android Длиннопост
2
3

Посоветуйте курсы/видео уроки по баннермейкерству в Adobe Animate⁠⁠

Работаю веб-дизайнером в it сфере, основное направление - мобильная реклама. До НГ делали всю анимацию в hype, сейчас решили перейти в animate. Нужны толковые курсы или видео уроки по анимации и механикам взаимодействия для html баннеров, желательно на русском, но можно и на инглише. Или вдруг кто-то из вас гуру анимейта и может провести пару тройку онлайн мастер классов за оплату?

Веб-дизайн Abode Html 5 Видеоуроки Подработка Текст
2
Посты не найдены