-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·164 lines (129 loc) · 5.18 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
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
163
164
<!DOCTYPE html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-63699278-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-63699278-1');
</script>
<meta charset="UTF-8">
<title>Lichenia - Molleindustria</title>
<meta name="author" content="Molleindustria" />
<meta name="copyright" content="Molleindustria 2019" />
<meta name="robots" content="index, follow" />
<meta name="description" content="A city building game for the anthropocene" />
<meta name="keywords" content="Lichenia,Game,Art,Molleindustria,videogame,SimCity" />
<meta property="og:image" content="http://www.molleindustria.org/lichenia/fb.jpg" />
<meta property="og:title" content="Lichenia" />
<meta property="og:description" content="A city building game for the anthropocene" />
<link rel="Shortcut Icon" href="favicon32.png" type="image/x-icon" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
<style>
body {
padding: 0px;
margin: 0px;
background: black;
font-family: 'Open Sans', sans-serif;
background-color: #000;
color: #FFF;
}
#canvasContainer {
/*position: fixed;*/
width: 1024px;
height: 600px;
border: 0px;
padding: 0px;
top: 0px;
margin: auto;
}
#content {
margin-bottom: 100px;
}
#content-wrapper {
width: 80%;
margin: auto;
}
.fullscreenLink {
text-align: right;
width: 100%;
}
#p5_loading {
background-color: #000000;
color: white;
box-sizing: border-box;
display: block;
position: absolute;
text-align: center;
vertical-align: middle;
line-height: 600px;
left: 0;
right: 0;
/* remove these two if you don't want vertical alignment */
top: 0;
bottom: 0;
}
a {
color: #7fce33;
text-decoration: none;
}
a:hover {
color: #c1d029;
}
</style>
<script src="libraries/p5.min.js" type="text/javascript"></script>
<script src="libraries/p5.dom.min.js" type="text/javascript"></script>
<script src="libraries/p5.sound.min.js" type="text/javascript"></script>
<script src="libraries/p5.play.js" type="text/javascript"></script>
<script src="engine.js" type="text/javascript"></script>
<script src="narrative.js" type="text/javascript"></script>
<script src="tile.js" type="text/javascript"></script>
</head>
<body>
<div id="canvasContainer">
<div id="p5_loading" class="loadingclass">LOADING...</div>
</div>
<div id="content-wrapper">
<div class="fullscreenLink"><a href="#" class="fullscreenLink" onclick="openFullscreen();">Fullscreen</a></div>
<div id="content">
<h1>Lichenia</h1> A city building game for the Anthropocene. Reclaim the ruins of a fallen city and create a sustainable human habitat.
<br/> There are no goals and no endings in Lichenia. Learn about its cryptic ecology. Grow a city like a garden.
<br/>
<br/><em>Left click or drag to move a cube / Right click to remove it</em>
<br/><em>Q+E or right click to change zoom - WASD or drag to move camera</em>
<br/>
<br/> Lichenia is the second chapter of the <a href="http://molleindustria.org/GamesForCities/" target="_blank">Playable Cities</a> series after <a href="http://molleindustria.org/nova-alea/" target="_blank">Nova Alea</a>.
<br/> You can read some notes about the game <a href="http://www.molleindustria.org/blog/lichenia-release-notes/" target="_blank">here</a>.
<br/>
<br/> All the isometric graphics are derived from <a href="https://everestpipkin.itch.io/mushy" target="_blank">Mushy</a>, a neural network generated tileset by <a href="http://everest-pipkin.com/" target="_blank">Everest Pipkin</a>.
<br/>
<br/> Lichenia is made with the javascript library <a href="http://p5js.org/" target="_blank">p5.js</a> and the add-on <a href="http://molleindustria.github.io/p5.play/" target="_blank">p5.play</a>.
<p>
<a href="http://molleindustria.org/" target="_blank">Molleindustria</a>, 2019.
</p>
<img border="0" alt="img" src="fb.jpg" width="100%" style="display:none">
</div>
</div>
<script>
/* Get the element you want displayed in fullscreen mode (a video in this example): */
var cc = document.getElementById("canvasContainer");
/* When the openFullscreen() function is executed, open the video in fullscreen.
Note that we must include prefixes for different browsers, as they don't support the requestFullscreen method yet */
function openFullscreen() {
if (cc.requestFullscreen) {
cc.requestFullscreen();
} else if (cc.mozRequestFullScreen) { /* Firefox */
cc.mozRequestFullScreen();
} else if (cc.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
cc.webkitRequestFullscreen();
} else if (cc.msRequestFullscreen) { /* IE/Edge */
cc.msRequestFullscreen();
}
}
</script>
</body>
</html>