-
Notifications
You must be signed in to change notification settings - Fork 45
/
index.html
412 lines (402 loc) · 25.7 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
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
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TapTapTap - Open source tapping game built with Javascript</title>
<meta name="description" content="Open source tapping game built with Javascript" />
<link rel="stylesheet" href="style/main.css">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet">
<!-- favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/favicons/manifest.json">
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#0b1d31">
<link rel="shortcut icon" href="/favicons/favicon.ico">
<meta name="msapplication-config" content="/favicons/browserconfig.xml">
<meta name="theme-color" content="#0b1d31">
<!-- OG Details -->
<meta property="og:title" content="TapTapTap" />
<meta property="og:description" content="Open source tapping game built with Javascript" />
<meta property="og:site_name" content="TapTapTap - Open source tapping game built with Javascript" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://taptaptap.click/" />
<meta property="og:image" content="https://taptaptap.click/images/im-og_image.png" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-3416596-20"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-3416596-20');
</script>
</head>
<body>
<div class="section-container section-home">
<div class="section-wrapper home-section-wrapper">
<div class="logo-container">
<div class="logo"></div>
<div class="pulsing-circle"></div>
</div>
<h2 class="home-subtitle">Open source tapping game built with Javascript</h2>
<div class="btns-container">
<a class="btn btn-pink" href="play/">Play</a>
<a class="btn btn-outline" href="https://github.com/MahdiF/taptaptap">View on GitHub</a>
</div>
<div class="screenshots-container">
<div class="desktop-screenshot">
<div class="mobile-screenshot"></div>
</div>
</div>
<a href="#about" class="arrow-down-container"></a>
</div>
</div>
<!-- <nav class="menu-container">
<ul class="menu">
<li class="menu-item"><a class="menu_item_link" href="">Home</a></li>
<li class="menu-item menu-item--selected"><a class="menu_item_link" href="">About</a></li>
<li class="menu-item"><a class="menu_item_link" href="">Timeline</a></li>
<li class="menu-item"><a class="menu_item_link" href="">Credits</a></li>
</ul>
</nav> -->
<div id="about" class="section-container section-about">
<div class="section-wrapper">
<h2 class="section-title">About</h2>
<div class="about-container">
<p class="about-text">
After 6 months of hard work applying everything I’ve learned in Javascript, I present to you this
simple game that works perfectly on both mobile phones and desktop browsers.
And of course, I’m sharing the source code with everyone hoping it’d help someone learn more
Javascript.
<br><br>
Yours,<br>
Mahdi
</p>
<div class="short-bio-container">
<div class="bio-avatar"><img src="images/avatar-mahdi-alfarra.jpg" alt=""></div>
<div class="bio">
<h3 class="bio-title">Mahdi Farra</h3>
<h4 class="bio-tag-line">Senior Product Designer based in 🌉 SF Bay Area.</h4>
<p class="bio-links">
Check my <a href="https://mahdif.com/">website</a>, and follow me on <a
href="https://twitter.com/mahdif">Twitter</a>.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="section-container section-timeline">
<div class="section-wrapper timeline-section-wrapper">
<h2 class="section-title">Timeline</h2>
<div class="timeline_cards_container">
<div class="timeline_card">
<a href="https://www.google.com/maps/place/Amman,+Jordan/@31.8357604,35.9476308,10z/data=!3m1!4b1!4m5!3m4!1s0x151b5fb85d7981af:0x631c30c0f8dc65e8!8m2!3d31.9453666!4d35.9283716?hl=en"
target="_blank" class="timeline_card_image_container"><img
src="images/timeline-images/jordan-map.png" alt="" class="timeline_card_image"></a>
<div class="timeline_card_content">
<h4 class="timeline_card_title">Main Idea</h4>
<p class="timeline_card_text">The main idea came to me when I was on vacation in Jordan.</p>
<p class="timeline_card_comment">No. They don’t ride camels for work.</p>
</div>
</div>
<div class="timeline_card">
<a target="_blank" class="timeline_card_image_container"><img
src="images/timeline-images/tiny-project-code.png" alt="" class="timeline_card_image"></a>
<div class="timeline_card_content">
<h4 class="timeline_card_title">Tiny Project</h4>
<p class="timeline_card_text">I wanted to make a tiny project to prove that I’ve learned
something in Javascript.</p>
<p class="timeline_card_comment">I’m doing something with my life. Finally.</p>
</div>
</div>
<div class="timeline_card">
<a target="_blank" class="timeline_card_image_container"><img
src="images/timeline-images/my-friend-amr.png" alt="" class="timeline_card_image"></a>
<div class="timeline_card_content">
<h4 class="timeline_card_title">My Childhood Friend Loved My Idea!</h4>
<p class="timeline_card_text">While I was in Jordan, I went out to see my childhood friend, Amr.
I told him about a stupid idea for a game.
Amr loved the idea! And that’s when I decided I should go ahead and work on it!</p>
<p class="timeline_card_comment">I know. Amr looks like Pitbull in this photo.</p>
</div>
</div>
<div class="timeline_card">
<a target="_blank" class="timeline_card_image_container"><img
src="images/timeline-images/whac-a-mole-game.png" alt="" class="timeline_card_image"></a>
<div class="timeline_card_content">
<h4 class="timeline_card_title">Whac-A-Mole</h4>
<p class="timeline_card_text">The idea was a simple tiny game,very similar to the famous <a
href="https://en.wikipedia.org/wiki/Whac-A-Mole"
class="timeline_card_link">Whac-A-Mole</a> game. The main difference is that my game
will use Emoji’s instead of moles.</p>
<p class="timeline_card_comment">Wow! Such Genius! Much Smartness! Cool!</p>
</div>
</div>
<div class="timeline_card">
<a class="timeline_card_image_container"><img
src="images/timeline-images/first-proof-of-concept.png" alt=""
class="timeline_card_image"></a>
<div class="timeline_card_content">
<h4 class="timeline_card_title">Proof of Concept</h4>
<p class="timeline_card_text">I wanted to make a small project to prove to myself that it’s
doable in Javascript.</p>
<a href="/prototypes/1_poc/" class="timeline_card_btn">First proof of concept</a>
</div>
</div>
<div class="timeline_card">
<a class="timeline_card_image_container"><img src="images/timeline-images/responsive-love.png"
alt="" class="timeline_card_image"></a>
<div class="timeline_card_content">
<h4 class="timeline_card_title">Responsive Love</h4>
<p class="timeline_card_text">After I managed to make the first proof of concept, I decided to
try making it responsive to test it on my mobile phone.</p>
<a href="/prototypes/2_poc_responsive_love/" class="timeline_card_btn">First responsive proof of
concept</a>
<p class="timeline_card_comment">Mobile first they say. I say second, third… do whatever is
easier for you.</p>
</div>
</div>
<p class="timeline_inline_paragraph">💩 It’s going to get very technical from here on. Run if you’re not
a nerd.</p>
<div class="timeline_card">
<a class="timeline_card_image_container"><img
src="images/timeline-images/replacing-emojis-with-images.png" alt=""
class="timeline_card_image"></a>
<div class="timeline_card_content">
<h4 class="timeline_card_title">Emoji’s Photos & Random Sounds</h4>
<p class="timeline_card_text">I was using regluar emoji characters, and these have unpredictable
width and height, so I though I’d better use images instead. I also tried spicing things up
by making the clicking sound change everytime you click on an emoji!</p>
<a href="/prototypes/3_poc_emoji_images_random_sounds/" class="timeline_card_btn">Images for
emoji’s prototype</a>
</div>
</div>
<div class="timeline_card">
<a class="timeline_card_image_container"><img src="images/timeline-images/catch-the-emojis.png"
alt="" class="timeline_card_image"></a>
<div class="timeline_card_content">
<h4 class="timeline_card_title">Catch the Emojis</h4>
<p class="timeline_card_text">After doing a lot of expermients I thought it’s time to give that
game a name and a better user interface.</p>
<a href="/prototypes/4_poc_catch_the_emojis/" class="timeline_card_btn">Play Catch the
Emojis</a>
<p class="timeline_card_comment">I know! That neon red is ridiculous. I mean awesome.</p>
</div>
</div>
<div class="timeline_card">
<a class="timeline_card_image_container"><img src="images/timeline-images/sound-pool.png" alt=""
class="timeline_card_image"></a>
<div class="timeline_card_content">
<h4 class="timeline_card_title">Sound Pool</h4>
<p class="timeline_card_text">The game of course, has to have some sound effects.<br>
<br>
I managed to get one sound to play at a time, but I needed to be able play multiple sounds
at the same time, so I had to program my own audio pool.
</p>
<a href="/prototypes/5_poc_sound_pool/" class="timeline_card_btn">Sound Pool Proof of
Concept</a>
</div>
</div>
<div class="timeline_card">
<a class="timeline_card_image_container"><img
src="images/timeline-images/end-of-catch-the-emojis.png" alt=""
class="timeline_card_image"></a>
<div class="timeline_card_content">
<h4 class="timeline_card_title">The End of Catch the Emojis!</h4>
<p class="timeline_card_text">I finally implemented the sound pool, and also made it super easy
to a new level. <br>And that was the final version of Catch the Emojis!</p>
<a href="/prototypes/6_poc_catch_the_emojis_finale/" class="timeline_card_btn">Play Catch the
Emojis 2</a>
</div>
</div>
<div class="timeline_card">
<a class="timeline_card_image_container"><img src="images/timeline-images/mahdi-hates-the-game.png"
alt="" class="timeline_card_image"></a>
<div class="timeline_card_content">
<h4 class="timeline_card_title">I Hate It!</h4>
<p class="timeline_card_text">I woke up a few days after finishing that game with a weird
feeling. I hated it. I hated everything about.<br>
<br>
I asked a few people to try playing the game, and I noticed that I made a lot of
mistakes.<br>
The interface wasn’t intuitive, and my Javascript code wasn’t the best either.<br>
<br>
I had to do something about it.
</p>
</div>
</div>
<div class="timeline_card">
<a class="timeline_card_image_container"><img src="images/timeline-images/new-game-tap-tap-tap.png"
alt="" class="timeline_card_image"></a>
<div class="timeline_card_content">
<h4 class="timeline_card_title">New Game!</h4>
<p class="timeline_card_text">I decided that the new game is going to be very similar to the old
one, but with a little bit more logic in it.<br>
<br>
I wanted to make something more challenging, and more fun to play.
</p>
<a href="/prototypes/7_taptaptap_design.png" class="timeline_card_btn">See the new design
artboards</a>
</div>
</div>
<div class="timeline_card">
<a class="timeline_card_image_container"><img
src="images/timeline-images/debugging-control-panel.png" alt=""
class="timeline_card_image"></a>
<div class="timeline_card_content">
<h4 class="timeline_card_title">Debugging Panel</h4>
<p class="timeline_card_text">This time, I decided to take things a bit more serious. I created
a simpel debugging panel to help me show/hide the pages real quick which made my life 10
times better when I'm debugging a sprcific page.</p>
<a href="/prototypes/8_debugging_panel/" class="timeline_card_btn">Try the control panel</a>
</div>
</div>
<div class="timeline_card">
<a class="timeline_card_image_container"><img
src="images/timeline-images/tap-tap-tap-game-animation.gif" alt=""
class="timeline_card_image"></a>
<div class="timeline_card_content">
<h4 class="timeline_card_title">Animation</h4>
<p class="timeline_card_text">I wanted this version of the game to have a better animation, so
I’ve used a lot of CSS3 animation with Javascript to control it.<br>
<br>
I tried designing and animating the blue circle first, and I wanted to do that the simplest
way possible using a single div element!
</p>
<a href="https://codepen.io/mahdi/pen/kXzQRk" class="timeline_card_btn">See the circles I’ve
made on Codepen</a>
</div>
</div>
<div class="timeline_card">
<a class="timeline_card_image_container"><img src="images/timeline-images/dj-mahdi-al-farra.png"
alt="" class="timeline_card_image"></a>
<div class="timeline_card_content">
<h4 class="timeline_card_title">Sound Effects</h4>
<p class="timeline_card_text">I spent sometime to choosing the right sound effects because I
know that they’ll compliment the interface if they were choosen right.</p>
<p class="timeline_card_comment">DJ Mahdi van Buuren. Such a multi-talents guy.</p>
</div>
</div>
<div class="timeline_card">
<a class="timeline_card_image_container"><img src="images/timeline-images/game-objects.png" alt=""
class="timeline_card_image"></a>
<div class="timeline_card_content">
<h4 class="timeline_card_title">Big Objects (OOP)</h4>
<p class="timeline_card_text">Back to the technical stuff; to make it easier for me and whoever
is going to work on this project in the future, I’ve created a bunch of objects, each one
these controls 1 big task, such as creating levels, changing pages, managing audio… etc.</p>
<p class="timeline_card_comment">Fun fact: I re-wrote my code for this project 7 times at least,
and still, I feel like I need to re-write it again.</p>
</div>
</div>
<div class="timeline_card">
<a class="timeline_card_image_container"><img src="images/timeline-images/infinite-levels.png"
alt="" class="timeline_card_image"></a>
<div class="timeline_card_content">
<h4 class="timeline_card_title">Infinite Levels</h4>
<p class="timeline_card_text">In the beginning I made an object that you would call and pass a
few parameters to setup a new level, but later I thought it’s a lot of work to pass
different parameters for each level manually, so I automated it using simple math.</p>
<p class="timeline_card_comment">I love math! It empowers lazy people like me.</p>
</div>
</div>
<div class="timeline_card">
<a class="timeline_card_image_container"><img
src="images/timeline-images/whats-next-react-native.png" alt=""
class="timeline_card_image"></a>
<div class="timeline_card_content">
<h4 class="timeline_card_title">What’s Next?</h4>
<p class="timeline_card_text">I always wanted to learn React Native, and I think this game is a
great opportunity for that. I’d be able to make an app out of it, and then publish it to the
app stores.</p>
<p class="timeline_card_comment">Then I’ll be rich. So rich. So so rich. I’ll even buy a small
island. hmmm… okay, island are a bit too expensive. I’ll buy a big house then. hmmm… a big
house is super expensive… hmmm… I’ll rent a small apartment?…. hmmm okay.. I’ll stay where I
am.
Damn it.</p>
</div>
</div>
<div class="timeline_card">
<a class="timeline_card_image_container"><img src="images/timeline-images/loved-the-game.png" alt=""
class="timeline_card_image"></a>
<div class="timeline_card_content">
<h4 class="timeline_card_title">Loved the Game?</h4>
<p class="timeline_card_text">If you loved the game, you can use it the way you want, but
please, mention my name somewhere. Like you know, I worked really hard to get this done.</p>
<p class="timeline_card_comment">Hey! Why don't you share this website on your Twitter, Facebook
or even Snapchat if that's your thing (not judging).</p>
</div>
</div>
<div class="timeline_card">
<a class="timeline_card_image_container"><img src="images/timeline-images/loved-me.png" alt=""
class="timeline_card_image"></a>
<div class="timeline_card_content">
<h4 class="timeline_card_title">Loved Me?!</h4>
<p class="timeline_card_text">I love you too, but I’m sorry :( I’m already taken.<br>
<br>
But hey, I accept gifts. Gifts are awesome.
</p>
<a href="http://a.co/eJctK2F" class="timeline_card_btn">This is my wishlist on Amazon</a>
</div>
</div>
</div>
</div>
</div>
<div class="section-container section-credits">
<div class="section-wrapper credits-section-wrapper">
<h2 class="section-title">Credits</h2>
<p class="credits-subtitle">I wouldn’t be able to do it without you!</p>
<div class="credits-card-container">
<div class="credits-card">
<img src="images/credits-images/nour-abu-saud.jpg" alt="avatar of Nour Abu Saud"
class="credits-card-avatar">
<a href="https://twitter.com/Nour_ASoud" class="credits-card-name-title">Nour Abu Soud</a>
<p class="credits-card-description">
First of all, thank you for not devorsing me. And also for helping me debug the game, and for
testing it a million times. And most importantly, for keeping up and believing in all my crazy
ideas!
</p>
</div>
<div class="credits-card">
<img src="images/credits-images/amr-zahrawi.png" alt="avatar of Amr Zahrawi"
class="credits-card-avatar">
<a class="credits-card-name-title">Amr Zahrawi</a>
<p class="credits-card-description">
Thank you for believing in me and for listening to my stupid ideas!
</p>
</div>
<div class="credits-card">
<img src="images/credits-images/benjamin.png" alt="avatar of Benjamin" class="credits-card-avatar">
<a href="https://twitter.com/smorkolama" class="credits-card-name-title">Benjamin</a>
<p class="credits-card-description">
Thank you for letting me <a href="">rubber-duck</a> you. I know. That might sound weird if
you’re not a computer geek.
But again, thanks Benjamin for answering my programming questions and supporting me.
</p>
</div>
<div class="credits-card">
<img src="images/credits-images/ignacio-crespo.jpg" alt="avatar of Ignacio Crespo"
class="credits-card-avatar">
<a href="https://twitter.com/itcrespo" class="credits-card-name-title">Ignacio Crespo</a>
<p class="credits-card-description">
Thank you for helping me understand more about game developement. I won’t forget our discussion
about the sound pool.
</p>
</div>
<div class="credits-card">
<img src="images/credits-images/juan-rios.jpg" alt="avatar of Juan Rios"
class="credits-card-avatar">
<a href="https://juanrios.me/" class="credits-card-name-title">Juan Rios</a>
<p class="credits-card-description">
Thank you for testing the game, for inspiring me while designing it, and for the help choosing
some of the sound effects!
</p>
</div>
</div>
<p style="text-align:center">🥔</p>
</div>
</div>
</body>
</html>