forked from github/game-off-2012
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.htm
256 lines (209 loc) · 8.51 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
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
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pappu Pakia | Khelein</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<!-- Start Screen -->
<div id="start_screen">
<h1 id="title">pappu pakia</h1>
<h3 id="credits">
by
<a href="http://twitter.com/SolitaryDesigns">Kushagra</a>
and
<a href="http://twitter.com/_rishabhp">Rishabh</a>
</h3>
<h3 id="last_score"></h3>
<h3 id="high_score"></h3>
<div class="controls"></div>
<div class="options">
<ul>
<li><a href="javascript:void(0);" id="start_game">start</a></li>
<li><a href="javascript:void(0);" target="_blank" id="tweet">tweet</a></li>
<li><a href="javascript:void(0);" target="_blank" id="fb">fb like</a></li>
</ul>
</div>
</div>
<!-- /Start Screen -->
<!-- Loading sounds -->
<audio id="start" loop>
<source src="sound/pappu-pakia2.3.ogg" type="audio/ogg">
<source src="sound/pappu-pakia2.3.mp3" type="audio/mp3">
</audio>
<audio id="angry_jump">
<source src="sound/jump1.ogg" type="audio/ogg">
<source src="sound/jump1.mp3" type="audio/mp3">
</audio>
<audio id="sad_jump">
<source src="sound/jump2.ogg" type="audio/ogg">
<source src="sound/jump2.mp3" type="audio/mp3">
</audio>
<audio id="happy_jump">
<source src="sound/jump3.ogg" type="audio/ogg">
<source src="sound/jump3.mp3" type="audio/mp3">
</audio>
<audio id="flap">
<source src="sound/flap.ogg" type="audio/ogg">
<source src="sound/flap.mp3" type="audio/mp3">
</audio>
<audio id="ting">
<source src="sound/ting.ogg" type="audio/ogg">
<source src="sound/ting.mp3" type="audio/mp3">
</audio>
<canvas id="game_bg"></canvas>
<canvas id="game_main"></canvas>
<div id="score_board">0</div>
<div id="invincible_timer">
<div id="invincible_loader"></div>
</div>
<a href="javascript:void(0)" id="mute"></a>
<!-- Loading Screen -->
<div id="loading">
<p id="loadText">Loading...</p>
<div id="barCont">
<div id="bar"></div>
</div>
</div>
</div>
<div id="fps_count"></div>
<div id="share_btns">
<!-- Share -->
<div class="share-button">
<a href="http://flattr.com/thing/1091453" target="_blank">
<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a>
</div>
<!-- google plus -->
<div class="share-button">
<!-- Place this tag where you want the share button to render. -->
<div class="g-plus" data-action="share" data-annotation="bubble"></div>
<!-- Place this tag after the last share tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<!-- Facebook -->
<div class="share-button"><div id="fb-root"></div>
<fb:like send="false" layout="button_count" width="450" show_faces="false"></fb:like>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=190502394323833";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</div>
<!-- Twitter -->
<div class="share-button">
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-via="_rishabhp">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<!-- /Share -->
</div>
<div class="chrome-button">
<a href="https://chrome.google.com/webstore/detail/bblkaaapbdgakibgpbnidlnndgfjbdcd/">Add to chrome</a>
</div>
<footer class="os">
<h3>About</h3>
<p>
This HTML5 Game (Pappu Pakia) has been happily made for
the <a href="https://github.com/blog/1303-github-game-off">Github
Game Off 2012</a>. Based on the compo's rules, the concepts
that we tried to incorporate are fork, branch, push, pull, clone.
</p>
<p>
You are pappu in the game, a little character. You need to
click the mouse or tap (touch screen) to levitate else
pappu will descend. If he hits the top or bottom boundaries
that'll end the game.
</p>
<p>
There will be some obstacles along the way like forks, branches
and some enemies who are also known as "pakias". Hitting them
will end the game. 3 types of pakias - sad (pull you),
happy (push you), angry (kill you). Keep safe distance from
them!
</p>
<p>
There are some collectibles too! Coins for points (yellow for 50,
pink for 100, red for 500). Stars for invincibility
for a short period. Berries spawning clones that'll destroy
anything that comes in their way!
</p>
<p>
Collisions are not super strict
to make the gameplay a little less harder.
</p>
<p>
Hit Enter or Spacebar keys to (re)start the game.
</p>
<h3>Credits</h3>
<p>
Handsomely coded by <a href="http://twitter.com/_rishabhp">Rishabh</a>.
Beautiful graphics by <a href="http://twitter.com/solitarydesigns">Kushagra</a>. We're freelance web dudes.
</p>
<p>
Thanks to <a href="http://rezoner.net/">Rezoner</a> for Music.
</p>
<p>
All other sounds produced by personal thingies like mouths, hands and books.
Some tricks and tips that we learnt while making this game
has been shared on <a href="http://codetheory.in">CodeTheory</a>
and <a href="http://cssdeck.com/codecasts">CSSDeck</a>.
</p>
<h3>Links</h3>
<p>
<a href="http://github.com/mindd-it/pappu-pakia">Code on Github</a> |
<a href="http://dribbble.com/cssdeck">Dribbble</a> |
<a href="http://codetheory.in/contact/">Contact Us</a>
</p>
</footer>
<!-- Disqus -->
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'khelein'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
<!-- /Disqus -->
<script src="js/jquery-1.8.2.min.js"></script>
<script>window.mit = window.mit || {};</script>
<script src="js/utils.js"></script>
<script src="js/backgrounds.js"></script>
<script src="js/forks.js"></script>
<script src="js/branches.js"></script>
<script src="js/collectibles.js"></script>
<script src="js/pappu.js"></script>
<script src="js/pakia.js"></script>
<script src="js/main.js"></script>
<script src="js/loader.js"></script>
<script>
if (location.hostname.indexOf('localhost') === 0) {
$('.gads, #disqus_thread').remove();
}
</script>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36603798-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>