1<!DOCTYPE html>
2<html lang="en-US"> <!-- Set language of this page to USA English. -->
3
4<!-- ===================================================================
5|
6| NAME
7|
8| Life.html
9|
10| DESCRIPTION
11|
12| This is the game of life web page.
13| It is a hand-crafted HTML 5 W3C validated document.
14|
15| AUTHOR
16|
17| Sean Erik O'Connor
18|
19=================================================================== -->
20
21 <head>
22 <!-- This page uses Unicode characters. -->
23 <meta charset="utf-8">
24
25 <!-- Set viewport to actual device width. Any other settings makes the web page initially appear zoomed-in on mobile devices. -->
26 <meta name="viewport" content="width=device-width, initial-scale=1">
27
28 <!-- Titles appear in the web browser and the browser's bookmarks. -->
29 <title>Game of Life</title>
30
31 <!-- Search engines will show this description below the title. -->
32 <meta name="description" content="Game of Life implemented in Javascript and Windows --- free software.">
33
34 <meta name="author" content="Sean Erik O'Connor" >
35
36 <meta name="copyright" content="Copyright (C) 1999-2024 by Sean Erik O'Connor. All Rights Reserved.">
37
38 <!-- Point to the Javascript Game of Life -->
39 <script src="Scripts/gameOfLife.js"></script>
40
41 <!-- Cascading style sheet for this document. -->
42 <link rel="stylesheet" href="../../../StyleSheet.css" type="text/css" />
43
44 <!-- Favicons are 32x32 or 16x16, 8 or 24 bit PNG Images which show up left of the web page title in a browser. -->
45 <link rel="icon" type="image/png" href="../../../Images/favicon.png" >
46 </head>
47
48 <body>
49 <!-- This wraps the whole body in a CSS grid. -->
50 <div class="wrapper titlePage">
51
52 <!-- Title page at the top. -->
53 <header class="title">
54 <h1>GAME OF LIFE</h1>
55 <hr>
56 </header>
57
58 <!-- Horizontal navigation bar to all top level pages. -->
59 <header class="navigation">
60 <a href="../../../index.html">
61 <img src="../../../Images/home.png" alt="Home Page Button." width="32" height="32" >
62 <em>Home</em>
63 </a>
64
65 <a href="../../../Mathematics/mathematicalSoftware.html">
66 <img src="../../../Images/compactDisk.png" alt="Mathematical Software Button." width="32" height="32" >
67 <em>Mathematical Software</em>
68 </a>
69
70 <a href="../../../Art/Art.html">
71 <img src="../../../Images/sampleArtLowRes.png" alt="Art Button." width="32" height="32" >
72 <em>Fine Arts</em>
73 </a>
74
75 <a href="../../../WebPageDesign/webPageDesign.html">
76 <img src="../../../Images/home.png" alt="Web Design Button." width="32" height="32" >
77 <em>Web Page Design</em>
78 </a>
79
80 <a href="../../../Electronics/Electronics.html">
81 <img src="../../../Images/sparkCoil.png" alt="Hobby Electronics Button." width="32" height="32" >
82 <em>Hobby Electronics</em>
83 </a>
84
85 <a href="../../../ReadingList/readingList.html">
86 <img src="../../../Images/terraApollo17NASALowRes.png"
87 alt="Reading List Button."
88 width="32" height="32" />
89 <em>Reading list</em>
90 </a>
91 </header>
92
93 <!-- A decorative border at the left side of the page. -->
94 <aside class=border>
95 <img class="border"
96 src="../../../Images/sinXYPlot.png"
97 alt="Sin( x y ) Image Border." />
98 </aside>
99
100 <!-- The main content of this page. -->
101 <article class="content">
102 <section>
103 <h3>Game of Life in Javascript</h3>
104
105 <p>
106 This is an implementation of J. H. Conway's cellular automata
107 <a href="http://conwaylife.com/wiki/Main_Page">game of life</a>
108 in Javascript where the game board is a topologically a torus. See my
109 <a href="theory.html">design notes</a>
110 for a description of the game and how it is designed.
111 </p>
112
113 <!-- Game of Life canvas -->
114 <p>
115 <canvas id="GameOfLifeCanvas"
116 width="1000" height="1000"
117 style="background-color: rgb( 170, 235, 245 ) ;">
118 <em>Your browser does not support the canvas API so I can't show game of life!</em>
119 </canvas>
120 </p>
121
122 <!-- Game of Life form controls -->
123 <form id="GameOFLifePatternsForm">
124 <ul>
125 <li>
126 <!-- Buttons to start/stop, single step and reset the game.
127 Upon click, call the Javascript functions runStopGame(), singleStepGame() and clearGame().
128 -->
129 <fieldset>
130 <legend>Game Controls</legend>
131
132 <input type="button" onclick="gameOfLife.runStopGame()" value="Run/Stop" />
133 <input type="button" onclick="gameOfLife.singleStepGame()" value="Single Step" />
134 <input type="button" onclick="gameOfLife.clearGame()" value="Clear" />
135 </fieldset>
136 </li>
137
138 <li>
139 <!-- Check box buttons to select number of neighbors for survival and birth.
140 If the user toggles the button, call the Javascript function changeRules( flag )
141 where flag = true for survival or false for birth.
142 Default to the Conway rules.
143 -->
144 <fieldset>
145 <legend>Neighbors to survive</legend>
146
147 <label> 1 <input type="checkbox" name="GameOfLifeSurvivalRules" value="1" onchange="gameOfLife.changeRules( true )"> </label>
148 <label> 2 <input type="checkbox" name="GameOfLifeSurvivalRules" value="2" checked onchange="gameOfLife.changeRules( true )"> </label>
149 <label> 3 <input type="checkbox" name="GameOfLifeSurvivalRules" value="3" checked onchange="gameOfLife.changeRules( true )"> </label>
150 <label> 4 <input type="checkbox" name="GameOfLifeSurvivalRules" value="4" onchange="gameOfLife.changeRules( true )"> </label>
151 <label> 5 <input type="checkbox" name="GameOfLifeSurvivalRules" value="5" onchange="gameOfLife.changeRules( true )"> </label>
152 <label> 6 <input type="checkbox" name="GameOfLifeSurvivalRules" value="6" onchange="gameOfLife.changeRules( true )"> </label>
153 <label> 7 <input type="checkbox" name="GameOfLifeSurvivalRules" value="7" onchange="gameOfLife.changeRules( true )"> </label>
154 <label> 8 <input type="checkbox" name="GameOfLifeSurvivalRules" value="8" onchange="gameOfLife.changeRules( true )"> </label>
155 </fieldset>
156 </li>
157
158 <li>
159 <fieldset>
160 <legend>Neighbors for birth</legend>
161
162 <label> 1 <input type="checkbox" name="GameOfLifeBirthRules" value="1" onchange="gameOfLife.changeRules( false )"> </label>
163 <label> 2 <input type="checkbox" name="GameOfLifeBirthRules" value="2" onchange="gameOfLife.changeRules( false )"> </label>
164 <label> 3 <input type="checkbox" name="GameOfLifeBirthRules" value="3" checked onchange="gameOfLife.changeRules( false )"> </label>
165 <label> 4 <input type="checkbox" name="GameOfLifeBirthRules" value="4" onchange="gameOfLife.changeRules( false )"> </label>
166 <label> 5 <input type="checkbox" name="GameOfLifeBirthRules" value="5" onchange="gameOfLife.changeRules( false )"> </label>
167 <label> 6 <input type="checkbox" name="GameOfLifeBirthRules" value="6" onchange="gameOfLife.changeRules( false )"> </label>
168 <label> 7 <input type="checkbox" name="GameOfLifeBirthRules" value="7" onchange="gameOfLife.changeRules( false )"> </label>
169 <label> 8 <input type="checkbox" name="GameOfLifeBirthRules" value="8" onchange="gameOfLife.changeRules( false )"> </label>
170 </fieldset>
171 </li>
172
173 <li>
174 <!-- Game of Life File I/O -->
175 <fieldset>
176 <legend>File I/O</legend>
177
178 <!-- Tag the input form with unique id GameOfLifeLoadFile.
179 Get the element by its id in the Javascript function initializeGameOfLife().
180 Add an event listener to the element which responds to changes by calling a function make_fileSelectForReading().
181 The function argument is an event which is the list of files.
182 -->
183 <input type="file" id="GameOfLifeLoadFile" name="files[]" multiple />
184 </fieldset>
185 </li>
186
187 <li>
188 <!-- Game of Life clipboard controls -->
189 <fieldset>
190 <legend>Clipboard</legend>
191
192 <input type="button" onclick="gameOfLife.writeGameToClipboard()" value="Write" />
193 <input type="button" onclick="gameOfLife.readGameFromClipboard()" value="Read" />
194 </fieldset>
195 </li>
196
197 <li>
198 <!-- Radio buttons for loading sample life patterns.
199 Call the Javascript function loadSampleLifePattern().
200 -->
201 <fieldset>
202 <legend>Life Pattern</legend>
203
204 <!-- Tag the selection in the form with unique id LifePatterns.
205 Get the element by its id in the Javascript function initializeGameOfLife().
206 Add an event listener to the element which responds to changes by calling a function make_loadSampleLifePattern().
207 The function argument is an event which is the option selected.
208 -->
209 <select id="GameOfLifePatterns">
210 <option selected value="glidergun">Glider Gun</option>
211 <option value="replicator">Replicator</option>
212 <option value="crab">Crab</option>
213 <option value="shickengine">Schick Engine</option>
214 <option value="trafficcircle">Traffic Circle</option>
215 <option value="highlifeglidergun">High Life Glider Gun</option>
216 </select>
217 </fieldset>
218 </li>
219
220 <li>
221 <!-- Game of life status. Javascript accesses the span by its id and rewrites its contents. -->
222 <span style="color: navy; font-size: 0.8em;" id="GameOfLifeState"> --- Game State --- </span>
223 </li>
224 </ul>
225 </form>
226
227 <!-- Clipboard form for Game of Life files. -->
228 <form>
229 <ul>
230 <li>
231 Game of Life Clipboard
232 <fieldset>
233 <textarea id="GameOfLifeClipboard" rows="10">
234 ---Life file---
235 </textarea>
236 </fieldset>
237 </li>
238
239 <li>
240 <!-- Game of life cell state -->
241 <span style="color: navy; font-size: 0.6em ; clear: both;" id="GameOfLifeCellState"> --- Cell State --- </span>
242 </li>
243 </ul>
244 </form>
245
246 <!-- Output window for game of life.
247 We'll override the CSS font style to make the states small enough to fit
248 into the scroll box horizontally. -->
249 <div style="font-size: 0.8rem;" class="scrollBoxHuge"> <div class="scrollBoxContent" id="GameOfLifeDebug">
250 --- Life Counter States Go Here ---
251 </div> </div>
252
253 <!-- Initialize the Game of Life application after all HTML elements have been defined. -->
254 <script>
255 gameOfLife.init() ;
256 </script>
257 </section>
258
259 <section>
260 <h3>Download</h3>
261
262 <p>
263 Source code <em>Version 3.4</em> is distributed under the terms of the
264 <a href="http://www.gnu.org/licenses/">GNU General Public License</a>.
265 </p>
266
267 <ul class="download">
268 <li class="downloadName">gameOfLife.js</li>
269 <li class="downloadDescription">Game of Life implemented in <i>Javascript</i>.</li>
270 <li class="downloadView">
271 <a href="Scripts/gameOfLife.js.html">
272 <img src="../../../Images/eye.png" alt="Eye icon for source code viewing." width="30" height="30" >View</a>
273 </li>
274 <li class="download">
275 <a href="Scripts/gameOfLife.js" download="Scripts/gameOfLife.js">
276 <img src="../../../Images/compactDisk.png" alt="Compact disk icon for source code download." width="25" height="25" >Download</a>
277 </li>
278
279 <li class="downloadName">life.html</li>
280 <li class="downloadDescription">HTML code for this page which calls gameOfLife.js</li>
281 <li class="downloadView">
282 <a href="life.html.html">
283 <img src="../../../Images/eye.png" alt="Eye icon for source code viewing." width="30" height="30" >View</a>
284 </li>
285 </ul>
286 </section>
287
288 <section>
289 <h3>Software Design</h3>
290
291 <img class="centered" alt="thingumbob" src="Images/GameOfLifeSoftwareDesign02.jpg">
292 <img class="centered" alt="thingumbob" src="Images/GameOfLifeSoftwareDesign03.jpg">
293 <img class="centered" alt="thingumbob" src="Images/GameOfLifeSoftwareDesign04.jpg">
294 <img class="centered" alt="thingumbob" src="Images/GameOfLifeSoftwareDesign05.jpg">
295 <img class="centered" alt="thingumbob" src="Images/GameOfLifeSoftwareDesign06.jpg">
296 <img class="centered" alt="thingumbob" src="Images/GameOfLifeSoftwareDesign07.jpg">
297
298 </section>
299
300
301 <section>
302 <h3>Debugging</h3>
303
304 The web browsers have developer tools for debugging,
305
306 <figure>
307 <img src="Images/FirefoxWebDeveloperJavaScriptDebugger.jpg" alt="Safari Web Browser Developer Tools" >
308
309 <figcaption>
310 Safari Web Browser Developer Tools
311 </figcaption>
312 </figure>
313 </section>
314 </article>
315
316 <footer class="footnote">
317 <hr>
318
319 <!-- A copyright to preserve my legal rights. -->
320 <p class="footnote">
321 Copyright © 1986-2024 by Sean Erik O'Connor.
322 All Rights Reserved.
323
324 last updated 29 Sep 24.
325 </p>
326 </footer>
327 </div> <!-- wrapper -->
328 </body>
329</html>
