Движок поддерживает специальные плейсхолдеры, которые автоматически заменяются на актуальные значения:
!username! — логин текущего игрока.!name! — имя текущего игрока.!teamname! — название команды.!game_id! — ID текущей игры.!task_id! — ID текущего задания. Уникален внутри игры и сохраняется при копировании задания или игры целиком, так что скрипт, сравнивающий с конкретным ID, продолжит работать в копии.!task_n! — порядковый номер задания в игре.!bonus! — суммарная стоимость всех набранных бонусов (баллов) команды.!task_bonus! — сумма бонусов, набранных командой на текущем задании.Описано подробно на странице стилизации уровней.
Если игроку нужно предложить нажать на кнопку вместо ручного ввода кода, переключите редактор задания в режим исходного кода («Источник») и вставьте один из вариантов:
<!-- Обычный ввод кода -->
<button type="button" class="btn btn-default btn-block shadow" onclick="enter('Код который надо вбить')">Вбить код</button>
<!-- Ввод без отображения результата на экране -->
<button type="button" class="btn btn-default btn-block shadow" onclick="enter_silent('Код который надо вбить')">Вбить код без отображения результата</button>
<!-- Ввод с подтверждением действия (диалоговое окно) -->
<button type="button" class="btn btn-default btn-block shadow confirm" onclick="enter('Код который надо вбить')">Вбить код с подтверждением</button>
<!-- Ввод с подтверждением и скрытием результата -->
<button type="button" class="btn btn-default btn-block shadow confirm" onclick="enter_silent('Код который надо вбить')">Вбить код с подтверждением и без отображения результата</button>
Вы можете заменять куски текста или медиа на текущем уровне на содержимое других игровых элементов (правильно вбитых кодов, открывшихся подсказок или бонусов) по мере прохождения:
<span class='replacer' data-find='чем заменять'>Любой текст до замены</span>
или
<div class='replacer' data-find='чем заменять'>Любой текст до замены</div>
Параметр data-find указывает, что именно нужно скопировать на место этого тега:
#b3 .bonus-hint — содержимое (описание) 3-го бонуса.#b3 .bonus-description — формулировка задания 2-го (или 3-го) бонуса.#c4 .right-answer — правильно вбитый игроками 4-й код (показывает сам вбитый ответ).#hb2 — текст 2-й подсказки (или штрафной подсказки).Важно: Между номером элемента (например,#c4) и его классом (например,.right-answer) обязательно должен стоять пробел.
* Неверно:#c4.right-answer
* Верно:#c4 .right-answer
Частый приём на основе Replacer: на картинке-подложке по мере разгадывания бонусов проявляются (или, наоборот, исчезают) объекты. Каждый слой лежит в описании своего бонуса, а на уровне все слои накладываются друг на друга через css-сетку — все элементы ставятся в одну и ту же ячейку:
<div style="display: grid;"> <img src="ССЫЛКА_НА_ПОДЛОЖКУ" style="grid-row-start: 1; grid-column-start: 1;" /> <div class="replacer" data-find="#b1 .bonus-hint" style="grid-row-start: 1; grid-column-start: 1;"> </div> <div class="replacer" data-find="#b2 .bonus-hint" style="grid-row-start: 1; grid-column-start: 1;"> </div> <div class="replacer" data-find="#b3 .bonus-hint" style="grid-row-start: 1; grid-column-start: 1;"> </div> </div>
В описание каждого бонуса кладётся картинка слоя — прозрачный png того же размера, что и подложка. Пока бонус не закрыт, замещать нечего и слой не виден; как только бонус закрыт, на подложке появляется его объект. Бонусы можно вбивать в любом порядке.
Сами блоки бонусов при этом обычно прячут, чтобы игрок видел только картинку:
$("#out_bonuses").hide();
Чтобы объекты, наоборот, исчезали после разгадывания, слои-картинки кладутся на подложку сразу в тексте задания, а замещением показывается кусок фона, закрывающий объект.
Готовые шаблоны и примеры JavaScript-сценариев для уровней можно посмотреть на странице: Типичные скрипты.