31 lines
18 KiB
HTML
31 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-GB">
|
|
<head>
|
|
<title>Garden of Eden</title>
|
|
<link rel="stylesheet" type="text/css" href="style.css" />
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<script src="script.js"></script>
|
|
</head>
|
|
<body>
|
|
<h1>Garden of Eden</h1>
|
|
<button onclick="tick()">Tick</button>
|
|
<button onclick="set_tile(0)">Plot</button>
|
|
<button onclick="set_tile(1)">Plant</button>
|
|
<button onclick="set_tile(2)">Anti-Plant</button>
|
|
<button onclick="set_tile(3)">Barrier</button>
|
|
<button onclick="toggle_clock(this)">Clock is OFF</button>
|
|
<button onclick="kill_living()">Kill living cells</button>
|
|
<button onclick="clear_board()">Clear board</button>
|
|
<br/>
|
|
<br/>
|
|
|
|
<div class="matrix"><div class="cell" id="0" onclick="cell_click(this, 0)"></div><div class="cell" id="1" onclick="cell_click(this, 1)"></div><div class="cell" id="2" onclick="cell_click(this, 2)"></div><div class="cell" id="3" onclick="cell_click(this, 3)"></div><div class="cell" id="4" onclick="cell_click(this, 4)"></div><div class="cell" id="5" onclick="cell_click(this, 5)"></div><div class="cell" id="6" onclick="cell_click(this, 6)"></div><div class="cell" id="7" onclick="cell_click(this, 7)"></div><div class="cell" id="8" onclick="cell_click(this, 8)"></div><div class="cell" id="9" onclick="cell_click(this, 9)"></div><div class="cell" id="10" onclick="cell_click(this, 10)"></div><div class="cell" id="11" onclick="cell_click(this, 11)"></div><div class="cell" id="12" onclick="cell_click(this, 12)"></div><div class="cell" id="13" onclick="cell_click(this, 13)"></div><div class="cell" id="14" onclick="cell_click(this, 14)"></div><div class="cell" id="15" onclick="cell_click(this, 15)"></div><br/><div class="cell" id="16" onclick="cell_click(this, 16)"></div><div class="cell" id="17" onclick="cell_click(this, 17)"></div><div class="cell" id="18" onclick="cell_click(this, 18)"></div><div class="cell" id="19" onclick="cell_click(this, 19)"></div><div class="cell" id="20" onclick="cell_click(this, 20)"></div><div class="cell" id="21" onclick="cell_click(this, 21)"></div><div class="cell" id="22" onclick="cell_click(this, 22)"></div><div class="cell" id="23" onclick="cell_click(this, 23)"></div><div class="cell" id="24" onclick="cell_click(this, 24)"></div><div class="cell" id="25" onclick="cell_click(this, 25)"></div><div class="cell" id="26" onclick="cell_click(this, 26)"></div><div class="cell" id="27" onclick="cell_click(this, 27)"></div><div class="cell" id="28" onclick="cell_click(this, 28)"></div><div class="cell" id="29" onclick="cell_click(this, 29)"></div><div class="cell" id="30" onclick="cell_click(this, 30)"></div><div class="cell" id="31" onclick="cell_click(this, 31)"></div><br/><div class="cell" id="32" onclick="cell_click(this, 32)"></div><div class="cell" id="33" onclick="cell_click(this, 33)"></div><div class="cell" id="34" onclick="cell_click(this, 34)"></div><div class="cell" id="35" onclick="cell_click(this, 35)"></div><div class="cell" id="36" onclick="cell_click(this, 36)"></div><div class="cell" id="37" onclick="cell_click(this, 37)"></div><div class="cell" id="38" onclick="cell_click(this, 38)"></div><div class="cell" id="39" onclick="cell_click(this, 39)"></div><div class="cell" id="40" onclick="cell_click(this, 40)"></div><div class="cell" id="41" onclick="cell_click(this, 41)"></div><div class="cell" id="42" onclick="cell_click(this, 42)"></div><div class="cell" id="43" onclick="cell_click(this, 43)"></div><div class="cell" id="44" onclick="cell_click(this, 44)"></div><div class="cell" id="45" onclick="cell_click(this, 45)"></div><div class="cell" id="46" onclick="cell_click(this, 46)"></div><div class="cell" id="47" onclick="cell_click(this, 47)"></div><br/><div class="cell" id="48" onclick="cell_click(this, 48)"></div><div class="cell" id="49" onclick="cell_click(this, 49)"></div><div class="cell" id="50" onclick="cell_click(this, 50)"></div><div class="cell" id="51" onclick="cell_click(this, 51)"></div><div class="cell" id="52" onclick="cell_click(this, 52)"></div><div class="cell" id="53" onclick="cell_click(this, 53)"></div><div class="cell" id="54" onclick="cell_click(this, 54)"></div><div class="cell" id="55" onclick="cell_click(this, 55)"></div><div class="cell" id="56" onclick="cell_click(this, 56)"></div><div class="cell" id="57" onclick="cell_click(this, 57)"></div><div class="cell" id="58" onclick="cell_click(this, 58)"></div><div class="cell" id="59" onclick="cell_click(this, 59)"></div><div class="cell" id="60" onclick="cell_click(this, 60)"></div><div class="cell" id="61" onclick="cell_click(this, 61)"></div><div class="cell" id="62" onclick="cell_click(this, 62)"></div><div class="cell" id="63" onclick="cell_click(this, 63)"></div><br/><div class="cell" id="64" onclick="cell_click(this, 64)"></div><div class="cell" id="65" onclick="cell_click(this, 65)"></div><div class="cell" id="66" onclick="cell_click(this, 66)"></div><div class="cell" id="67" onclick="cell_click(this, 67)"></div><div class="cell" id="68" onclick="cell_click(this, 68)"></div><div class="cell" id="69" onclick="cell_click(this, 69)"></div><div class="cell" id="70" onclick="cell_click(this, 70)"></div><div class="cell" id="71" onclick="cell_click(this, 71)"></div><div class="cell" id="72" onclick="cell_click(this, 72)"></div><div class="cell" id="73" onclick="cell_click(this, 73)"></div><div class="cell" id="74" onclick="cell_click(this, 74)"></div><div class="cell" id="75" onclick="cell_click(this, 75)"></div><div class="cell" id="76" onclick="cell_click(this, 76)"></div><div class="cell" id="77" onclick="cell_click(this, 77)"></div><div class="cell" id="78" onclick="cell_click(this, 78)"></div><div class="cell" id="79" onclick="cell_click(this, 79)"></div><br/><div class="cell" id="80" onclick="cell_click(this, 80)"></div><div class="cell" id="81" onclick="cell_click(this, 81)"></div><div class="cell" id="82" onclick="cell_click(this, 82)"></div><div class="cell" id="83" onclick="cell_click(this, 83)"></div><div class="cell" id="84" onclick="cell_click(this, 84)"></div><div class="cell" id="85" onclick="cell_click(this, 85)"></div><div class="cell" id="86" onclick="cell_click(this, 86)"></div><div class="cell" id="87" onclick="cell_click(this, 87)"></div><div class="cell" id="88" onclick="cell_click(this, 88)"></div><div class="cell" id="89" onclick="cell_click(this, 89)"></div><div class="cell" id="90" onclick="cell_click(this, 90)"></div><div class="cell" id="91" onclick="cell_click(this, 91)"></div><div class="cell" id="92" onclick="cell_click(this, 92)"></div><div class="cell" id="93" onclick="cell_click(this, 93)"></div><div class="cell" id="94" onclick="cell_click(this, 94)"></div><div class="cell" id="95" onclick="cell_click(this, 95)"></div><br/><div class="cell" id="96" onclick="cell_click(this, 96)"></div><div class="cell" id="97" onclick="cell_click(this, 97)"></div><div class="cell" id="98" onclick="cell_click(this, 98)"></div><div class="cell" id="99" onclick="cell_click(this, 99)"></div><div class="cell" id="100" onclick="cell_click(this, 100)"></div><div class="cell" id="101" onclick="cell_click(this, 101)"></div><div class="cell" id="102" onclick="cell_click(this, 102)"></div><div class="cell" id="103" onclick="cell_click(this, 103)"></div><div class="cell" id="104" onclick="cell_click(this, 104)"></div><div class="cell" id="105" onclick="cell_click(this, 105)"></div><div class="cell" id="106" onclick="cell_click(this, 106)"></div><div class="cell" id="107" onclick="cell_click(this, 107)"></div><div class="cell" id="108" onclick="cell_click(this, 108)"></div><div class="cell" id="109" onclick="cell_click(this, 109)"></div><div class="cell" id="110" onclick="cell_click(this, 110)"></div><div class="cell" id="111" onclick="cell_click(this, 111)"></div><br/><div class="cell" id="112" onclick="cell_click(this, 112)"></div><div class="cell" id="113" onclick="cell_click(this, 113)"></div><div class="cell" id="114" onclick="cell_click(this, 114)"></div><div class="cell" id="115" onclick="cell_click(this, 115)"></div><div class="cell" id="116" onclick="cell_click(this, 116)"></div><div class="cell" id="117" onclick="cell_click(this, 117)"></div><div class="cell" id="118" onclick="cell_click(this, 118)"></div><div class="cell" id="119" onclick="cell_click(this, 119)"></div><div class="cell" id="120" onclick="cell_click(this, 120)"></div><div class="cell" id="121" onclick="cell_click(this, 121)"></div><div class="cell" id="122" onclick="cell_click(this, 122)"></div><div class="cell" id="123" onclick="cell_click(this, 123)"></div><div class="cell" id="124" onclick="cell_click(this, 124)"></div><div class="cell" id="125" onclick="cell_click(this, 125)"></div><div class="cell" id="126" onclick="cell_click(this, 126)"></div><div class="cell" id="127" onclick="cell_click(this, 127)"></div><br/><div class="cell" id="128" onclick="cell_click(this, 128)"></div><div class="cell" id="129" onclick="cell_click(this, 129)"></div><div class="cell" id="130" onclick="cell_click(this, 130)"></div><div class="cell" id="131" onclick="cell_click(this, 131)"></div><div class="cell" id="132" onclick="cell_click(this, 132)"></div><div class="cell" id="133" onclick="cell_click(this, 133)"></div><div class="cell" id="134" onclick="cell_click(this, 134)"></div><div class="cell" id="135" onclick="cell_click(this, 135)"></div><div class="cell" id="136" onclick="cell_click(this, 136)"></div><div class="cell" id="137" onclick="cell_click(this, 137)"></div><div class="cell" id="138" onclick="cell_click(this, 138)"></div><div class="cell" id="139" onclick="cell_click(this, 139)"></div><div class="cell" id="140" onclick="cell_click(this, 140)"></div><div class="cell" id="141" onclick="cell_click(this, 141)"></div><div class="cell" id="142" onclick="cell_click(this, 142)"></div><div class="cell" id="143" onclick="cell_click(this, 143)"></div><br/><div class="cell" id="144" onclick="cell_click(this, 144)"></div><div class="cell" id="145" onclick="cell_click(this, 145)"></div><div class="cell" id="146" onclick="cell_click(this, 146)"></div><div class="cell" id="147" onclick="cell_click(this, 147)"></div><div class="cell" id="148" onclick="cell_click(this, 148)"></div><div class="cell" id="149" onclick="cell_click(this, 149)"></div><div class="cell" id="150" onclick="cell_click(this, 150)"></div><div class="cell" id="151" onclick="cell_click(this, 151)"></div><div class="cell" id="152" onclick="cell_click(this, 152)"></div><div class="cell" id="153" onclick="cell_click(this, 153)"></div><div class="cell" id="154" onclick="cell_click(this, 154)"></div><div class="cell" id="155" onclick="cell_click(this, 155)"></div><div class="cell" id="156" onclick="cell_click(this, 156)"></div><div class="cell" id="157" onclick="cell_click(this, 157)"></div><div class="cell" id="158" onclick="cell_click(this, 158)"></div><div class="cell" id="159" onclick="cell_click(this, 159)"></div><br/><div class="cell" id="160" onclick="cell_click(this, 160)"></div><div class="cell" id="161" onclick="cell_click(this, 161)"></div><div class="cell" id="162" onclick="cell_click(this, 162)"></div><div class="cell" id="163" onclick="cell_click(this, 163)"></div><div class="cell" id="164" onclick="cell_click(this, 164)"></div><div class="cell" id="165" onclick="cell_click(this, 165)"></div><div class="cell" id="166" onclick="cell_click(this, 166)"></div><div class="cell" id="167" onclick="cell_click(this, 167)"></div><div class="cell" id="168" onclick="cell_click(this, 168)"></div><div class="cell" id="169" onclick="cell_click(this, 169)"></div><div class="cell" id="170" onclick="cell_click(this, 170)"></div><div class="cell" id="171" onclick="cell_click(this, 171)"></div><div class="cell" id="172" onclick="cell_click(this, 172)"></div><div class="cell" id="173" onclick="cell_click(this, 173)"></div><div class="cell" id="174" onclick="cell_click(this, 174)"></div><div class="cell" id="175" onclick="cell_click(this, 175)"></div><br/><div class="cell" id="176" onclick="cell_click(this, 176)"></div><div class="cell" id="177" onclick="cell_click(this, 177)"></div><div class="cell" id="178" onclick="cell_click(this, 178)"></div><div class="cell" id="179" onclick="cell_click(this, 179)"></div><div class="cell" id="180" onclick="cell_click(this, 180)"></div><div class="cell" id="181" onclick="cell_click(this, 181)"></div><div class="cell" id="182" onclick="cell_click(this, 182)"></div><div class="cell" id="183" onclick="cell_click(this, 183)"></div><div class="cell" id="184" onclick="cell_click(this, 184)"></div><div class="cell" id="185" onclick="cell_click(this, 185)"></div><div class="cell" id="186" onclick="cell_click(this, 186)"></div><div class="cell" id="187" onclick="cell_click(this, 187)"></div><div class="cell" id="188" onclick="cell_click(this, 188)"></div><div class="cell" id="189" onclick="cell_click(this, 189)"></div><div class="cell" id="190" onclick="cell_click(this, 190)"></div><div class="cell" id="191" onclick="cell_click(this, 191)"></div><br/><div class="cell" id="192" onclick="cell_click(this, 192)"></div><div class="cell" id="193" onclick="cell_click(this, 193)"></div><div class="cell" id="194" onclick="cell_click(this, 194)"></div><div class="cell" id="195" onclick="cell_click(this, 195)"></div><div class="cell" id="196" onclick="cell_click(this, 196)"></div><div class="cell" id="197" onclick="cell_click(this, 197)"></div><div class="cell" id="198" onclick="cell_click(this, 198)"></div><div class="cell" id="199" onclick="cell_click(this, 199)"></div><div class="cell" id="200" onclick="cell_click(this, 200)"></div><div class="cell" id="201" onclick="cell_click(this, 201)"></div><div class="cell" id="202" onclick="cell_click(this, 202)"></div><div class="cell" id="203" onclick="cell_click(this, 203)"></div><div class="cell" id="204" onclick="cell_click(this, 204)"></div><div class="cell" id="205" onclick="cell_click(this, 205)"></div><div class="cell" id="206" onclick="cell_click(this, 206)"></div><div class="cell" id="207" onclick="cell_click(this, 207)"></div><br/><div class="cell" id="208" onclick="cell_click(this, 208)"></div><div class="cell" id="209" onclick="cell_click(this, 209)"></div><div class="cell" id="210" onclick="cell_click(this, 210)"></div><div class="cell" id="211" onclick="cell_click(this, 211)"></div><div class="cell" id="212" onclick="cell_click(this, 212)"></div><div class="cell" id="213" onclick="cell_click(this, 213)"></div><div class="cell" id="214" onclick="cell_click(this, 214)"></div><div class="cell" id="215" onclick="cell_click(this, 215)"></div><div class="cell" id="216" onclick="cell_click(this, 216)"></div><div class="cell" id="217" onclick="cell_click(this, 217)"></div><div class="cell" id="218" onclick="cell_click(this, 218)"></div><div class="cell" id="219" onclick="cell_click(this, 219)"></div><div class="cell" id="220" onclick="cell_click(this, 220)"></div><div class="cell" id="221" onclick="cell_click(this, 221)"></div><div class="cell" id="222" onclick="cell_click(this, 222)"></div><div class="cell" id="223" onclick="cell_click(this, 223)"></div><br/><div class="cell" id="224" onclick="cell_click(this, 224)"></div><div class="cell" id="225" onclick="cell_click(this, 225)"></div><div class="cell" id="226" onclick="cell_click(this, 226)"></div><div class="cell" id="227" onclick="cell_click(this, 227)"></div><div class="cell" id="228" onclick="cell_click(this, 228)"></div><div class="cell" id="229" onclick="cell_click(this, 229)"></div><div class="cell" id="230" onclick="cell_click(this, 230)"></div><div class="cell" id="231" onclick="cell_click(this, 231)"></div><div class="cell" id="232" onclick="cell_click(this, 232)"></div><div class="cell" id="233" onclick="cell_click(this, 233)"></div><div class="cell" id="234" onclick="cell_click(this, 234)"></div><div class="cell" id="235" onclick="cell_click(this, 235)"></div><div class="cell" id="236" onclick="cell_click(this, 236)"></div><div class="cell" id="237" onclick="cell_click(this, 237)"></div><div class="cell" id="238" onclick="cell_click(this, 238)"></div><div class="cell" id="239" onclick="cell_click(this, 239)"></div><br/><div class="cell" id="240" onclick="cell_click(this, 240)"></div><div class="cell" id="241" onclick="cell_click(this, 241)"></div><div class="cell" id="242" onclick="cell_click(this, 242)"></div><div class="cell" id="243" onclick="cell_click(this, 243)"></div><div class="cell" id="244" onclick="cell_click(this, 244)"></div><div class="cell" id="245" onclick="cell_click(this, 245)"></div><div class="cell" id="246" onclick="cell_click(this, 246)"></div><div class="cell" id="247" onclick="cell_click(this, 247)"></div><div class="cell" id="248" onclick="cell_click(this, 248)"></div><div class="cell" id="249" onclick="cell_click(this, 249)"></div><div class="cell" id="250" onclick="cell_click(this, 250)"></div><div class="cell" id="251" onclick="cell_click(this, 251)"></div><div class="cell" id="252" onclick="cell_click(this, 252)"></div><div class="cell" id="253" onclick="cell_click(this, 253)"></div><div class="cell" id="254" onclick="cell_click(this, 254)"></div><div class="cell" id="255" onclick="cell_click(this, 255)"></div><br/></div>
|
|
<h2>How to play</h2>
|
|
<p>Garden of Eden is a zero-player cellular god game where you watch two rival living species fight for control of the sixteen by sixteen board.</p>
|
|
<p>The Tick button allows you to manually step through a tick and allow you to watch the game at your pace, the Clock is OFF/ON button allows you to toggle the clock which will run a tick every 50 milliseconds automatically. When the clock is on, you are unable to change the state of the board manually.</p>
|
|
<p>The Plot, Plant, Anti-Plant, and Barrier buttons allow you to select which tile you place down when you click on cells. Click on the brown cells on the board to place the tile that you set. To setup a game board, place down barriers how you please or none at all, place down at least one plant and one anti-plant, and watch them fight for control by manually Ticking through or running the clock</p>
|
|
<p>If either the plant or anti-plant species has prevailed and you want to run again, turn the clock off and click the Kill Living button which will clear the board of plants and anti-plants, turning them back into plots, leaving your barriers in place. Place an anti-plant and plant and begin again.</p>
|
|
|
|
</body>
|
|
</html>
|