mirror of
https://github.com/Oreolek/undum.git
synced 2024-06-01 07:48:10 +03:00
230 lines
14 KiB
HTML
230 lines
14 KiB
HTML
<!DOCTYPE HTML>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<!-- Название игры; вставьте своё -->
|
||
<title>Undum</title>
|
||
<!-- Конец названия игры -->
|
||
|
||
<!-- Это стиль оформления вашей игры, измените его если вам хочется. -->
|
||
<link rel="stylesheet" href="media/css/undum.css" media="screen">
|
||
|
||
<!-- Поддержка переносных устройств. -->
|
||
<meta name="viewport" content="user-scalable=no, width=device-width">
|
||
<link rel="apple-touch-icon" href="media/img/iphone/icon.png">
|
||
<link rel="apple-touch-startup-image" href="media/img/iphone/splash.png">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||
<!--[if !IE]>-->
|
||
<link media="only screen and (max-width: 640px)"
|
||
rel="stylesheet" type="text/css" href="media/css/undum-mobile.css">
|
||
<!--<![endif]-->
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Это меню для мобильных устройств.
|
||
На широких экранах постоянно присутствует вся информация, это меню на них скрыто. -->
|
||
<div id="toolbar">
|
||
<!-- Краткая версия заголовка, для панели на мобильных устройствах. -->
|
||
<h1>Undum</h1>
|
||
<div class="nav">
|
||
<a href="#" class="button" id="menu-button">Меню</a>
|
||
</div>
|
||
</div>
|
||
<ul id="menu">
|
||
<li><a href="#title, #content_wrapper">Рассказ</a></li>
|
||
<li><a href="#character_panel">Персонаж</a></li>
|
||
<li><a href="#info_panel">Информация</a></li>
|
||
</ul>
|
||
|
||
<div id="page">
|
||
|
||
<div id="tools_wrapper">
|
||
<div id="info_panel" class="tools left hyphenate">
|
||
|
||
<!-- Информация об игре, предыстория; отредактируйте это. -->
|
||
<h1>Undum</h1>
|
||
<p>
|
||
Undum - это чисто клиентский (client-side) игровой движок для повествовательной интерактивной литературы.
|
||
Он создан для HTML 5 и CSS 3. Вы можете прочитать о нём и скачать исходный код
|
||
<a href="https://github.com/oreolek/undum">здесь</a>.
|
||
</p>
|
||
<!-- Конец предыстории -->
|
||
|
||
<div class='buttons'>
|
||
<button id="save">Запомнить</button><button id="erase">Забыть</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="character_panel" class="tools right">
|
||
<h1>Персонаж</h1>
|
||
<div id="character">
|
||
<div id="character_text">
|
||
<div id="character_text_content" class="hyphenate"></div>
|
||
</div>
|
||
<div id="qualities"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="mid_panel">
|
||
<div id="title">
|
||
<div class="label">
|
||
|
||
<!-- Приветствие игры; отредактируйте это -->
|
||
<h1><span class="fancy">Undum</span></h1>
|
||
<h2>Движок гипертекстовых игр</h2>
|
||
<!-- Конец приветствия -->
|
||
<noscript><p class="noscript_message">Эта игра требует включённого Javascript.</p></noscript>
|
||
<p class="click_message">Нажмите, чтобы начать</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="content_wrapper">
|
||
<div id="content" class="hyphenate">
|
||
</div>
|
||
<a name="end_of_content"></a>
|
||
</div>
|
||
|
||
<div id="legal">
|
||
<!-- Ваш копирайт; отредактируйте это -->
|
||
<p>Содержимое, дополнительное программное обеспечение и дизайн © <a href="../index.html#CREDITS">авторы Undum.</a></p>
|
||
<!-- Конец вашего копирайта -->
|
||
|
||
<!-- Нам будет приятно, если вы оставите эту ссылку в своей игре. -->
|
||
<p>
|
||
Создано с использованием <a href="http://undum.com">Undum.</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- В этом блоке располагаются элементы интерфейса, которые будут клонированы и размещены на главной странице. Сам блок всегда скрыт. -->
|
||
<div id="ui_library">
|
||
<div id="quality" class="quality">
|
||
<span class="name" data-attr="name"></span>
|
||
<span class="value" data-attr="value"></span>
|
||
</div>
|
||
|
||
<div id="quality_group" class="quality_group">
|
||
<h2 data-attr="title"></h2>
|
||
<div class="qualities_in_group">
|
||
</div>
|
||
</div>
|
||
|
||
<div id="progress_bar" class="progress_bar">
|
||
<span class="name" data-attr="name"></span>
|
||
<span class="value" data-attr="value"></span>
|
||
<div class="progress_bar_track">
|
||
<div class="progress_bar_color" data-attr="width">
|
||
</div>
|
||
</div>
|
||
<span class="left_label" data-attr="left_label"></span>
|
||
<span class="right_label" data-attr="right_label"></span>
|
||
</div>
|
||
|
||
<hr id="turn_separator">
|
||
</div>
|
||
|
||
<!-- Этот блок здесь не обязателен, но он прописан в CSS как скрытый, поэтому
|
||
это хорошее место для того,чтобы спрятать в нём блоки (например, кусочки текста), которые вы
|
||
не хотите хранить в коде игры. Посмотрите файл tutorial.game.js для того,чтобы понять,
|
||
как это используется. -->
|
||
<div id="content_library">
|
||
<div id="s_situations">
|
||
<h1>Ситуации</h1>
|
||
<p>В Undum, любое взаимодействие происходит в ситуации. Вы можете думать о ситуации
|
||
либо как о 'Комнате' (Room) в традиционной интерактивной литературе (хотя
|
||
этот подход не так гибок), или как о 'Странице' в книге-игре. В любой момент времени,
|
||
персонаж находится точно в одной ситуации, и эта ситуация отвечает за всё,
|
||
что происхожит с ним.</p>
|
||
<p>Ситуации - это кусочки кода, которые генерируют вывод - то есть то, что вы сейчас читаете.
|
||
Например, этот текст был сгенерирован методом <em>enter</em> первой ситуации.
|
||
</p>
|
||
<p class='transient'>
|
||
Давайте <a href='todo'>снова сделаем шаг вперёд.</a>
|
||
</p>
|
||
</div>
|
||
|
||
<div id="s_saving">
|
||
<h1>Сохранение и загрузка</h1>
|
||
<p>Единственный элемент интерфейса, о котором мы не заговорили, это кнопки
|
||
«Сохранить» и «Стереть» на левой панели. Они видны только если ваш браузер
|
||
поддерживает клиентское хранилище данных.</p>
|
||
<p>Нажатие на «Сохранить» складывает вашу игру в хранилище, чтобы вы смогли
|
||
подобрать её позже. В настоящее время здесь нет кнопки «Загрузить», и
|
||
сохранённая игра загружается, когда загружается страница. Также нет
|
||
способа сделать несколько сохранений, и выбрать то, с которым вы хотели бы
|
||
играть. Это те вещи, которые я хотел бы изменить в будущем.
|
||
</p>
|
||
<p>
|
||
Потенциально, ваша игра может генерировать огромное количество текста.
|
||
И это было бы сложно сохранять в на стороне клиента (существуют непредсказуемые ограничения), особенно
|
||
если мы хотим двигаться к владению несколькими файлами сохранений.
|
||
Поэтому вместо того Undum сохраняет вашего персонажа как список ссылок,
|
||
на которые вы нажали. Загрузка файла сохранения состоит из переигрывания вашей игры
|
||
заново, только очень быстро. Этот подход удобен и в отладке тоже.
|
||
Это означает, что, когда вы отшлифовываете и исправляете ошибки, вы можете
|
||
сохранить, затем загрузить игру и пройтись по всему транскрипту, чтобы увидеть свои правки.
|
||
Если бы мы сохраняли текст, ваш файл сохранения был бы ошибочным, и вам бы пришлось вручную переигрывать
|
||
всю игру, чтобы увидеть изменения.
|
||
</p>
|
||
<p class='transient'>
|
||
Давайте вернёмся к <a href='hub'>списку тем</a>.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Некоторые ситуации объявлены полностью в HTML -->
|
||
<div id="hub" class="situation" data-choices="#topic"
|
||
data-option-text="Список тем" data-show-visited='false'>
|
||
<h1 class="transient">Темы</h1>
|
||
<p class="transient">Выберите тему, о которой вы хотите узнать подробнее. Если вы сомневаетесь, пройдите по порядку.</p>
|
||
</div>
|
||
|
||
<div id="implicit" class="situation" data-tags="topic"
|
||
data-heading="Неявный выбор" data-display-order="7"
|
||
data-choices="#example">
|
||
<p>Когда вы пишете игру на Undum, вам может понадобиться сделать так,
|
||
чтобы некоторые возможности появлялись только при соблюдении определённых
|
||
условий. У вас может быть возможность снять секретную панель в старинном
|
||
доме с привидениями, но она должна быть доступна только если персонаж знает, где
|
||
она находится. </p>
|
||
<p>Если возможности доступны в нескольких ситуациях, за ними будет трудно следить,
|
||
чтобы нарисовать список из именно доступных вариантов выбора.</p>
|
||
<p>Чтобы помочь, Undum может составлять списки ссылок на ситуации за вас.
|
||
Он делает это в три шага. Сначала, каждой ситуации вы назначаете одну или
|
||
больше меток (тегов). Это позволит вам, например, попросить список ситуаций
|
||
с меткой <em>"в коридоре".</em></p>
|
||
<p>Во-вторых, ситуации имеют метод <em>canView,</em> который решает, может
|
||
ли эта ситуация появляться в списках. Этот метод может следить за сложными
|
||
зависимостями, по-своему оценивать текущее состояние игры.</p>
|
||
<p>Наконец, ситуации <em>SimpleSituation</em> имеют опцию <em>choices</em>.
|
||
Если вы запишете в неё одну или несколько меток, то построение списков выбора
|
||
будет полностью автоматизировано.</p>
|
||
<p>Вы уже видели это в списке тем. Список тем генерируется автоматически.
|
||
В нём включена опция скрытия тем, которые вы уже посещали.
|
||
<span class="transient">Давайте посмотрим на более сложный пример автоматического
|
||
списка, который может меняться:</span></p>
|
||
</div>
|
||
|
||
<div id="example-choices" class="situation" data-choices="#example">
|
||
<p class="transient">Вы можете вернуться к <a href='hub'>списку тем</a> или выбрать другую
|
||
ссылку из этого примера:</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Загружаем необходимые библиотеки -->
|
||
<script type="text/javascript" src="media/js/jquery-2.1.3.min.js"></script>
|
||
<script type="text/javascript" src="https://cdn.jsdelivr.net/hyphenator/4.2.0/hyphenator.min.js"></script>
|
||
<script type="text/javascript" src="https://cdn.jsdelivr.net/hyphenator/4.2.0/patterns/ru.js"></script>
|
||
<script type="text/javascript" src="media/js/undum.js"></script>
|
||
<script type="text/javascript" src="media/js/lang/ru.js"></script>
|
||
<script type="text/javascript">
|
||
Hyphenator.run();
|
||
</script>
|
||
|
||
<!-- Задайте здесь путь к главному файлу с вашей игрой. -->
|
||
<script type="text/javascript" src="media/games/tutorial/tutorial.game.ru.js"></script>
|
||
</body>
|
||
</html>
|