Скрипт гадания на рунах для сайта

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

Что такое руническое гадание?

Руническое гадание – это метод предсказания, основанный на древних скандинавских символах (рунах). Обычно используется набор из 24 рун (футарк), каждая из которых имеет собственное значение. При гадании пользователь «тянет» одну или несколько рун, после чего получает трактовку.

Общие требования к скрипту

• Кросс‑браузерность – работает в Chrome, Firefox, Safari, Edge.
• Адаптивный дизайн – поддержка мобильных устройств.
• Лёгкая интеграция – минимум внешних зависимостей (чистый JavaScript).
• Безопасность – отсутствие XSS‑уязвимостей, защита от спама;
• Расширяемость – возможность добавить новые руны, менять стили, подключать базы смыслов.

Структура проекта

1. styles.css (опционально) – стилизация.
2. runes.js – JavaScript‑логика гадания.
3. runes.json – база данных рун и их значений.

Подготовка данных: файл runes.json

В JSON‑файле храним массив объектов, каждый из которых описывает одну руну.

{
 "runes": [
 {
 "name": "ᚠ",
 "title": "Феху (Fehu)",
 "meaning": "богатство, успех, материальные блага"
 },
 {
 "name": "ᚢ",
 "title": "Уруз (Uruz)",
 "meaning": "сила, энергия, здоровье"
 },
 // … остальные 22 руны …
 {
 "name": "ᛝ",
 "title": "Инг (Ingwaz)",
 "meaning": "рост, плодородие, завершение цикла"
 }
 ]
}

<!DOCTYPE html><head>
 <meta charset="UTF-8">
 <title>Гадание на рунах</title>
 <link rel="stylesheet" href="styles.css">
</head>
<body>

 <h1>Гадание на рунах</h1>
 <p>Нажмите на любую руну, чтобы вытянуть её значение.</p>

 <!-- Блок с рунами --> 
 <div id="rune-container"></div>

 <!-- Окно результата --> 
 <div id="result" style="display:none; margin-top:20px;">
 <h2>Ваша руна:</h2>
 <p id="rune-name" class="rune"></p>
 <p id="rune-title"></p>
 <p id="rune-meaning"></p>
 <button id="resetBtn">Сделать новое гадание</button>
 </div>

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

Стилизация (необязательно, пример в styles.css)

#rune-container {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 10px;
 margin-top: 20px;
}
.rune {
 font-size: 3rem;
 padding: 10px;
 border: 2px solid #777;
 border-radius: 8px;

 cursor: pointer;
 transition: transform .2s, background .2s;
}
.rune:hover {
 background: #e0e0e0;
 transform: scale(1.1);
}
#result {
 text-align: center;
 border-top: 1px solid #ccc;
 padding-top: 20px;
}

JavaScript‑логика (runes.js)

Код делится на несколько частей:

1. Загрузка данных из runes.json.
2. Отображение всех рун в контейнере.
3. Обработка клика – случайный выбор руны (или выбранной пользователем).

// ==== runes.js ====
// 1. Получаем ссылки на элементы
const container = document.getElementById('rune-container');
const resultDiv = document.getElementById('result');
const runeNameEl = document.getElementById('rune-name');
const runeTitleEl = document.getElementById('rune-title');
const runeMeaningEl = document.getElementById('rune-meaning');
const resetBtn = document.getElementById('resetBtn');

// 2. Хранилище рун
let runes = [];
// 3. Функция загрузки JSON‑данных
async function loadRunes {
 try {
 const response = await fetch('runes.json');
 const data = await response.json;
 runes = data.runes;
 renderRunes;
 } catch (err) {
 console.error('Не удалось загрузить руну:', err); }
}

function renderRunes { runes.forEach((r, index) => {
 const span = document.createElement('span');
 span.className = 'rune';
 span.textContent = r.name;
 span;dataset.id = index; // сохраняем индекс для быстрой ссылки
 span.title = r.title; // подсказка при наведении
 span.addEventListener('click', onRuneClick);
 container.appendChild(span);
 });
}
// 5. Обработчик клика по руне
function onRuneClick(e) {
 const idx = e.target.dataset.id;
 const chosenRune = runes[idx];
 showResult(chosenRune);
}

// 6. Показ результата
function showResult(rune) {
 // Скрываем список рун
 container.style.display = 'none';
 // Заполняем блок результата
 runeNameEl.textContent = rune.name;
 runeTitleEl.textContent = rune.title;
 runeMeaningEl.textContent = rune.meaning;
 // Показ блока
 resultDiv.style.display = 'block';
}

// 7. Сброс к исходному состоянию
resetBtn.addEventListener('click',  => {
 resultDiv.style.display = 'none';
 container.style.display = 'flex';
});

// 8. Инициализация
loadRunes;

Как улучшить скрипт

Выбор нескольких рун

Если хочется более сложного расклада (например, 3‑рунный «путь»), достаточно изменить логику onRuneClick:

let selected = [];

function onRuneClick(e) {
 const idx = e.target.dataset.id;
 const rune = runes[idx];
 selected.push(rune);
 e.target.style.opacity = '0.4'; // визуальная отметка

 if (selected.length === 3) {
 showMultipleResult(selected);
 }
}

Анимация «перетаскивания»

Для более интерактивного ощущения можно добавить библиотеку Anime.js и анимировать появление руны в центр экрана.

Хранение истории в localStorage

Позволит пользователю увидеть свои прошлые расклады.

function saveToHistory(rune) {
 const history = JSON.parse(localStorage.getItem('runeHistory') || '[]');
 history.unshift({name: rune.name, title: rune.title, meaning: rune.meaning, date: new Date});
 localStorage.setItem('runeHistory', JSON.stringify(history.slice(0,20)));
}

SEO‑дружественный вывод

Доступность (accessibility)

• Добавьте role="button" и tabindex="0" к каждому элементу руны.
• Обрабатывайте событие keydown (Enter/Space) для клавиатурного доступа.
• Убедитесь, что контраст текста и фона соответствует WCAG 2.1 AA.

Размещение скрипта на готовом сайте

1. Убедитесь, что сервер отдает .json с правильным MIME‑типом (application/json).
2. Если ваш сайт использует систему сборки (Webpack, Gulp), подключите runes.js как модуль.
3. Проверьте работу на локальном сервере (npm start или python -m http.server);

Отладка и типичные ошибки

Дата публикации: 26‑04‑2026