Один файл, ноль библиотек
Для большинства интерфейсных механик достаточно семантического HTML, CSS, Canvas API и нескольких килобайт JavaScript. Все примеры ниже работают автономно: файл можно скачать, открыть локально, изучить и адаптировать.
Preview, код и копирование
Каждая игра получила отдельную страницу с рабочей демонстрацией и полным исходным кодом. Кнопка копирования переносит весь HTML вместе со стилями и JavaScript — дополнительная сборка не требуется.
8 рабочих шаблонов
Запустить, разобрать или скачать
Каждая механика открывается на отдельной странице с live preview и полным исходником. Файлы автономны и не требуют сборщика.
Башня сайта
Показывает, как семантика, структура, контент, дизайн, HTML и аналитика собираются в устойчивую систему.
Пинг-понг внимания
Превращает путь от поискового запроса до заявки в механику удержания внимания.
Баланс сайта
Объясняет, почему SEO, содержание, дизайн, скорость и аналитика должны работать одновременно.
Маятник аудитории
Помогает показать точность попадания сообщения в сегмент аудитории.
Катапульта запросов
Пользователь направляет запрос на релевантную посадочную и на практике понимает поисковый интент.
Магнит лидов
Отделяет коммерческие сигналы от шума и объясняет ценность релевантного трафика.
Пинбол пути
Проводит пользователя через статью, кейс, стоимость, доверие и CTA.
Капли в сосуд
Позволяет собрать проект из SEO, контента, дизайна, кода и аналитики в заданном бюджете.
<canvas id="game" width="640" height="360"></canvas>
<script>
const canvas = document.querySelector('#game');
const ctx = canvas.getContext('2d');
let previous = performance.now();
function frame(now) {
const delta = Math.min((now - previous) / 1000, 0.032);
previous = now;
update(delta); // изменяем состояние
render(ctx); // рисуем один кадр
requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
</script>Производительность
На страницах с несколькими примерами игра не загружается до клика. Это сохраняет скорость основного документа и не запускает восемь циклов Canvas одновременно. Обычный HTML-контент остаётся доступным независимо от JavaScript.
Идея важнее механики
Код можно скопировать. Коммерческий сценарий нужно проектировать под задачу: что пользователь должен понять, какой выбор сделать и что произойдёт после завершения. Для каталога это подбор набора, для статьи — классификация запросов, для фитнес-сайта — интервальный таймер.