-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
108 lines (105 loc) · 6.54 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="./img/icon/favicon-32.png" sizes="32x32" />
<link rel="icon" href="./img/icon/favicon-57.png" sizes="57x57" />
<link rel="icon" href="./img/icon/favicon-76.png" sizes="76x76" />
<link rel="icon" href="./img/icon/favicon-96.png" sizes="96x96" />
<link rel="icon" href="./img/icon/favicon-128.png" sizes="128x128" />
<link rel="icon" href="./img/icon/favicon-192.png" sizes="192x192" />
<link rel="icon" href="./img/icon/favicon-228.png" sizes="228x228" />
<link rel="shortcut icon" href="./img/icon/favicon-196.png" sizes="196x196" />
<link rel="apple-touch-icon" href="./img/icon/favicon-120.png" sizes="120x120" />
<link rel="apple-touch-icon" href="./img/icon/favicon-152.png" sizes="152x152" />
<link rel="apple-touch-icon" href="./img/icon/favicon-180.png" sizes="180x180" />
<meta name="msapplication-TileColor" content="#4682b4" />
<meta name="msapplication-TileImage" content="./img/icon/favicon-144.png" />
<meta name="msapplication-config" content="./img/icon/browserconfig.xml" />
<title>Sliding Puzzle Game</title>
<link rel="stylesheet" href="./style.css" />
<script src="./js/lib.js" defer></script>
<script src="./js/hammer.min.js" defer></script>
<script src="./js/NPuzzleSolver.js" defer></script>
<script src="./js/Game.js" defer></script>
<script src="./js/Cell.js" defer></script>
<script src="./js/index.js" defer></script>
</head>
<body>
<div class="container">
<h1>Sliding Puzzle Game</h1>
<div class="controls">
<div class="controls__main">
<button id="instructions" title="Instructions">Instructions</button>
<button id="leaderboard" title="Leaderboard">Leaderboard</button>
</div>
<div class="controls__game none">
<button id="level" title="Levels list">Levels</button>
<button id="save" title="Save cells position">Save</button>
<button id="load" disabled title="Load saved cells position">Load</button>
<button id="solve" title="Solve this puzzle">Solve</button>
</div>
</div>
<div class="board"></div>
<div class="game-stats hidden">
<div class="game-stats__moves">
Moves:
<span class="game-stats__moves--value">0</span>
</div>
<div class="game-stats__local">
<span class="game-stats__local--level">NxN</span> | Your best result:
<span class="game-stats__local--value">-</span>
</div>
<div class="game-stats__global">
Global best result:
<span class="game-stats__global--value loading"></span> by
<span class="game-stats__global--name loading"></span>
</div>
</div>
</div>
<div class="contacts-links">
<a href="https://github.com/iCherya/Fifteen-Puzzle" target="_blank">
<svg height="32" viewbox="0 0 16 16" width="32">
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
></path>
</svg>
</a>
<a href="https://www.linkedin.com/in/icherya/" target="_blank">
<svg height="32" viewbox="0 0 512 512" width="32">
<path
d="m256 0c-141.363281 0-256 114.636719-256 256s114.636719 256 256 256 256-114.636719 256-256-114.636719-256-256-256zm-74.390625 387h-62.347656v-187.574219h62.347656zm-31.171875-213.1875h-.40625c-20.921875 0-34.453125-14.402344-34.453125-32.402344 0-18.40625 13.945313-32.410156 35.273437-32.410156 21.328126 0 34.453126 14.003906 34.859376 32.410156 0 18-13.53125 32.402344-35.273438 32.402344zm255.984375 213.1875h-62.339844v-100.347656c0-25.21875-9.027343-42.417969-31.585937-42.417969-17.222656 0-27.480469 11.601563-31.988282 22.800781-1.648437 4.007813-2.050781 9.609375-2.050781 15.214844v104.75h-62.34375s.816407-169.976562 0-187.574219h62.34375v26.558594c8.285157-12.78125 23.109375-30.960937 56.1875-30.960937 41.019531 0 71.777344 26.808593 71.777344 84.421874zm0 0"
/>
</svg>
</a>
<a href="https://t.me/iCherya" target="_blank">
<svg height="32" viewbox="0 0 24 24" width="32">
<path
d="m12 24c6.629 0 12-5.371 12-12s-5.371-12-12-12-12 5.371-12 12 5.371 12 12 12zm-6.509-12.26 11.57-4.461c.537-.194 1.006.131.832.943l.001-.001-1.97 9.281c-.146.658-.537.818-1.084.508l-3-2.211-1.447 1.394c-.16.16-.295.295-.605.295l.213-3.053 5.56-5.023c.242-.213-.054-.333-.373-.121l-6.871 4.326-2.962-.924c-.643-.204-.657-.643.136-.953z"
/>
</svg>
</a>
</div>
<div class="instructions popup hidden">
<div class="close"></div>
<h2>Instructions</h2>
<p>
Starting at the top left corner, move the tiles in ascending order in the grid. The
tile in the lower right corner should remain "empty". To move a tile you can click
on it, use your arrow keys or swipe on mobile screen. The resulting order should be
like:
</p>
<div>
<img src="./img/300px-15-puzzle.jpg" alt="15 Puzzle Game" />
</div>
</div>
<div class="leaderboard popup hidden">
<div class="close"></div>
<h2>Leaderboard</h2>
<p>🏆 Best results of Sliding Puzzle Game</p>
<div class="leaderboard-table-wrapper loading">Loading</div>
</div>
<div class="popups"></div>
</body>
</html>