Как встроить игру Баше на сайт

Игру можно вставить на свою страницу через iframe, задать режим и стратегию компьютера адресом фрейма, а через postMessage узнать, чем закончилась партия.

Код для вставки

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

<iframe src="https://bashe.su/embed.html?mode=pvc&ai=optimal&first=human&lock=1"
        width="100%" height="720" style="border:0;max-width:720px"
        loading="lazy" title="Игра Баше" allow="fullscreen"></iframe>

Встроенная версия — это только игровое поле: без меню сайта, счётчиков, cookies и рекламы. Ширина подстраивается под блок, в который вставлен фрейм, от 320 пикселей.

Параметры

Настройки передаются в адресе фрейма после знака «?». Неизвестные или ошибочные значения заменяются значениями по умолчанию.

Параметр	Значения	Что делает
`mode`	`pvp` (по умолчанию), `pvc`	Игра вдвоём за одним экраном или против компьютера.
`ai`	`optimal` (по умолчанию), `random`	Стратегия компьютера: победная или случайные ходы.
`first`	`computer` (по умолчанию), `human`	Кто ходит первым в игре против компьютера.
`lock`	`1`	Скрывает переключатели режима и стратегии: настройки задаёт учитель.

Против победной стратегии с первым ходом компьютера выиграть нельзя: из 15 палочек компьютер сразу оставляет 12. Для тренажёра, где ученик должен найти выигрышную стратегию, подходит mode=pvc&ai=optimal&first=human: при первом ходе ученик может выиграть, если будет оставлять компьютеру число палочек, кратное четырём. Подробнее — в статье о выигрышной стратегии.

Высота фрейма и автоподстройка

Высота в коде подобрана с запасом для ширины 720 пикселей. На узких экранах поле выше, и внутри фрейма может появиться прокрутка. Чтобы фрейм сам подстраивался под содержимое, игра отправляет странице сообщение bashe:resize с нужной высотой в пикселях — его достаточно применить к фрейму (см. пример ниже).

События партии

Если игра открыта во фрейме, она сообщает родительской странице о ходе партии через window.postMessage. Сообщения — обычные объекты с полем type:

Сообщение	Поля	Когда
`bashe:ready`	`version` (сейчас 1), `mode`, `ai`, `first`, `lock`	Игра загрузилась и применила параметры.
`bashe:move`	`player`, `took`, `left`	После каждого хода: кто ходил, сколько взял, сколько осталось.
`bashe:end`	`winner`, `moves`	Партия окончена; `moves` — все ходы партии в формате `{player, took, left}`.
`bashe:resize`	`height`	При загрузке и при изменении высоты содержимого.

Игроки обозначаются так: human и computer в игре против компьютера, p1 и p2 в игре вдвоём.

Страница может попросить игру начать новую партию, отправив во фрейм сообщение {type: 'bashe:reset'}. Счёт при этом сохраняется.

Пример: тренажёр в LMS

Фрейм подстраивает высоту, а шаг засчитывается, когда ученик выиграл у компьютера:

<iframe id="bashe" src="https://bashe.su/embed.html?mode=pvc&ai=optimal&first=human&lock=1"
        width="100%" height="720" style="border:0;max-width:720px"
        loading="lazy" title="Игра Баше"></iframe>
<script>
  const frame = document.getElementById('bashe');

  window.addEventListener('message', (event) => {
    // Принимаем сообщения только от игры
    if (event.origin !== 'https://bashe.su' || event.source !== frame.contentWindow) return;
    const msg = event.data || {};

    if (msg.type === 'bashe:resize') {
      frame.style.height = msg.height + 'px';          // автоподстройка высоты
    }
    if (msg.type === 'bashe:end' && msg.winner === 'human') {
      markStepCompleted({ moves: msg.moves.length });  // функция вашей LMS
    }
  });

  // Начать партию заново:
  // frame.contentWindow.postMessage({ type: 'bashe:reset' }, 'https://bashe.su');
</script>

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

Встроенная версия не подключает Яндекс Метрику и не сохраняет cookies.
Сообщения игры не содержат персональных данных: только режим, ходы и итог партии.
Игра принимает команды только от страницы, в которую она встроена.
Проверяйте отправителя на своей странице: event.origin === 'https://bashe.su' и event.source === frame.contentWindow.

Вопросы и предложения по встраиванию присылайте через страницу Контакты.