-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
241 lines (229 loc) · 14.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="theme-color" content="#bdaca2">
<meta property="og:description" content="Enjoy the Classic 2048 game !">
<meta property="og:site_name" content="2048">
<meta property="og:type" content="website">
<meta property="og:url" content="https://jhamadhav.com/2048/">
<meta property="og:image" content="https://jhamadhav.com/2048/images/2048_logo.svg_128.png">
<meta property="og:title" content="2048 game">
<meta property="og:description" content="Enjoy the Classic 2048 game">
<link rel="apple-touch-icon" sizes="128x128" href="./images/2048_logo.svg_128.png">
<link rel="icon" type="image/png" sizes="128x128" href="./images/2048_logo.svg_128.png">
<meta name="msapplication-TileImage" content="./images/2048_logo.svg_128.png">
<!-- fonts and stuff -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono|EB+Garamond|Raleway" &display="swap"
rel="stylesheet">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- css -->
<link rel="manifest" href="pwa/manifest.json">
<link rel="stylesheet" href="css/main.min.css">
<!-- end of css files -->
<title>2048 - Game</title>
<!-- js files -->
<script src="pwa/registerSW.js"></script>
<script src="navbar/nav.js"></script>
<script src="js/swipe.js"></script>
<script src="js/cells.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<!-- msg bar -->
<div class="msg-holder">
<div id="msg">hello</div>
</div>
<!-- nav bar html starts here -->
<nav>
<div class="header-holder">
<div class="burger" onclick="menu()" title="Menu bar">
<span></span>
<span></span>
<span></span>
</div>
<h1>Game-2048</h1>
</div>
<ul class="nav-links">
<li title="home" style='color:#262626; border-bottom:4px solid #262626' class="tab">home</li>
<li title="Learn how to play" class="tab">guide</li>
<li title="some insight" class="tab">about</li>
</ul>
</nav>
<!-- nav bar html ends here -->
<div class="page" id="home">
<div class="bg"></div>
<div class="wrapper">
<div class="game-container">
<div class="board">
<div class="score-holder" title="Current score">
<span>Score : </span>
<div id="score">0</div>
</div>
<div class="show_anim"></div>
<div class="best-holder" title="click to reset best" onclick="rest_best()">
<span>Best : </span>
<div id="best">0</div>
</div>
</div>
<span class="touch">
<div class="game-row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="game-row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="game-row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="game-row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</span>
</div>
<div class="btn-hints">
<button title="Get a hint" id="new_hint" onclick="new_hint()">Hint</button>
<button title="Start new game" id="new_game" onclick="new_game()">New Game</button>
</div>
</div>
</div>
<div class="page" id="guide">
<div class="wrapper">
<h2>Controls</h2>
<p>
<ul>
<li>On desktop/pc use Arrow keys or (<b>W, A, S and D</b>) keys to play </li>
<li>On mobile devices swipe in respective direction to move blocks. </li>
<li>Swipe right or left to summon the menu bar. </li>
<li>Click the Best score card to reset the best score stored to <i>zero.</i></li>
<b>
<li>Swipe right to open the nav bar on mobile.</li>
</b>
</ul>
</p>
<h2>2048 Game Overview</h2>
<p>2048 is a cool math and puzzle game that was created in 2014 and quickly became popular around the
globe.
Inspired by 1024 and Threes! <br><br> 2048 game is an exciting combination of math and strategy.
Can you get a 2048 high score? Give it a try ! </p>
<br>
<h2>Hints</h2>
<p>
<ul>
<li>Click best to reset it ! </li>
<li>Keep blocks in a corner </li>
<li>use strategy other than random moves ! </li>
<li>Don't chase large tiles </li>
<li>Plan ahead </li>
<li>Slow down and think </li>
<li>try merging multiple tiles at once</li>
<li>Avoid check-boarding </li>
</ul>
</p>
<h2>How to Beat 2048</h2>
<p>
To beat 2048, players must move numbered tiles and combine them to produce a tile with a value of
2048.
More
tiles are added to the board every turn and only identical numbers can be combined. Once the board
is
full
and no more tiles can be combined, the game is over. However, skilled players that create a tile
with a
value of 2048 can continue playing with bigger numbers. Keep playing to develop your 2048 strategy;
and
develope a better sense of it.
<br> <br> I hope that you enjoy it.
</p>
</div>
</div>
<div class="page" id="about">
<div class="wrapper">
<h2>My thoughts and experience</h2>
<p>
Hi, I'm <a href="https://jhamadhav.com">Madhav</a>. I have created this as a side project/game jam
within 4 hours, it took more hours to refine it but the
logics and
main design was completed with in 4 - 6 hours, in the span of few days. <br> <br>
The color combination is very similar to the original, I tried my best to keep the same authenticity and
flavour of the game. The facts part is taken from various websites like
<a href="https://en.wikipedia.org/wiki/2048_(video_game)">Wikipedia</a>,
<a href="https://www.arkadium.com/games/2048-game/">arkadium</a> and etc. <br><br>
I will be adding more features as soon as I can, <b>I hope you enjoy the game!</b>
</p>
<footer>
<div class="follow">Follow me on </div>
<div class="icons">
<a href="https://github.com/jhamadhav">
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path
d="m256 0c-140.699219 0-256 116.300781-256 257 0 139.882812 114.25 255 256 255 141.574219 0 256-114.945312 256-255 0-140.699219-115.300781-257-256-257zm45 477.5c-14.398438 3-29.699219 4.5-45 4.5s-30.601562-1.5-45-4.5v-70.199219c0-16.800781 4.5-22.800781 10.5-30.902343 3.054688-3.492188 4.898438-6.625 18.597656-27.296876l-23.097656-3.601562c-59.402344-8.699219-82.800781-39.601562-92.101562-63.601562-12-32.097657-5.699219-72.300782 15.902343-97.796876 3.300781-3.902343 6-10.503906 3.601563-17.402343-4.503906-13.800781-3.902344-35.699219-.902344-44.101563 15.90625 2.273438 32.261719 13.667969 45.902344 21.902344 6.285156 3.667969 9.582031 2.699219 12.597656 3 10.960938-2.28125 28.058594-7.800781 54.300781-7.800781 16.199219 0 33.300781 2.398437 50.101563 7.199219 3.003906-.070313 7.832031 2.484374 16.199218-2.398438 14.257813-8.6875 30.058594-19.691406 45.898438-21.902344 3 8.402344 3.601562 30.300782-.898438 44.101563-2.402343 6.898437.296876 13.5 3.601563 17.402343 21.597656 25.5 27.898437 65.699219 15.898437 97.796876-9.300781 24-32.699218 54.902343-92.101562 63.601562l-23.097656 3.601562c14.160156 21.367188 15.652344 23.929688 18.601562 27.296876 5.996094 8.101562 10.496094 14.101562 10.496094 30.902343zm30-8.699219v-61.5c0-17.101562-3.601562-28.5-8.402344-36.902343 45.601563-12.296876 78.003906-39.300782 92.402344-78 15.300781-40.796876 8.402344-89.398438-17.101562-123 4.503906-20.097657 4.503906-52.199219-6.296876-67.199219-4.800781-6.597657-11.402343-10.199219-19.800781-10.199219-.300781 0-.300781 0-.300781 0-23.261719 1.257812-41.570312 12.972656-61.199219 24.898438-18-4.800782-36.300781-7.199219-54.601562-7.199219-18.597657 0-37.199219 2.699219-53.695313 7.199219-20.664062-12.460938-38.796875-23.671876-62.703125-24.898438-7.5 0-14.101562 3.601562-18.902343 10.199219-10.796876 15-10.796876 47.101562-6.296876 67.199219-25.503906 33.601562-32.402343 82.5-17.101562 123 14.398438 38.699218 46.800781 65.703124 92.402344 78-3.722656 6.511718-6.667969 14.914062-7.828125 26.285156-9.210938 3.175781-17.199219 4.210937-24.628907 2.027344-7.835937-2.316407-13.941406-7.546876-19.246093-16.46875-11.914063-20.015626-32.207031-36.355469-55.3125-34.230469l2.636719 29.882812c10.699218-.980469 21.347656 10.339844 26.878906 19.671875 9.125 15.367188 21.417968 25.445313 36.546875 29.914063 11.230469 3.308593 21.496093 3.230469 32.550781.871093v40.449219c-87.300781-30.601562-151-114-151-211.800781 0-124.199219 101.800781-227 226-227s226 102.800781 226 227c0 97.800781-63.699219 181.199219-151 211.800781zm0 0" />
</svg>
</a>
<a href="https://www.instagram.com/jhamadhav28/" alt="instagram">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="166.063px"
height="169.063px" viewBox="0 0 169.063 169.063"
style="enable-background:new 0 0 169.063 169.063;" xml:space="preserve">
<g>
<path d="M122.406,0H46.654C20.929,0,0,20.93,0,46.655v75.752c0,25.726,20.929,46.655,46.654,46.655h75.752
c25.727,0,46.656-20.93,46.656-46.655V46.655C169.063,20.93,148.133,0,122.406,0z M154.063,122.407
c0,17.455-14.201,31.655-31.656,31.655H46.654C29.2,154.063,15,139.862,15,122.407V46.655C15,29.201,29.2,15,46.654,15h75.752
c17.455,0,31.656,14.201,31.656,31.655V122.407z" />
<path
d="M84.531,40.97c-24.021,0-43.563,19.542-43.563,43.563c0,24.02,19.542,43.561,43.563,43.561s43.563-19.541,43.563-43.561
C128.094,60.512,108.552,40.97,84.531,40.97z M84.531,113.093c-15.749,0-28.563-12.812-28.563-28.561
c0-15.75,12.813-28.563,28.563-28.563s28.563,12.813,28.563,28.563C113.094,100.281,100.28,113.093,84.531,113.093z" />
<path d="M129.921,28.251c-2.89,0-5.729,1.17-7.77,3.22c-2.051,2.04-3.23,4.88-3.23,7.78c0,2.891,1.18,5.73,3.23,7.78
c2.04,2.04,4.88,3.22,7.77,3.22c2.9,0,5.73-1.18,7.78-3.22c2.05-2.05,3.22-4.89,3.22-7.78c0-2.9-1.17-5.74-3.22-7.78
C135.661,29.421,132.821,28.251,129.921,28.251z" />
</g>
</svg>
</a>
</div>
</footer>
<br>
<h2>Fun Facts About 2048</h2>
<p>
<ul>
<li> 2048 was created in only two days as a side project by developer <a
href="https://www.gabrielecirulli.com/"> Gabriele Cirulli.</a></li>
<li>After going viral, the game had over 4,000,000 players in less than one week!</li>
<li>Deciding not to sell the game, Cirulli released 2048 as an open-source software, making it
available to gamers and developers worldwide.</li>
<li>Because the game is open-source and widely recognized for its brilliant design, 2048 is often
used to teach young programmers.</li>
<li>
Recently, an artificial intelligence system was developed to play 2048. <br> But, can you
beat
its high score?
</li>
<li>2048 has been ported to many platforms due to its open-source code</li>
<li> The original version of 2048 was written in JavaScript and CSS, but now many C++ and Vala
clones
exist.</li>
<li>The game 1024 is a clone of Threes! and Cirulli has said that 2048 is a clone of 1024; what a
mathematical pedigree!</li>
<li>Many variations of 2048 exist, including 2048 cupcakes and other versions that contain
elements
of famous movies and television shows.</li>
</ul>
</p>
</div>
</div>
</body>
</html>