-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
executable file
·198 lines (188 loc) · 11.4 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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<html lang="en">
<head>
<title>Slime Tribe - turn based strategy based on WebGL and THREE.js</title>
<meta charset="utf-8">
<link rel="stylesheet" href="slime/css/site/style.css" type="text/css" media="screen, projection" />
</head>
<body>
<script src='slime/js/Detector.js'></script>
<script>
var webglFound = ( !Detector.canvas || !Detector.webgl ) ? false : true;
var articles = [ 'demogame', 'requiements', 'faq', 'thanks', 'planed', 'about', 'underhand'];
var changing = false;
function change( to ) {
try {
if( changing === true ) throw "changing";
changing = true;
var found = false;
var last = false;
for( i in articles ) {
if( articles[i] == to ) found = articles[i];
if( document.getElementById( 'menu-' + articles[i] ).getAttribute( 'style' ) === 'active' ) {
last = articles[i];
}
}
if( found === false ) throw "unknown page";
for( i in articles ) {
if( articles[i] === found ) {
document.getElementById( 'menu-' + articles[i] ).setAttribute( 'class', 'active' );
document.getElementById( 'article-' + articles[i] ).style.display = 'block';
} else {
document.getElementById( 'menu-' + articles[i] ).setAttribute( 'class', 'unactive' );
document.getElementById( 'article-' + articles[i] ).style.display = 'none';
}
}
var hash = '#' + found;
window.location.hash = hash;
if ("onhashchange" in window) { // event supported?
window.onhashchange = function () {
window.location.hash = hash;
}
} else { // event not supported:
var storedHash = window.location.hash;
window.setInterval(function () {
if (window.location.hash != storedHash) {
window.location.hash = hash;
}
}, 100);
}
changing = false;
} catch( e ) {
if( e !== "changing" ) changing = false;
} finally {
changing = false;
return false;
}
}
var webgl = '<p class="center" id="demolink"><a href="demo.html" class="demo-button" target="_blank">DESKTOP</a><a href="genesis.html" class="demo-button" target="_blank">ANDROID</a></p>';
var nowebgl = '<h2>Ops!</h2><p class="center" id="nowebg">Sorry, your browser or your computer don\'t compatible with WebGL. For more information look <a href="#faq" target="_blank">here.</a></p>';
function refresh() {
var random = Math.random( 15 ) * 7;
document.getElementById('github').style.opacity = 0.7 - random / 23;
};
setInterval( refresh, 230 );
</script>
<div id="container">
<div id="header"><h1 style="display:none;">Slime Tribe</h1><p style="display:none;"><strong>WebGL Turn-based strategy</strong></p></div>
<div id="github"><a href="https://github.com/zbyso23/slimetribe" title="Slime Tribe on GitHub" ><img src="slime/images/site/github.png" width="77" height="77" /></a></div>
<div id="menu">
<ul>
<li><a href="#" onclick="change('demogame');" id="menu-demogame" class="active">Demo</a></li>
<li><a href="#" onclick="change('requiements');" id="menu-requiements" >Requiements</a></li>
<li><a href="#" onclick="change('faq');" id="menu-faq">Faq</a></li>
<li><a href="#" onclick="change('about');" id="menu-about">About Game</a></li>
<li><a href="#" onclick="change('planed');" id="menu-planed">Planed features</a></li>
<li><a href="#" onclick="change('underhand');" id="menu-underhand">Underhand</a></li>
<li><a href="#" onclick="change('thanks');" id="menu-thanks">Special Thanks</a></li>
</ul>
</div>
<div id="content">
<div class="article show" id="article-demogame">
<h2>Online Demo</h2>
<p>Here is a playable demoversion from last "stable" relase:) If is WebGL not detected on Your computer link will be unavailable. In this case check Your system and browser configuration. More information in the FAQ section.</p>
<div id="demo"></div>
<br />
<div id="bitcoin">
<div id="bitcoin-outer">
<a href="http://www.bitcoin.org/" id="bitcoin-link" target="_blank">Donate using Bitcoin!</a><span id="bitcoin-address">1uJo1SsV6Eh7LA3GZqcbVMLowFhBh8THY</span>
</div>
</div>
</div>
<div class="article hide" id="article-requiements">
<h2>Requiements</h2>
<p>This game have no special system requiements, but comsumption of WebGL in browser is bigger compare with eqivalent desktop application. Planed compatibility is all devices with WebGL compatible browser, like Safari, Chrome and Firefox.</p>
<p><strong>Desktop configuration:</strong></p>
<ul>
<li><strong>CPU:</strong> 1GHz (Minimal) / 2GHz (Recomended)</li>
<li><strong>Memmory:</strong> 512MB RAM (Minimal) / 2048MB RAM (Recomended)</li>
<li><strong>Graphics:</strong> Intel HD 2000 (Minimal) / external PCI-E (Recomended)</li>
<li><strong>OS:</strong> Linux / Mac OS X / Windows XP</li>
<li><strong>Web Browser:</strong> WebGL compatible (Mozilla Firefox, Google Chrome, Apple Safari)</li>
</ul>
<br />
<p><strong>Android recomended configuration:</strong></p>
<ul>
<li><strong>CPU:</strong> 1.5GHz Cortex A9 Dual Core</li>
<li><strong>Memmory:</strong> 1024MB RAM DD3</li>
<li><strong>Graphics:</strong> Mali-400MP or better</li>
<li><strong>OS:</strong> Android 4.0</li>
<li><strong>Web Browser:</strong> Google Chrome Beta with enabled WebGL - <a href="#" onclick="change('faq');" >look here for details.</a></li>
</ul>
</div>
<div class="article hide" id="article-faq">
<h2>Faq</h2>
<h3>How enable WebGL?</h3>
<p>In most modern browsers is WebGL default enabled. In other case find Your device bellow:</p>
<ul>
<li><a href="http://thenextweb.com/google/2013/01/25/google-finally-makes-it-easy-to-enable-webgl-support-in-latest-chrome-for-android-beta/" title="Google Makes it Easy To Enable WebGL in Latest Chrome for Android Beta" target="_blank">Android Beta</a></li>
<li><a href="https://discussions.apple.com/thread/3300585?start=0&tstart=0" title="How do I enable WebGL in Safari 5.1?: Apple Support Communities" target="_blank">Apple OS X</a></li>
</ul>
<h3>How speed-up game?</h3>
<p>In the planed version will be menu for customize graphics effects. If You play game on notebook try switch to "Game Mode" or similar power settings for speed-up cpu and graphics card.</p>
</div>
<div class="article hide" id="article-about">
<h2>About Game</h2>
<p>Slime Tribe is a turn based strategy game with RPG features. Now is completed battle part of the game, where playing two player on other sides. Battle plane is on the grid 10 x 10 cells. Every character on the battle grid is on the one cell and every turn have one possible action - move, attack, heal (only healers) and spells (only magican). Battle is over when any player defeat all monsters of enemy.</p>
<p><strong>Grid Colors</strong></p>
<ul>
<li><strong>Green: </strong>Friendly character with move / move path from selected character</li>
<li><strong>Red: </strong>Enemy character</li>
</ul>
<p><strong>Keyboard shortcuts</strong></p>
<ul>
<li><strong>F2: </strong>End turn</li>
<li><strong>ENTER: </strong>Change magic/melee attack (magican)</li>
<li><strong>SHIFT: </strong>Change spell (magican)</li>
</ul>
</div>
<div class="article hide" id="article-planed">
<h2>Planed features</h2>
<p><strong>Now will be preparing these new features:</strong></p>
<ul class="freatures">
<li><strong>Quest Map: </strong>In the demo is possible to play only battle part of game, but now is preparing for second - mainly quest part with bigger map, locations, items and many other.</li>
<li><strong>New characters: </strong>In next weeks will be prepared new characters for battle and for new quest part</li>
<li><strong>Game settings: </strong>From beginning programming this game I think on various of machines and core is ready for many settings of graphics effects like anti-aliasing, textures and shadows. All these settings will be enabled soon.</li>
</ul>
</div>
<div class="article hide" id="article-thanks">
<h2>Special Thanks</h2>
<p>Thanks for my Familly, for all my good friends and for all good peole in the past, present and future :)
<strong>and especially thansks</strong> for these developers and web pages where very help me with develop these game:</strong></p>
<ul>
<li><strong>mrdoob and all developers of <a href="http://mrdoob.github.com/three.js/" title="THREE.js" target="_blank">THREE.js</a></strong></li>
<li><strong>all linux community, for beginner here is link to <a href="http://en.wikipedia.org/wiki/Linux" title="http://en.wikipedia.org/wiki/Linux" target="_blank">Wikipedia.</a></strong></li>
<li><strong>many people with helping hands on <a href="http://stackoverflow.com/" title="http://stackoverflow.com/" target="_blank">stackoverflow.com</a></strong></li>
<li><strong>all developers and designers with beginers hints of very good modeling software <a href="http://www.blender.org/" title="http://www.blender.org/" target="_blank">blender</a></strong></li>
</ul>
</div>
<div class="article hide" id="article-underhand">
<p><strong>This game using many open source technologies, specially thanks for all developers.</strong></p>
<ul class="freatures">
<li><strong>HTML5: </strong>In game is GUI graphics like loading screen, players stats, spells etc. created with using HTML, CSS3 and Javascript. Game plane is created using by new feature of modern browsers named WebGL. This technology is based on OpenGl ES 2.0 and will be show accelerated 3D graphics on most present computes. More info about WebGL on <a href="http://en.wikipedia.org/wiki/WebGL" title="Wikipedia - WebGL">Wikipedia.</a></li>
</ul>
</div>
<div class="bar">
<h3>Faq:</h3>
<ul>
<li><a href="#" onclick="change('faq');">How enable WebGL?</a></li>
<li><a href="#" onclick="change('faq');">How speed up game?</a></li>
</ul>
<h3>News:</h3>
<ul>
<li><a href="#" onclick="change('demo');"><strong>30.3.</strong> Added Android version</a></li>
</ul>
</div>
</div>
<div id="footer"></div>
<script>
var url = document.URL;
var anchor = url.split('#');
if( anchor.length > 1 ) {
change( anchor[1] );
}
document.getElementById( 'demo' ).innerHTML = ( webglFound ) ? webgl : nowebgl;
</script>
</div>
</body>
</html>