-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
162 lines (162 loc) · 8.47 KB
/
index.html
File metadata and controls
162 lines (162 loc) · 8.47 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ant Machine</title>
<link rel="stylesheet" href="style.css">
<script src="game.js"></script>
</head>
<body>
<header>
<h1>Ant Machine</h1>
<p>A game about simulations, computers, and eusocial insects.</p>
</header>
<div id="save-menu">
<h2>Game:</h2>
<button type="button" id="save-game-button">Save</button>
<button type="button" id="load-game-button">Load</button>
<button type="button" id="reset-game-button">Reset</button>
</div>
<div id="center-box" class="boxdiv">
<div id="tab-bar">
<button type="button" id="tab-button-build" class="tab-button tab-active" data-tabname="build">Build</button>
<button type="button" id="tab-button-machines" class="tab-button" data-tabname="machines">Machines</button>
</div>
<div id="machines-view" class="tab-content" style="display:none;">
<div id="machines-panel" class="boxdiv">
<div id="machine-list-area">
<h2 id="machine-list-heading">
Saved Machines
</h2>
<div id="machine-list"></div>
</div>
<div id="machine-details-area" hidden>
<h2 id="machine-details-heading"></h2>
<!-- <p>Description:</p> -->
<textarea id="machine-details-description" maxlength="100" placeholder="description..."></textarea>
<button id="machine-details-edit-button" type="button">Edit</button>
<button id="machine-details-delete-button" type="button">Delete</button>
</div>
</div>
</div>
<div id="build-view" class="tab-content">
<div id="tool-panel" class="boxdiv">
<h2 id="tool-heading">
Tools
</h2>
<div id="tool-list">
<button type="button" id="tool-button-draw" class="tool-button tool-active" data-toolid="0" title="Draw Path">
<img src="assets/tool_button_draw.svg" alt="draw tool" draggable="false"></img>
</button>
<button type="button" id="tool-button-ant" class="tool-button" data-toolid="1" title="Place Ants">
<img src="assets/ant.svg" alt="ant tool" draggable="false"></img>
</button>
<button type="button" id="tool-button-tunnel-vertical" class="tool-button" data-toolid="2" title="Vertical Tunnel">
<img src="assets/tool_button_tunnel.svg" alt="vertical tunnel tool" draggable="false"></img>
</button>
<button type="button" id="tool-button-tunnel-horizontal" class="tool-button" data-toolid="3" title="Horizontal Tunnel">
<img src="assets/tool_button_tunnel.svg" alt="horizontal tunnel tool" draggable="false"></img>
</button>
</div>
</div>
<div id="view-panel" class="boxdiv">
<div id="control-bar">
<div id="control-bar-file">
<h3>
Files:
</h3>
<label for="fname">Name:</label>
<input type="text" id="control-input-fname" class="control-input" name="fname" placeholder="mymachine" style="width:96px;" autocomplete="off">
<br>
<button type="button" id="control-button-save" class="control-button">
Save
</button>
<button type="button" id="control-button-load" class="control-button">
Load
</button>
<button type="button" id="control-button-clear" class="control-button">
Clear
</button>
</div>
<span class="separator"></span>
<div id="control-bar-board">
<h3>
Board:
</h3>
<label for="bheight" style="width:50px;">Height:</label>
<input type="number" id="control-input-bheight" class="control-input" style="width:36px" name="bheight" min="2" max="20"><br>
<label for="bwidth" style="width:50px;">Width:</label>
<input type="number" id="control-input-bwidth" class="control-input" style="width:36px" name="bwidth" min="2" max="20">
</div>
<span class="separator"></span>
<div id="control-bar-simulate">
<h3>Simulation:</h3>
<div style="position:relative;left:188px;top:4px;">
<label style="position:absolute;left:-64px;">Inputs:</label>
<img src="assets/sim_input_icon.svg" draggable="false" width="24" style="position:absolute;left:-1.5px;top:-2.5px;"></img>
<input type="checkbox" id="control-input-simInput0" title="right input" style="position:absolute;left:20px;">
<input type="checkbox" id="control-input-simInput1" title="top input" style="position:absolute;top:-20px;">
<input type="checkbox" id="control-input-simInput2" title="left input" style="position:absolute;left:-20px;">
<input type="checkbox" id="control-input-simInput3" title="bottom input" style="position:absolute;top:20px;">
</div>
<button type="button" id="control-button-simulation-start" class="control-button">
Start
</button>
<button type="button" id="control-button-simulation-end" class="control-button">
End
</button><br>
<label for="simInterval">Interval (in ms):</label>
<input type="number" id="control-input-simInterval" name="simInterval" min="10" max="4000" style="width:60px">
</div>
</div>
<div id="circuit-area">
<table id="circuit-board">
</table>
</div>
</div>
</div>
</div>
<div id="scroll-info-indicator">
Scroll for Info 🡇
</div>
<footer>
<h2>
Info:
</h2>
<p>
Ant Machine is an experimental video game where you can build your own complex logic systems with nothing more than lines and ants. Part of the experience is mucking about and piecing together how things work, but I will lay out the main rules that govern a machine here:
</p>
<h3>Controls:</h3>
<ul>
<li>Left-click + drag to draw lines.</li>
<li>Left-click with ant tool to place/rotate ants. (Ants can only be placed on paths.)</li>
<li>Right-click or shift-click with any tool to erase instead</li>
</ul>
<h3>Rules:</h3>
<ol>
<li>A machine is simulated in steps.</li>
<li>Each step, every ant in the system moves forward one cell, (or perishes if it has nowhere to go).</li>
<li>If there are multiple paths an ant can take, it will multiply and travel down all of them.</li>
<li>If two or more ants enter the same cell at once, they collide and die. (This also applies if two ants pass each other going opposite directions on the same path.)</li>
</ol>
<p>
Apart from these rules, machines can also be nested inside one another. Ants entering a nested machine from outside will appear at the tunnels on that side of the machine's interior, and ants exiting from any tunnels inside the machine will likewise appear outside at the respective face, (although multiple ants exiting the same side of a machine at once will cause a collision).
</p>
<p>
With this simple set of rules, although I don't have a formal proof, it is possible to build a machine to compute anything that a modern computer can. In other words, this system is "Turing Complete". I doubt anyone will feel inclined to waste so much time as to actually build a machine like that, but one cannot deny that it is an interesting fact, nonetheless. That is, at least, granted that one is a nerdy Computer Science student like me who grew up on other Turing Complete games like Minecraft and Baba is You.
</p>
<p>
This project was actually inspired by the redstone mechanics in Minecraft. I am routinely impressed by what the game's more technically-minded community has been able to construct using just a few simple components, ranging from the early days of piston doors and flying machines to the recently achieved holy grail of redstone engineering: <a href="https://www.youtube.com/watch?v=-BP7DhHTU-I">Minecraft in Minecraft</a>.
</p>
<p>
What I love about redstone is that through Minecraft's popularity, it's become one of the most common ways that non-computery people are first introduced to very computery concepts like logic gates and latches. I wanted to try my hand at creating a game that would motivate players in a similar way to play around with these concepts and learn to think like a computer engineer.
</p>
<p>
The game, in its present state, is far from finished, being not much more than a technical demo. In the future, I hope to continue this project and add more game-like mechanics like currency, resources, markets and upgrades, and maybe a plot to motivate and guide players in their technological pursuits, as well as encourage them to optimize their designs as much as possible.
</p>
<p>
For now, try making a machine that only lets ants through in one direction, or an AND gate for a fun challenge!
</p>
</footer>
</body>
</html>