forked from rachitGulati/donut-ride
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
133 lines (127 loc) · 5.03 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
<!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">
<title>Donut Ride</title>
<link rel="stylesheet" href="./app.css">
</head>
<body>
<div class="js-game-start off">
<div class="score-card"><span>SCORE: </span><span class="js-score"> 0 </span></div>
<div class="cloud"></div>
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
<div class="doughnut-container" onclick="start()" style="transform: scale(0.7); bottom: 10px; position: absolute; z-index: 1;">
<div id="js-bounce-donut">
<div id="js-running-donut" class="donut classic" style="animation:roll 1s linear infinite;">
<span class="icing"></span>
</div>
</div>
<div class="doughnut-shadow"></div>
</div>
<div id="road">
<div id="road-lane"></div>
</div>
<div class="car-container">
<div id="js-car" class="car">
<div class="car-top">
<div class="front js-car-color">
</div>
<div class="body js-car-color">
<span id="car-offline" class="car-offline off">Offilne <span class="heart"></span></span>
<div class="window-1"></div>
<div class="window-2"></div>
</div>
<div class="back js-car-color">
</div>
</div>
<div class="whell">
<div class="whell-1">
<h1>+</h1>
</div>
<div class="whell-2">
<h1>+</h1>
</div>
</div>
</div>
</div>
</div>
<div class="js-game-stopped on">
<div class="title">
<h1> Donut's Road Trip</h1>
<div class="suptext">
To play press (Space / Up Arrow)
</div>
</div>
<div id="main-wrapper">
<div id="donuts">
<div class="doughnut-container" onclick="start(1)">
<div class="donut-wrapper">
<div class="donut classic donut-color-1">
<span class="icing"></span>
</div>
</div>
<div class="doughnut-shadow"></div>
</div>
<div class="doughnut-container" onclick="start(2)">
<div class="donut-wrapper">
<div class="donut classic donut-color-2">
<span class="icing"></span>
</div>
</div>
<div class="doughnut-shadow"></div>
</div>
<div class="doughnut-container" onclick="start(3)">
<div class="donut-wrapper">
<div class="donut classic donut-color-3">
<span class="icing"></span>
</div>
</div>
<div class="doughnut-shadow"></div>
</div>
<div class="doughnut-container" onclick="start(4)">
<div class="donut-wrapper">
<div class="donut classic donut-color-4">
<span class="icing"></span>
</div>
</div>
<div class="doughnut-shadow"></div>
</div>
<div class="doughnut-container" onclick="start(5)">
<div class="donut-wrapper">
<div class="donut classic donut-color-5">
<span class="icing"></span>
</div>
</div>
<div class="doughnut-shadow"></div>
</div>
<div class="doughnut-container" onclick="start(6)">
<div class="donut-wrapper">
<div class="donut classic donut-color-6">
<span class="icing"></span>
</div>
</div>
<div class="doughnut-shadow"></div>
</div>
</div>
<div id="game-over" class="off">
<h1>Game Over</h1>
<span>SCORE: </span><span class="js-score"> 0 </span>
</div>
</div>
<div class="footer">
<div class="subtext">
Choose your's and let's hit the road :)<br/>
</div>
<button class="button button--secondary">
<span class="button__inner" onclick="start()">Start Random</span>
</button>
</div>
</div>
<script src="./app.js"></script>
</body>
</html>