-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
117 lines (99 loc) · 7.66 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>Conway's Game of Life</title>
<!-- Begin Google analytics code -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-45884903-1', 'conwaygame.tk');
ga('send', 'pageview');
</script>
<!-- End Google Analytics Code -->
<!-- begin olark code -->
<script data-cfasync="false" type='text/javascript'>/*<![CDATA[*/window.olark||(function(c){var f=window,d=document,l=f.location.protocol=="https:"?"https:":"http:",z=c.name,r="load";var nt=function(){
f[z]=function(){
(a.s=a.s||[]).push(arguments)};var a=f[z]._={
},q=c.methods.length;while(q--){(function(n){f[z][n]=function(){
f[z]("call",n,arguments)}})(c.methods[q])}a.l=c.loader;a.i=nt;a.p={
0:+new Date};a.P=function(u){
a.p[u]=new Date-a.p[0]};function s(){
a.P(r);f[z](r)}f.addEventListener?f.addEventListener(r,s,false):f.attachEvent("on"+r,s);var ld=function(){function p(hd){
hd="head";return["<",hd,"></",hd,"><",i,' onl' + 'oad="var d=',g,";d.getElementsByTagName('head')[0].",j,"(d.",h,"('script')).",k,"='",l,"//",a.l,"'",'"',"></",i,">"].join("")}var i="body",m=d[i];if(!m){
return setTimeout(ld,100)}a.P(1);var j="appendChild",h="createElement",k="src",n=d[h]("div"),v=n[j](d[h](z)),b=d[h]("iframe"),g="document",e="domain",o;n.style.display="none";m.insertBefore(n,m.firstChild).id=z;b.frameBorder="0";b.id=z+"-loader";if(/MSIE[ ]+6/.test(navigator.userAgent)){
b.src="javascript:false"}b.allowTransparency="true";v[j](b);try{
b.contentWindow[g].open()}catch(w){
c[e]=d[e];o="javascript:var d="+g+".open();d.domain='"+d.domain+"';";b[k]=o+"void(0);"}try{
var t=b.contentWindow[g];t.write(p());t.close()}catch(x){
b[k]=o+'d.write("'+p().replace(/"/g,String.fromCharCode(92)+'"')+'");d.close();'}a.P(2)};ld()};nt()})({
loader: "static.olark.com/jsclient/loader0.js",name:"olark",methods:["configure","extend","declare","identify"]});
/* custom configuration goes here (www.olark.com/documentation) */
olark.identify('2271-458-10-8073');/*]]>*/</script><noscript><a href="https://www.olark.com/site/2271-458-10-8073/contact" title="Contact us" target="_blank">Questions? Feedback?</a> powered by <a href="http://www.olark.com?welcome" title="Olark live chat software">Olark live chat software</a></noscript>
<!-- end olark code -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="shortcut icon" href="icon.ico">
<!-- Now we'll load JQuery. There are a couple of different ways. -->
<!--<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>-->
<!--<script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>-->
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
</head>
<body>
<canvas id="myCanvas" oncontextmenu="return false;"></canvas>
<div class="allTheButtons">
<button title="Makes all the cells dead" type="button" class="actionButton" onclick="clearGrid()" style="right: 100px;">Clear</button>
<!--<button title="Displays help" type="button" style="right:400px;" class="actionButton" onclick="help()">Help</button>-->
<button title="Pauses the animation" id="pauseButton" type="button" class="actionButton toggle" onclick="pause()">Pause</button>
<div class="controlGroup" style="right: 375px;">
<h1 id="speedOptionsMinButton" title="These options allow you to change the speed of Game of Life. Click here to minimize these options" type="button" class="minButton">Speed Options<img src="up-down-arrow.png" height="13" width="13" style="border-top-width:50;"></h1>
<div id="speedOptionsDiv" class="buttonGroup" style="bottom:0px;">
<div id="slow" title="Makes the animation run slowly by adding a 1.0 second delay between each generation"
type="button" class="radio" onclick="setDelay(1000)">Slow</div>
<div id="medium" title="Makes the animation run slightly slower by adding a 0.1 second delay between each generation"
type="button" class="radio" onclick="setDelay(100)">Medium</div>
<div id="fast" title ="Makes the animation run as fast as possible"
type="button"class="radio" onclick="setDelay(0)">Fast</div>
</div>
</div>
<div class="controlGroup" style="right: 250px;">
<h1 id="gridSizeOptionsMinButton" title="These options allow you to change the number of cells on the screen. Click here to minimize these options." class="minButton">Grid Size Options<img src="up-down-arrow.png" height="13" width="13" style="border-top-width:50;"></h1>
<div id="gridSizeOptionsDiv" class="buttonGroup" >
<div title="Makes the grid contain more cells" type="button" class="actionButton" onclick="moreCells()">More Cells</div>
<div title="Makes the grid contain fewer cells" type="button" class="actionButton" onclick="fewerCells()">Fewer Cells</div>
</div>
</div>
<div class="controlGroup" style="right: 500px;">
<h1 id="brushOptionsMinButton" title="These optinos allow you to change the size and shape of the brush. Click here to minimize these options." class="minButton">Brush Options<img src="up-down-arrow.png" height="13" width="13" style="border-top-width:50;"></h1>
<div id="brushOptionsDiv" class="buttonGroup">
<div id="1x1" title="1x1 brush" type="button" class="actionButton radio">1x1</div>
<!-- <div id="2x2" title="2x2 brush" type="button" class="actionButton radio">2x2</div> -->
<div id="3x3" title="3x3 brush" type="button" class="actionButton radio">3x3</div>
<div id="5x5" title="5x5 brush" type="button" class="actionButton radio">5x5</div>
<div id="9x9" title="9x9 brush" type="button" class="actionButton radio">9x9</div>
</div>
</div>
<div class="controlGroup" style="right: 625px;">
<h1 id="neighborhoodOptionsMinButton" title="These options allow your to change the definition of a cells neighbors" class="minButton">Neighborhood<img src="up-down-arrow.png" height="13" width="13" style="border-top-width:50;"></h1>
<div id="neighborhoodOptionsDiv">
<table id="neighborhoodOptionsTable" class="ruleTable"><tbody></tbody></table>
</div>
</div>
</div>
<!-- Here are the help elements -->
<button id="tutorialCreateCells" type="button" style="top:20px; right:20px" class="helpBox">Left click and drag anywhere to create new cells</button>
<button id="tutorialChangeRules" type="button" style="top:70px; left:100px" class="helpBox"><-- Click on these buttons to change the rules</button>
<button id="tutorialLeftCol" type="button" style="top:120px; left:100px" class="helpBox">The left column determines if dead cells will come to life</button>
<button id="tutorialRightCol" type="button" style="top:160px; left:100px" class="helpBox">The right column determines if live cells will stay alive</button>
<button id="tutorialRow" type="button" style="top:200px; left:100px" class="helpBox">The row is determined by how many neighbors a cell has</button>
<button id="tutorialMouseOver" type="button" style="top:240px; left:100px" class="helpBox">Mouseover any of these numbers to learn what it does</button>
<div data-role="controlgroup" class="rules" style="height:100%;">
<!--<h1 id="ruleTableMinButton" class="minButton" style="width:70px; height:30px;">Rule Table</h1>-->
<div id="ruleTableDiv" style="height:100%">
<table id="ruleTable" class="ruleTable" style="height:100%"></table>
</div>
<div>
<!-- Now we'll load the game -->
<script type="text/javascript" src="GameOfLife.js"></script>
</body>
</html>