A straightforward syntax for writing interactive fiction can be embedded in any website.
Make interactive fiction with variables, timers, conditions, music and statistics. The story is parsed into plain HTML, CSS and JavaScript.
You can use Markdown to format your story. Markdown cheat-sheet for reference.
Nearley for parsing. Showdown for markdown rendering.
A Regular Expression based parser is on the if-script-regex branch.
Within the head tag, add the following.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/plytonrexus/[email protected]/downloadable/if_r.css">
In your body, add the following scripts.
<div id="if_r-output-area"></div>
<script src="Story.js"></script>
<script src="https://cdn.jsdelivr.net/gh/plytonrexus/[email protected]/js/if_r-terp.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/showdown.min.js"></script>
<script> IF.methods.loadStory(IF.story); </script>
The indentation does not matter.
A comment is a text block that is not integrated into the final model of the story. Comments exist to help write cleaner stories, for example, by pointing out the purposes of certain portions of the story.
/* A
multi-line
comment */
Variables truly create dynamic stories. You can use variables to store many things like character names, inventory items, visited scenes, number of things and many others. You can then display the values of these variables anywhere like so:
Your name is ${name}.
Here, variable name
was used to store the name of a character.
The variables can also be used in conditional logic to determine which choices and (in a future release) what paragraphs of a section's text should be visible to the reader. You can find more about this under the choices heading.
You can assign variables beforehand inside story settings.
${name='Felicity'}
It is recommended (albeit not required) to keep the title
variable set as the title of the story.
Story settings allow you to customise the overall experiance of the story. All of the settings are optional. The available settings are:
@startAt
decides the starting section of a story. (Default: 1)@referrable
decides if the older sections remain visible once the reader moves to a new section. (Default: false)@fullTimer
decides the amount of time alloted for completing a story. (Default: none)
settings>
@startAt
@referrable
@fullTimer
<settings
Scenes are collections of sections
scene>
@first section_number (optional)
@music link (optional)
@sections space_seperated_section_numbers
@name custom_name_for_scene
<scene
Sections are independent locations/situations in a story. These can be reached through choices. Each section can have its own set of settings that allow it to have separate timers that send the reader to a separate section if they do not choose within specified time, and its own music. These features are beneficial in dramatic situations.
ss>
tt> Section Title <tt
Section text.
In paragraphs.
You can use variables here.
/*
You can write choices about now.
Read on to find out how to create them.
*/
<ss
Choice are the sole method to navigate a story by reaching sections or scenes. To send to a section:
ch>
You are named five [[5]]
<ch
To send to the beginning of a scene:
ch>
You are named five [[scene:5]]
<ch
Choices can assign variables.
ch>
Choose 'Felicity' as your name ${__name} [[5]]
<ch
Choices can also have input boxes. These input boxes can be used to take in custom values from the user and then stored in variables for later use.
ch>
Type in your name here: __input ${__name} [[5]]
<ch
Choices can have conditions. Only if these conditions are met is the choice displayed. Available operators are:
var1 == var2
Both are equalvar1 != var2
Both are inequalvar1 >= var2
First is greater than or equal to secondvar1 <= var2
Second is greater than or equal to firstvar1 > var2
First is greater than secondvar1 < var2
Second is greater than first
ch>
${__if name == "" || namePower <= 0}
Type in your name here __input ${__name} [[5]]
<ch
Choices can also do actions like addition (+), subtraction (-), multiplication (*) and division (/) on variables.
${__var1 = var2}
Assignment${__var1 + var2}
Addition${__var1 - var2}
Subtraction${__var1 * var2}
Multiplication${__var1 / var2}
Division
In each of these, the first variable is assigned values that result from the operation.
ch>
The power of your name goes up 10 units, and your health
is multiplied \${namePower} times.
${__namePower + 10} ${__health * namePower} [[5]]
<ch