-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathcellspace.html
130 lines (109 loc) · 6.67 KB
/
cellspace.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
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>CellSpace (an EvoCell spaceshooter)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="expires" content="0">
<meta name="author" content="[email protected]">
<meta name="description" content="A spaceshooter called CellSpace based on the EvoCell cellular automaton engine">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" type="image/icon" href="favicon.ico" />
<xxxlink rel="icon" type="image.png" href="favicon.png" />
<!-- link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" -->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<!-- link type="text/css" rel="stylesheet" href="../res_evocell/css/jquery-ui-1.10.4.custom.css" / -->
<!-- link href="../res_evocell/css/font-awesome.css" rel="stylesheet" -->
<script data-main="src/CellSpace" src="src/libs/require.js"></script>
<!--
<script data-main="main-built" src="src/libs/require.js"></script>
-->
<script type="text/template" id="part-template">
<div class="storyElement" id="<%=id%>" style="cursor:pointer;border:0px solid black; position: fixed; top: 0px; left: 0px; z-index:1000; background:rgba(0,0,0,0); width:100%; height:100%; text-align:center;">
<h2><%= text %></h2>
<img src="<%= image %>" alt="<%= text %>"> </img>
<p>(click to continue...)</p>
</div>
</script>
<script type="text/template" id="death-template">
<div class="storyElement" id="<%=id%>" style="cursor:pointer;border:0px solid black; position: fixed; top: 0px; left: 0px; z-index:1000; background:rgba(0,0,0,0); width:100%; height:100%; text-align:center;">
<h2><%= text %></h2>
<img src="<%= image %>" alt="<%= text %>"> </img>
<p>(click to continue...)</p>
</div>
</script>
</head>
<body>
<div id="centeredContainer">
<div id="centeredMessage">
message text
</div>
</div>
<div id="toolContainer">
<div class="toolWindow activeWindow" id="AboutWindow">
<h3 class="toolMenuHeader">About</h3>
<div class="toolMenuContent">
CellSpace is a HTML5/JS/WebGL space shooter game built on <a href="http://en.wikipedia.org/wiki/Cellular_automaton">cellular automata</a>. All rule lookups and most of the collission detections are calculated on the GPU :)
<h4><a id="showIntroLink" href="#">Random Background Story</a><br /></h4>
Click the above link to explain what you are doing in this cellular world. Make sure you watch it at least twice because it changes all the time :)
<h4>Controls</h4>
<ul>
<li>mouse click to shoot</li>
<li><b>cursor keys</b> for navigation</li>
<li><b>'b'</b> to fire many shots at once</li>
<li><b>'space'</b> to reset the game</li>
<li><b>'ESC'</b> to clear the screen</li>
<li><b>'o'</b> and <b>'l'</b> to zoom </li>
<li><b>'m'</b> and <b>'n'</b> to rotate </li>
</ul>
This is is an early beta realease please direct bug reports or ideas to the: <br />
<a href="https://github.com/wizard23/evocell">EvoCell github page</a><br />
GPL 3.0 by Philipp Tiefenbacher / wizard23
<br />
<script id='fb3wlse'>(function(i){var f,s=document.getElementById(i);f=document.createElement('iframe');f.src='//api.flattr.com/button/view/?uid=wizard23&button=compact&url='+encodeURIComponent(document.URL);f.title='Flattr';f.height=20;f.width=110;f.style.borderWidth=0;s.parentNode.insertBefore(f,s);})('fb3wlse');
</script>
</div>
</div>
<div class="toolWindow" id="ToolWindow">
<h3 class="toolMenuHeader">Tools</h3>
<div class="toolMenuContent">
<a id="stepLink" class="buttons"><i class="fa fa-step-forward fa-2x"></i></a>
<a id="playPause" class="buttons"><i class="fa fa-pause fa-2x"></i></a>
<br>
<div class="fileUpload btn">
<span>Import Rule...</span>
<input id="importRule" type="file" class="upload" multiple />
</div>
<input class="btn" type="button" id="saveRule" value="export" />
<input class="btn" type="button" id="deleteRule" value="delete" />
<input class="btn" type="button" id="initializeDB" value="load initial rules" />
<input class="btn" type="button" id="saveGameState" value="save state" />
<input class="btn" type="button" id="loadGameState" value="load state" />
<select multiple="multiple" style="width: 100%;height: 9em;" data-bind="options: availableRules, selectedOptions: selectedRules"></select><br/>
<input class="btn" type="button" id="assignLayerRule" value="assign" />
<input class="btn" type="button" id="loadPattern" value="load Pattern" />
<input class="btn" type="button" id="savePattern" value="save Pattern" />
<select multiple="multiple" style="width: 100%;height: 9em;" data-bind="options: availableLayers, selectedOptions: selectedLayers"></select><br/>
<select multiple="multiple" style="width: 100%;height: 9em;" data-bind="options: availableStates, selectedOptions: selectedStates"></select><br/>
width: <input id="width" type="number" min="1" max="1000" data-bind="value: drawSizeX, valueUpdate: 'keyup'"><br/>
height: <input id="height" type="number" min="1" max="1000" data-bind="value: drawSizeY, valueUpdate: 'keyup'"><br/>
<label><input type="radio" value="circle" data-bind="checked: selectedDrawShape" />Circle</label>
<label><input type="radio" value="rectangle" data-bind="checked: selectedDrawShape" />Recangle</label><br/>
<label><input type="checkbox" id="fixedRatio">fixedRatio</label><br/>
</div>
</div>
</div>
<div id="container" stylea="background:rgba(255,255,255,0.2);z-index:1001;" style="z-index:1001; border:1px solid black; width:100%; border:0px solid black; position: fixed; top: 0px; left: 0px; z-index:1000; background:rgba(0,0,0,0.8); width:100%; height:100%; text-align:center; display:none;" ></div>
<canvas id="c" width="100" height="100" style="border:0px solid black; position: fixed; top: 0px;left: 0px; z-index:0; cursor:crosshair" ></canvas>
<div style="border:0px solid black; position: fixed; top: 0px;right: 0px; z-index:10000; color:#DDDDDD; font-family:monospace;">
fps: <span id="fpsMonitor">n/a</span><br>
</div>
<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-48124421-1', 'wizard23.github.io');
ga('send', 'pageview');
</script>
</body>
</html>