В этой статье мы подробно разберём, как создать простое, но функциональное веб‑приложение, которое позволит пользователям гадать по системе Цзин (Книга Перемен) прямо в браузере. Мы будем использовать:
- серверный язык PHP для генерации случайных линий и подготовки данных.
- JavaScript (ES6+) для динамического отображения результата и интерактивности.
Код будет полностью открытым, а вы сможете легко адаптировать его под свои нужды.
Что такое Цзин и как работает гадание
Цзин – древнекитайский гадательный метод, основанный на 64 гексаграммах (шесть линий, каждая из которых может быть твердой или сломанной). Для онлайн‑гадания мы будем генерировать случайные линии, а затем сопоставлять их с таблицей гексаграмм.
1.1 Формат одной линии - Твердая линия (───) – «старый» или «постоянный» элемент.
- Сломанная линия (— —) – «новый» или «изменный» элемент.
В традиционном гадании используется метод «три броска» или «шесть монет», но для простоты будем генерировать строки случайными числами 0/1.
Структура проекта
/project
├─ index.php
├─ scripts
│ └─ hexagram.js
├─ styles
│ └─ style.css
└─ data
└─ hexagrams.json
Все файлы находятся в одной папке, но можно разбить их по папкам, как показано выше.
Создание PHP‑скрипта (index.php)
PHP отвечает за генерацию 6‑значного массива (каждое число 0 или 1) и отправку его в JavaScript.
<?php
// index.php
// Генерация случайных линий
$lines = [];
for ($i = 0; $i < 6; $i++) {
$lines[] = rand(0, 1); // 0 – сломанная, 1 – твердое
}
$hexagram = json_encode($lines);
?>
Нажмите кнопку, чтобы получить свою гексаграмму.
Обратите внимание на initialHexagram – массив, который передаётся в JS.
Данные гексаграмм (hexagrams.json)
Нужен словарь, сопоставляющий 6‑значный код с названием и описанием гексаграммы. Для примера добавим только несколько записей.
{
"000000": {
"title": "Пустота",
"description": "Состояние чистой потенциальности."
},
"111111": {
"title": "Хватание",
"description": "Энергия, которая стремится к целям."
},
"010101": { "title": "Поток",
"description": "Непрерывная смена и адаптация."
}
}
Сохраняем файл как data/hexagrams.json.
JavaScript (hexagram.js)
JS отвечает за отображение результата, а также за обновление гексаграммы при каждом клике.
// hexagram.js
document.addEventListener('DOMContentLoaded', => {
const drawBtn = document.getElementById('draw-btn');
const resultDiv = document.getElementById('result');
// Функция генерации новой гексаграммы
const generateHexagram = => {
const lines = [];
for (let i = 0; i < 6; i++) {
lines.push(Math.round(Math.random));
}
return lines;
};
// Функция отображения гексаграммы
const renderHexagram = (lines) => {
// Считываем данные из JSON
fetch('data/hexagrams.json')
.then(res => res.json)
.then(data => {
const key = lines.join('');
const entry = data[key] || {
title: 'Неизвестно',
description: 'Для данной комбинации нет данных.'
};
// Создаём визуальное представление .map((line, idx) => {
const symbol = line ? '───' : '— —';
return `${symbol}
`;
})
.join('');
${entry.title}
${entry.description}
`; })
.catch(err => { console.error(err);
});
};
// Инициализация при первом запуске
renderHexagram(initialHexagram);
// Обработчик кнопки
drawBtn.addEventListener('click', => {
const newHex = generateHexagram;
renderHexagram(newHex);
});
});
Стили (style.css)
Небольшой CSS для красоты.
body {
font-family: 'Arial', sans-serif;
background: #f5f5f5;
text-align: center;
padding: 20px;
}
h1 { color: #2c3e50; }
button {
padding: 10px 20px;
font-size: 16px;
margin: 10px;
cursor: pointer;
}
.hexagram {
display: inline-block;
margin: 20px 0;
font-family: monospace;
background: #fff;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
.line {
margin: 0;
}
Как это работает - При загрузке
index.php PHP генерирует массив из 6 случайных чисел (0/1) и выводит его как initialHexagram. - JavaScript читает этот массив и сразу отображает первую гексаграмму.
- При каждом клике на кнопку Гадать генерируется новая случайная гексаграмма, которая отображается пользователю.
- Весь процесс происходит в браузере, а PHP служит лишь для первоначальной генерации данных.
Что можно улучшить - Добавить более подробную таблицу гексаграмм (64 записи).
- Включить более «классический» метод генерации линий через монеты.
- Сохранить историю гаданий в базе данных MySQL.
- Использовать AJAX для обновления данных без перезагрузки страницы.
- Добавить анимацию для каждой линии при выводе.
- Создать структуру проекта с папками
scripts, styles и data. - Написать
index.php – генерация случайных линий и вывод начального массива. - Создать
hexagrams.json – словарь гексаграмм с названиями и описаниями. - Разработать
hexagram.js – генерацию новых линий, запрос к JSON и отображение результата. - Добавить стили в
style.css – оформление кнопки, гексаграммы и текста. - Тестировать приложение – убедиться, что каждая комбинация корректно отображается.
- Оптимизировать – добавить кеширование JSON, улучшить UX.
Таким образом, вы получили полностью работоспособное приложение для онлайн‑гадания по системе Цзин, использующее PHP для генерации данных и JavaScript для динамического отображения. Вы можете расширять его, добавляя новые функции, стили и более глубокую аналитику результатов.
Удачи в создании вашего гадательного проекта!