This text-based adventure game player lets you create your own text-based adventure games. You can do this by
creating a custom file in a language called JSON.
It may look complicated, but is very straightforward once you learn the format.
JSON is made of objects, which start with a "{" and end with a "}". Each
object contains properties, which follow the following format: "key": value
This value can be either another object or a string. A string is a bit of text surrounded by a quotation mark
(' or ") on both sides.
If the property is followed by another property in the same object, it
must be end with a comma like this: "key": "value",
{
"name": "template",
"screens": {
"text": "Example",
"options": {
"door 1": {
"purpose":
"open door 1",
"text":
"Behind door 1 is a portal leading back to the beginning.",
"options":
{
"continue":
{
"purpose":
"go through the portal",
"goto":
"screens"
}
}
},
"Door 2": {
"purpose":
"open door 2",
"type":
"end",
"text":
"There was a lion behind the door and it ate you.",
}
}
}
}
Download the template. It has all the required properties.
If the template shows as "template.json" in your file manager, rename it to <your game's
name>.json, or just the name of your game if the template shows as just "template" in your file
manager.
Open it in a text or code editor. (Notepad is a text editor.)
The main object must have the following properties: name and screens.
Set the property "name" to the name of your game.
Required
Value: a string containing the name of the game
Required
Contains all the screens.
Value: a screen object
Optional
Changes the tab title for the entire game. Can be overridden by using this
attribute in an individual screen object.
Value: a string;
Optional
Disables the ability for the user to type "go back" for the entire game. Can be overridden by using this
attribute in an individual screen object.
Value: true or false (No quotation marks)
Optional
Defines the style themes that can be used for adding styling to your game. See the section on styling.
Value: a style object
{
...
"screens": {
"text": "Example",
"options": {
"door 1": {
"purpose":
"open door 1",
"text":
"Behind door 1 is a portal leading back to the beginning.",
"options":
{
"continue":
{
"purpose":
"go through the portal",
"goto":
"screens"
}
}
},
"Door 2": {
"purpose":
"open door 2",
"type":
"end",
"text":
"There was a lion behind the door and it ate you.",
}
}
},
...
}
Required unless the goto attribute is set
Value: a string containing the text shown to the user
Optional
Value: a string containing the text shown to the user in the header. Header is not shown if blank.
Required except in the root screen object ("screen"), where it has no effect
Value: a string containing what will happen if the user chooses this path
Optional
Changes the tab title for the current screen. Overrides any pageTitle value
set in the root object.
Value: a string;
Optional
Disables the ability for the user to type "go back" for the the current screen. Overrides any disableUndo value
set in the root object.
Value: true or false (No quotation marks)
Required unless the "type" property is set to "end" or the "goto" attribute is
set.
Value: an object containing one or more screen objects objects named after what the user types in to go to that
screen.
{
...
"options": {
"door 1": {
"purpose":
"open door 1",
"text":
"Behind door 1 is a portal leading back to the beginning.",
"options":
{
"continue":
{
"purpose":
"go through the portal",
"goto":
"screens"
}
}
},
"Door 2": {
"purpose":
"open door 2",
"type":
"end",
"text":
"There was a lion behind the door and it ate you.",
}
},
...
}
Optional
Value: the name of a valid style object. See the section on styling.
Optional. Has no effect inside the root screen object ("screen").
Value: A path. For example, in the example game file the path for screen for door 1 is
"screens.options.door 1"
{
...
"styles": {
"default": {
"all": {
"backgroundColor":
"teal",
"color":
"white",
"textShadow":
"1px 1px 2px black"
},
"text": {
"fontStyle":
"italic",
"outlineStyle":
"dashed",
"fontFamily":
"cursive"
}
},
"death": {
"all": {
"backgroundColor":
"red",
"color":
"white",
"textDecorationLine":
"underline",
"textDecorationStyle":
"dotted",
"textDecorationColor":
"yellow"
},
"choices": {
"backgroundColor":
"yellow"
}
}
},
...
}
Inside of the main object of the game file is a "styles" property. This is an object containing style objects.
Style objects can contain 4 objects: "all", "header", "text", and "choices".
These contain the styles for each section of the screen. Styles are inherited from the "all" property if present, but can be overridden by setting the same property with the same value within the desired part's styling.
Style objects are given a name, and that name is used in the "style" property of a screen object. For example, the death color scheme above would be set by putting "style": "death" in a screen object.
To remove an inherited value, set it to "".
This player uses CSS colors. it can be a hex code (#XXXXXX), an RGB color code (rgb(<r>, <g>, <b>)), or more. See this page on CSS colors for more details.
A style property used to change the background color.
Value: A color
A style property used to change the text color.
Value: A color
A style property used to change the font type.
Value: A font. This is a comma seperated list of fonts. Some available fonts are serif, sans-serif, monospace, cursive, or fantasy. You can also choose fonts available on the device. A valid value could be "Comic Sans MS, cursive" or "serif". See this page on CSS font families for more details.
A style property used to change the font size.
Value: A length, or another type listed in the following link. See this page on font size for more details.
A style property used to change if a font is italicized.
Value: "normal" or "italic"
A style property that does something.
See this page on the font varient CSS property.
A style property that controls the boldness of a font.
Value: "normal", "bold", a number 1-1000, "lighter", or "bolder". See this page on the font weight CSS property.
A style property that controls the space between letters.
Value: "normal", or a length. See this page on CSS length values.
A style property that controls the height of a line of text.
Value: "normal", a unitless number, a percentage, or a length. See this page on CSS length values.
A style property that controls the color of the outline.
Value: A color
A style property that controls how far away from the edge the outline is. Can be used with a negative length to make more of the outline visible.
Value: A length. See this page on CSS length values.
A style property that controls the style of the outline.
Values: "none", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", or "outset".
A style property that controls how thick the outline is.
Value: "thin", "medium", "thick", or a length. See this page on CSS length values.
A style property that controls the color of the text's line such as an underline.
Value: A color
A style property that controls the type of line used for text decoration.
Value: "none", "underline", "overline", "line-through", "blink", "spelling-error", or "grammar-error".
A style property that controls the style of the text decoration line.
Value: "solid", "double", "dotted", "dashed", or "wavy".
A style property that controls the thickness of the text decoration line.
Value: See this page about textDecorationThickness
A style property that controls how far away from the text the text decoration is.
Value: "auto" or length.See this page on CSS length values.
A style property that adds a shadow to the text.
Value: See this page about textShadow
A style property that controls the capitalization of the text.
Value: "none", "capitalize", "uppercase", or "lowercase".