-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
135 lines (130 loc) · 6.91 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="" />
<meta name="author" content="Kapil Kashyap" />
<title>Snake Reloaded!</title>
<link rel="stylesheet" type="text/css" href="style/default.css" />
<link rel="stylesheet" type="text/css" href="style/dark.css" />
<link rel="stylesheet" type="text/css" href="gamepad/style/styles.css" />
</head>
<body class="dark">
<div class="body-container">
<div class="body-column">
<div class="game-container game-container-dimensions">
<div class="game-stats">
<div>
<div class="level">
<div class="label">Level:</div>
<div class="value"></div>
</div>
<div class="score">
<div class="label">Score:</div>
<div class="value">0</div>
</div>
</div>
<div class="life">
<div class="label">Life:</div>
<div class="value">
<span class="">+</span>
<span class="">+</span>
<span class="">+</span>
</div>
</div>
</div>
<div class="game-indicator">
<div class="boost-timeout-bar"></div>
</div>
<div class="game-arena">
<div class="instructions show">
<div class="selectMode">
<div class="label">Modes</div>
<div class="modes"></div>
</div>
<div class="selectLevel">
<div class="label">Levels</div>
<div class="levels"></div>
</div>
<div class="details">
<div class="label">Instructions</div>
<ol class="instruction classic-mode hide">
<li class="not-handheld">Use <span style="font-weight: bold;">WASD</span> or arrow keys to move around</li>
<li class="handheld hide">Use swipes or gamepad to move around</li>
<li class="not-handheld">Use Ctrl or Shift key for power moves</li>
<li class="handheld hide">Use angle gestures or X/Y buttons for power moves</li>
<li>Move around a lot to score more points</li>
<li>Consume food to increase level</li>
</ol>
<ol class="instruction challenge-mode hide">
<li class="not-handheld">Use <span style="font-weight: bold;">WASD</span> or arrow keys to move around</li>
<li class="handheld hide">Use swipes or gamepad to move around</li>
<li class="not-handheld">Use Ctrl or Shift key for power moves</li>
<li class="handheld hide">Use angle gestures or X/Y buttons for power moves</li>
<li>Consume food to increase in length</li>
<li>Cover the whole grid to increase level</li>
</ol>
<ol class="instruction maze-mode hide">
<li class="not-handheld">Use <span style="font-weight: bold;">WASD</span> or arrow keys to move around</li>
<li class="handheld hide">Use swipes or gamepad to move around</li>
<li>Time the turns according to speed of the snake</li>
<li>Patience is the key to navigate through</li>
<li>Complete the maze to increase level</li>
</ol>
</div>
<div class="settings hide">
<div class="label">Settings</div>
<div class="options">
<div class="inputWithLabel">
<input id="useGamepad" type="checkbox" name="useGamepad">
<label for="useGamepad">Gamepad</label>
</div>
</div>
</div>
</div>
<div class="game-arena-display">
<div class="dummy"></div>
</div>
</div>
<div class="game-indicator">
<div class="progress-bar"></div>
</div>
<div class="game-info">
<div class="message"></div>
</div>
</div>
<div class="leaderboard"></div>
</div>
<div class="game-controls-container">
<div class="body-column">
<div class="gamepad hide"></div>
</div>
<div class="body-column">
<div class="game-actions hide">
<div class="game-action-buttons">
<div class="buttons">
<div class="button play-pause"><button></button></div>
<div class="button reset"><button disabled>Reset</button></div>
</div>
</div>
<div class="desktop-message"></div>
</div>
</div>
</div>
<div class="body-column">
<div class="copyright-details">
<div class="horizontal-separator">
<div class="line"></div>
</div>
<div class="info">
<div class="copyright">Copyright<span class="space-around">©</span>2020 Kapil Kashyap</div>
<div class="link"><a href="https://github.com/kapilkashyap/snake" target="_blank">Github</a></div>
</div>
</div>
</div>
</div>
<!-- Load scripts -->
<script type="module" src="src/script.js"></script>
<script type="module" src="gamepad/src/script.js"></script>
</body>
</html>