<img src="https://openclipart.org/image/400px/205429" alt="An image of the world." />
Hello [[world]].
<br>
^^Further advanced technology^^
<<nobr>>
<<if !$name>>
What’s your name? <<textbox "$name" "">>
<<button "Submit">>
<<run if ($name.trim() !== "") { alert("Hello, " + $name + "!"); }>>
<</button>>
<</if>>
<<if $name>>
Welcome back, <<print $name>>!
<</if>>
<!-- Only show this section if at least one visit has been recorded -->
<<if $twineVisits > 0 or $linuxVisits > 0 or $bsdVisits > 0>>
I recorded that you visited:
<ul>
<<if $twine is true>><li>Planet Twine: <<print $twineVisits>> visits</li><</if>>
<<if $linux is true>><li>Planet Linux: <<print $linuxVisits>> visits</li><</if>>
<<if $bsd is true>><li>Planet BSD: <<print $bsdVisits>> visits</li><</if>>
</ul>
<</if>>
<</nobr>>
<br>
Clicking these [[links]] will show you what else you can click and change.
Clicking these [[examples]] will show you how text can appear as if it's being typed.
Clicking [[randomizers]] will show you how code can randomize text on screen.
<<if $name>>
Welcome, <<print $name>>!
<</if>>
This was made in [[Twine]] on [[Linux]].
<<set $offworld to true>>
<<choice Start "Return to Earth.">>Twine is an interactive story framework. It runs on all operating systems, but I prefer to use it on [[Linux]].
<<set $twineVisits += 1>>
<<set $twine to true>>
<<choice Start "Return to Earth.">>
Linux is an open source [[Unix]]-like operating system.
<<set $linuxVisits += 1>>
<<set $linux to true>>
<<choice Start "Return to Earth.">>
BSD is an open source version of AT&T's Unix operating system.
If the link to earth stops working on the other 'made up' planets, you can always come here to use the link below to get out.
<<set $bsdVisits += 1>>
<<set $bsd to true>>
<<link "Return to Earth">><<goto "Start">><</link>>
<<type 30ms skipkey "Control">>
Type characters from this content every 40 milliseconds. Including [[links]] and ''other markup''!
<</type>>
<<type 100ms skipkey "Control">>
Type characters from this content every 100 milliseconds, using the Control (CTRL) key as the skip key.
<</type>>
<<timed 3s>>
This text simply appears after 3 seconds.
<</timed>>
<<type 40ms start 2s>>
<<print $name>>: "I sound like I'm speaking this content every 40 milliseconds, starting after a 2 second delay."
<</type>>
<<type 20ms skipkey "Control" class "foo bar">>
Type characters from this content every 20 milliseconds, adding classes to the typing container.
<</type>>
<<type 20ms skipkey "Control" id "type01">>
Type characters from this content every 20 milliseconds, assigning an ID to the typing container.
<</type>>
<<type 20ms skipkey "Control" keep>>
Type characters from this content every 20 milliseconds, keeping the cursor after typing is complete.
<</type>>
Return to [[Start]]→ Without forwarding: a very basic statistic setting example
Strength Level: <<set $pcStr to 10>><span id="stats-str"><<print $pcStr>></span> \
( <<button "[+]">><<set $pcStr++>><<replace "#stats-str">><<print $pcStr>><</replace>><</button>> \
| <<button "[-]">><<set $pcStr-->><<replace "#stats-str">><<print $pcStr>><</replace>><</button>> )
<!-- Energy Level with Conditional Feeling (3X more code...) -->
Energy Level: <<set $energyLevel to 10>><span id="energy-stats"><<print $energyLevel>></span> \
<<nobr>>
( <<button "[+]">>
<<set $energyLevel++>>
<<replace "#energy-stats">><<print $energyLevel>><</replace>>
<<replace "#feeling-status">>
<<set $feeling to ($energyLevel === 10 ? "pretty even" : ($energyLevel > 10 ? "buoyant" : "sluggish"))>>
Currently you feel: <<print $feeling>>
<</replace>>
<</button>>
|
<<button "[-]">>
<<set $energyLevel-->>
<<replace "#energy-stats">><<print $energyLevel>><</replace>>
<<replace "#feeling-status">>
<<set $feeling to ($energyLevel === 10 ? "pretty even" : ($energyLevel > 10 ? "buoyant" : "sluggish"))>>
Currently you feel: <<print $feeling>>
<</replace>>
<</button>>
)
<</nobr>>
<!-- Display Feeling Status Separately -->
<div id="feeling-status">
<<set $feeling to ($energyLevel === 10 ? "pretty even" : ($energyLevel > 10 ? "buoyant" : "sluggish"))>>
Currently you feel: <<print $feeling>>
</div>
<!-- Affects the top statistic above -->
<<button "[Double Strength]">>
<<if $pcStr < 10000>> <!-- Sets a cap at 10000 -->
<<set $pcStr *= 2>>
<</if>>
<<replace "#stats-str">><<print $pcStr>><</replace>>
<</button>>
<br>
<!-- Collect a Unique Artifact Button -->
<<button "Collect a Unique Artifact">>
<<script>>
const items = ["Ancient Scroll", "Mystic Gem", "Alien Plant"];
const item = items[Math.floor(Math.random() * items.length)];
State.variables.inventory.push(item);
alert("You collected: " + item);
<</script>>
<</button>>
<br>
<!-- Pass Time Button with Delay to Start -->
<<button "Pass Time">>
<<script>>
State.variables.timeOfDay = (State.variables.timeOfDay === "Day") ? "Night" : "Day";
alert("It is now " + State.variables.timeOfDay + ".");
setTimeout(() => {
Engine.play("Start"); // Navigate to the "Start" passage after delay
}, 1000);
<</script>>
<</button>>
<br><br>
Also you can make options disappear.
→ Without a transition
We—We should <<linkappend "take">> away their METAL BAWKSES<</linkappend>>!
→ With a transition
I spy with my little <<linkappend "eye" t8n>>, a crab rangoon<</linkappend>>.
<!-- Link to Return to Earth -->
Return to [[Start]]
See how you feel [[on another page|randomizers]]''Foo:'' <<do tag "foo foobar">><<= ["fee", "fie", "foe", "fum"].random()>><</do>>
''Bar:'' <<do tag "bar foobar">><<= ["alfa", "bravo", "charlie", "delta"].random()>><</do>>
<<link "Update foo">>
<<redo "foo">>
<</link>>
<<link "Update bar">>
<<redo "bar">>
<</link>>
<<link "Update foo & bar (1)">>
<<redo "foo bar">>
<</link>>
<<link "Update foo & bar (2)">>
<<redo "foobar">>
<</link>>
(You'd have to look at the code to see why those two are different.)
<<set $celestialBody to ["Mercury", "Venus", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune", "Pluto", "Moon"].random()>>
Out of all of the celestial bodies in our solar system, this computer program has decided that you're going to be sent to <b><u><<print $celestialBody>></u></b>. And I'm not sure if it will always remember that choice, but we'll have to see...
However, you still are feeling <<print $feeling>>.
If you picked up anything you'd see it down here:
!!!Inventory
- - - - - - - -
<ul>
<<for _item range $inventory>>
<li><<print _item>></li>
<</for>>
</ul>
Return to [[Start]]
Return to [[links]]
<div class="action-box">
Now we're going to play with $name as if they're an object.
<!-- Button to Explore with the Player's Name -->
<<button "We see <<print $name>>">>
<<script>>
const events = ["pick up a rock and put it back down", "keep walking", "stop for a sec", "look around to see if anyone noticed", "walk back"];
State.variables.eventMessage = events[Math.floor(Math.random() * events.length)];
<</script>>
<!-- Append the new message to #event-message -->
<<append "#event-message">>
<<print $eventMessage>>
<</append>>
<!-- Replace initial message so it disappears after the first click -->
<<replace "#initial-message">>
<!-- This will be empty, effectively hiding the initial prompt -->
<</replace>>
<!-- Update the latest action summary with a single line -->
<<replace "#latest-action">>
Or you can have a single line to know that you told <<print $name>> to <<print $eventMessage>>.
<</replace>>
<</button>>
<!-- Initial message area -->
<div id="initial-message">
What will <<print $name>> do?
</div>
<!-- Display area for all actions -->
<div id="event-message">
<!-- Initial placeholder for the event messages -->
</div>
<!-- Display area for the latest action summary -->
<div id="latest-action">
Or you can have a single line to know that you told <<print $name>> to [most recent action].
</div>
</div><<set $twineVisits to 0>>
<<set $linuxVisits to 0>>
<<set $bsdVisits to 0>>
<<set $inventory to []>>
<<set $timeOfDay to "Day">>
//testing//
''testing''
==test==
test
test
~~testing subscript~~
test
test
*test
**test
***test
****test
||test||
test
!1. test
!!2. test
!!!3. test
\[[
\]]