-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
53 lines (47 loc) · 5.24 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<link rel="stylesheet" href="app.css" />
<script defer src="app.js"></script>
</head>
<body>
<div id="scene" class="scene">
<p class="score">Score: <span id="score">0</span></p>
<svg id="clouds" class="clouds" viewbox="0 0 250 200">
<g fill="#EFF4F1">
<circle cx="58" cy="55" r="22"/>
<circle cx="82" cy="53" r="28"/>
<circle cx="102" cy="65" r="20"/>
</g>
<g fill="#EFF4F1">
<circle cx="188" cy="120" r="18"/>
<circle cx="208" cy="114" r="24"/>
<circle cx="225" cy="115" r="19"/>
</g>
</svg>
<svg id="landscape" class="landscape" viewbox="0 0 400 200">
<rect x="0" y="0" width="50" height="200" fill="#378E83" />
<rect x="50" y="100" width="100" height="100" fill="#FF306A" />
<rect x="150" y="50" width="75" height="150" fill="#378E83" />
<rect x="225" y="125" width="125" height="75" fill="#335157" />
<rect x="350" y="25" width="50" height="175" fill="#FF306A" />
</svg>
<div id="obstacle">
<svg>
<g>
<path stroke="#EFF4F1" transform="rotate(15.0971 50.3634 52.1259)" id="svg_2" d="m93.39177,37.92121l-19.19552,5.30966c-1.75845,-4.6739 -4.40688,-8.72505 -7.61115,-11.94954l10.15054,-17.91749c0.89251,-1.58039 0.34286,-3.59651 -1.25139,-4.4957c-1.57762,-0.89247 -3.59031,-0.33584 -4.47927,1.24175l-9.63045,17.00187c-1.98976,-1.26129 -4.08431,-2.26902 -6.25844,-2.95135c-1.37016,-4.73313 -5.44104,-7.94087 -10.07164,-8.43825c-0.00361,-0.01331 -0.00684,-0.02625 -0.00972,-0.03956c-0.20135,-0.79721 -0.30687,-1.51526 -0.32312,-2.14083c-0.01618,-0.62276 0.03965,-1.15587 0.15129,-1.57759c0.12213,-0.42842 0.26007,-0.77379 0.41246,-1.04419c0.48048,-0.85605 1.11947,-1.41578 1.89996,-1.67665c0.07565,0.9261 0.46752,1.58769 1.1591,1.97969c0.51076,0.29002 1.10686,0.37858 1.79881,0.28331c0.69483,-0.10187 1.23798,-0.50087 1.63309,-1.19581c0.34618,-0.61226 0.41854,-1.28085 0.21107,-1.99889c-0.21107,-0.72154 -0.66886,-1.27818 -1.36367,-1.67042c-0.50679,-0.28616 -1.03413,-0.43082 -1.58736,-0.42451c-0.54963,0.00314 -1.07697,0.11173 -1.58449,0.31978c-0.5039,0.20735 -0.97501,0.52709 -1.413,0.95161c-0.4344,0.42494 -0.79314,0.89289 -1.08671,1.40287c-0.43473,0.77086 -0.71101,1.63392 -0.82339,2.57894c-0.10876,0.94221 -0.1221,1.86132 -0.02952,2.76711c0.05581,0.52648 0.20097,0.99126 0.30939,1.47882c-1.2347,-0.06967 -2.49648,0.00632 -3.75457,0.35556c-1.58736,0.43785 -3.00721,1.18564 -4.21603,2.15026c-0.17144,-0.56601 -0.32273,-1.13239 -0.59285,-1.70542c-0.38219,-0.82033 -0.86629,-1.60073 -1.4426,-2.35839c-0.58602,-0.75448 -1.2646,-1.35063 -2.03542,-1.78846c-0.5068,-0.28331 -1.05719,-0.49768 -1.65002,-0.63889c-0.59327,-0.1418 -1.15913,-0.17163 -1.6994,-0.08926s-1.04746,0.2634 -1.52473,0.54041c-0.48122,0.27641 -0.8569,0.67531 -1.1465,1.17589c-0.39225,0.69491 -0.49384,1.40978 -0.30976,2.13101c0.19089,0.7282 0.59613,1.26447 1.2088,1.61367c0.69158,0.39229 1.36697,0.45431 2.01279,0.18424c0.64509,-0.2697 1.10938,-0.65533 1.39971,-1.16919c0.39188,-0.69144 0.38863,-1.45854 -0.02342,-2.28898c0.80359,-0.18112 1.63708,-0.02662 2.49327,0.46477c0.26721,0.14819 0.56367,0.37867 0.88965,0.6848c0.31912,0.30334 0.63571,0.731 0.94192,1.27779c0.30941,0.54711 0.58961,1.21226 0.82663,2.00281c0.04249,0.14502 0.076,0.32258 0.11562,0.4809c-3.00113,2.72717 -4.46995,6.87715 -3.61666,11.05684c-1.91734,1.92334 -3.53136,4.18244 -4.79889,6.70227l-16.99526,-9.63748c-1.58124,-0.89215 -3.59653,-0.3352 -4.49303,1.24202c-0.89186,1.5874 -0.33536,3.60355 1.24514,4.50233l17.92098,10.15128c-1.09031,4.41331 -1.27435,9.24483 -0.38578,14.15235l-19.19495,5.31287c-1.7588,0.48449 -2.78676,2.30237 -2.29909,4.0547c0.48409,1.74577 2.29586,2.77666 4.05432,2.28589l19.36349,-5.35912c1.65658,3.48135 4.48913,7.50941 7.80939,11.34023l-10.52016,18.57269c-0.89581,1.58423 -0.3422,3.59683 1.24517,4.48898c0.78701,0.45186 1.68604,0.53411 2.4965,0.30994c0.81657,-0.22379 1.54487,-0.75402 1.98971,-1.55128l9.53497,-16.827c8.8927,8.54362 18.72123,13.57936 19.0303,3.46835c5.26388,8.43121 11.36703,-1.11316 14.82842,-13.09569l17.13709,9.7065c0.79027,0.45396 1.69251,0.53313 2.50977,0.30969c0.80969,-0.22137 1.53769,-0.75451 1.98573,-1.55174c0.89581,-1.57755 0.34223,-3.59324 -1.24155,-4.48612l-18.77701,-10.63513c0.95845,-4.95736 1.38961,-9.82463 1.05035,-13.6292l19.38641,-5.35832c1.7458,-0.48438 2.79001,-2.2956 2.29264,-4.04829c-0.48774,-1.75207 -2.3056,-2.77971 -4.05796,-2.29569z" stroke-width="1.5" fill="#ff306a"/>
</g>
</svg>
</div>
<svg id="player" class="player" viewbox="0 0 30 30">
<circle cx="15" cy="15" r="15" fill="#00F0C8"/>
</svg>
<p id="intro" class="intro">Press space or click to start/jump</p>
<p id="game-over" class="game-over hidden">Game Over!<small>Press space or click to restart</small></p>
</div>
</body>
</html>