-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.htm
124 lines (119 loc) · 5.25 KB
/
index.htm
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
<!DOCTYPE HTML>
<html>
<head>
<title>Browsmos</title>
<link rel="author" href="https://plus.google.com/105903021303554703114/">
<script src="js/Mover.js"></script>
<script src="js/Cell.js"></script>
<script src="js/World.js"></script>
<script src="js/Camera.js"></script>
<script src="js/MusicPlayer.js"></script>
<script>
// Engine globals
var fps = 30;
var mspf = 1000 / fps;
var updateInterval;
var center;
var viewport_radius;
// Game globals
var world;
// Setup function called when page loads
function main() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
// Canvas Setup
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
center = [canvas.width/2, canvas.height/2];
// Initialize the World
world = new World(canvas);
world.load_level();
// Create requestAnimFrame if it doesn't exist
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element){
window.setTimeout(callback, mspf);
};
})();
// Animate!
(function animloop(){
world.update();
requestAnimFrame(animloop, canvas);
})();
// updateInterval = window.setInterval("world.update()", mspf);
}
}
</script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link id="favicon" rel="icon" type="image/png" href="img/icon_16.png" />
<meta name="viewport" content="width=450, user-scalable=no">
</head>
<body onload="main();">
<img id="logo" src="img/logo.png" alt="Browsmos" />
<canvas id="canvas">Sorry, no canvas for you!</canvas>
<ul id="controls">
<li id="help"><label>Help [H]</label></li>
<li id="pause"><label>Pause [P]</label></li>
<li id="newlevel"><label>New random level [R]</label></li>
<li id="mute"><label>Mute sounds [M]</label></li>
</ul>
<div id="songinfo" class="idle">
<div id="songtitle"></div>
<div id="songartist"></div>
</div>
<div id="pausedmessage" class="messages">
<p id="mainmessage">Paused</p>
<p id="subtext">Click here to resume playing.</p>
</div>
<div id="deathmessage" class="messages">
<p id="mainmessage">You were consumed!</p>
<p id="subtext">Click here to restart the level.</p>
</div>
<div id="warningmessage" class="messages">
<p id="mainmessage">Uhhhhh.</p>
<p id="subtext">You may just wanna click here to restart the level.</p>
</div>
<div id="successmessage" class="messages">
<p id="mainmessage">Good!</p>
<p id="subtext">Click here to start another random level.</p>
</div>
<div id="helpoverlay">
<div id="helpwindow">
<div id="helpheader">
<img id="helplogo" src="img/logo.png" alt="Browsmos" />
</div>
<div id="helpbody">
<div id="helpbody-inner">
<p>You are the <strong style="color:#93FBFF">bright blue</strong> cell in the center of the screen.</p>
<p>Your job is to absorb <strong style="color:#73DBEF">smaller</strong> cells, while avoiding getting absorbed by <strong style="color:#FF6A48">larger</strong> cells.</p>
<p>Become the biggest cell in the pond and you win!</p>
<h2>Controls</h2>
<p>Move by clicking on any side of your cell. You'll propel in the opposite direction.</p>
<p>Scroll using the mouse wheel to zoom.</p>
<h3>Keyboard Shortcuts</h3>
<p><span class="key">R</span> - Random new level</p>
<p><span class="key">P</span> - Pause</p>
<p><span class="key">M</span> - Mute sounds</p>
<p><span class="key">H</span> - Show this help again</p>
<h2>Install, More Info, and Reviews</h2>
<a style="display:block;text-align:center;margin-top:0.5em;" href="https://chrome.google.com/webstore/detail/browsmos/kmijdbjgikpiadlbldnmldfgfepigkip"><img src="https://developer.chrome.com/webstore/images/ChromeWebStore_BadgeWBorder_v2_206x58.png"></a>
<h2>Open Source</h2>
<p>The source code to this game is on GitHub: <a href="https://github.com/BHSPitMonkey/Browsmos">Browsmos on GitHub</a></p>
<h2>Credits</h2>
<p>Browsmos is written and designed by <a href="http://stepheneisenhauer.com" target="_blank">Stephen Eisenhauer</a>, but inspired by an award-winning game called <a href="http://www.hemispheregames.com/osmos/" target="_blank">Osmos</a>, which is made by Hemisphere Games.</p>
<p><a href="http://www.hemispheregames.com/osmos/" target="_blank">Osmos</a> is a fantastic game, definitely worth checking out and buying!</p>
<p>Music is included from the <a href="http://ccmixter.org" target="_blank">ccMixter</a> community: <a href="http://ccmixter.org/files/Pitx/19513" name="Black Rainbow on ccMixter" target="_blank">"Black Rainbow"</a> by Pitx, and <a href="http://ccmixter.org/files/rewob/17808" name="Circles on ccMixter" target="_blank">"Circles"</a> by rewob.
</div>
</div>
<div id="helpfooter">
<button id="playbutton">Begin playing</button>
</div>
</div>
</div>
<footer><a href="http://stepheneisenhauer.com">An experiment by Stephen Eisenhauer</a></footer>
</body>
</html>