Skip to content

Commit 1dd5e95

Browse files
leoncoolmoonleoncoolmoon
committed
prevent pull down reflesh
1 parent 1b6691e commit 1dd5e95

File tree

4 files changed

+100
-78
lines changed

4 files changed

+100
-78
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
02-Archery-Game\morphSVGPlugin.min.js

‎02-Archery-Game/index.html‎

Lines changed: 86 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,99 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<title>Archery Game</title>
5-
<meta charset="UTF-8" />
6-
<meta name="viewport" content="width=device-width" />
7-
<link rel="stylesheet" href="style.css" />
83

4+
<head>
5+
<title>Archery Game</title>
6+
<meta charset="UTF-8" />
7+
<meta name="viewport" content="width=device-width" />
8+
<link rel="stylesheet" href="style.css" />
99

10-
<!-- 👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻-->
11-
<!-- Also uploaded the demo of this code in a gif : https://c.tenor.com/x8v1oNUOmg4AAAAd/tenor.gif-->
12-
<!-- 👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻-->
1310

14-
<!-- 👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻-->
15-
<!-- More html-css-js Games Calculators Games Cards Elements Projects on https://www.github.com/he-is-talha -->
16-
<!-- 👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻-->
11+
<!-- 👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻-->
12+
<!-- Also uploaded the demo of this code in a gif : https://c.tenor.com/x8v1oNUOmg4AAAAd/tenor.gif-->
13+
<!-- 👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻-->
1714

18-
<link rel="icon" href="https://leoncoolmoon.github.io/icon.png">
15+
<!-- 👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻-->
16+
<!-- More html-css-js Games Calculators Games Cards Elements Projects on https://www.github.com/he-is-talha -->
17+
<!-- 👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻-->
1918

20-
</head>
21-
<body>
22-
<svg id="game" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 400" overflow="visible">
23-
<linearGradient id="ArcGradient" >
24-
<stop offset="0" stop-color="#fff" stop-opacity=".2"/>
25-
<stop offset="50%" stop-color="#fff" stop-opacity="0"/>
26-
</linearGradient>
27-
<path id="arc" fill="none" stroke="url(#ArcGradient)" stroke-width="4" d="M100,250c250-400,550-400,800,0" pointer-events="none"/>
28-
<defs>
29-
<g id="arrow">
30-
<line x2="60" fill="none" stroke="#888" stroke-width="2" />
31-
<polygon fill="#888" points="64 0 58 2 56 0 58 -2" />
32-
<polygon fill="#88ce02" points="2 -3 -4 -3 -1 0 -4 3 2 3 5 0" />
33-
</g>
34-
</defs>
35-
<g id="target">
36-
<path fill="#FFF" d="M924.2,274.2c-21.5,21.5-45.9,19.9-52,3.2c-4.4-12.1,2.4-29.2,14.2-41c11.8-11.8,29-18.6,41-14.2 C944.1,228.3,945.7,252.8,924.2,274.2z" />
37-
<path fill="#F4531C" d="M915.8,265.8c-14.1,14.1-30.8,14.6-36,4.1c-4.1-8.3,0.5-21.3,9.7-30.5s22.2-13.8,30.5-9.7 C930.4,235,929.9,251.7,915.8,265.8z" />
38-
<path fill="#FFF" d="M908.9,258.9c-8,8-17.9,9.2-21.6,3.5c-3.2-4.9-0.5-13.4,5.6-19.5c6.1-6.1,14.6-8.8,19.5-5.6 C918.1,241,916.9,250.9,908.9,258.9z" />
39-
<path fill="#F4531C" d="M903.2,253.2c-2.9,2.9-6.7,3.6-8.3,1.7c-1.5-1.8-0.6-5.4,2-8c2.6-2.6,6.2-3.6,8-2 C906.8,246.5,906.1,250.2,903.2,253.2z" />
40-
</g>
41-
<g id="bow" fill="none" stroke-linecap="round" vector-effect="non-scaling-stroke" pointer-events="none">
42-
<polyline fill="none" stroke="#ddd" stroke-linecap="round" points="88,200 88,250 88,300"/>
43-
<path fill="none" stroke="#88ce02" stroke-width="3" stroke-linecap="round" d="M88,300 c0-10.1,12-25.1,12-50s-12-39.9-12-50"/>
44-
</g>
45-
<g class="arrow-angle"><use x="100" y="250" xlink:href="#arrow"/></g>
46-
<clipPath id="mask">
47-
<polygon opacity=".5" points="0,0 1500,0 1500,200 970,290 950,240 925,220 875,280 890,295 920,310 0,350" pointer-events="none"/>
48-
</clipPath>
49-
<g class="arrows" clip-path="url(#mask)" pointer-events="none">
50-
</g>
51-
<g class="miss" fill="#aaa" opacity="0" transform="translate(0, 100)">
52-
<path d="M358 194L363 118 386 120 400 153 416 121 440 119 446 203 419 212 416 163 401 180 380 160 381 204"/>
53-
<path d="M450 120L458 200 475 192 474 121"/>
54-
<path d="M537 118L487 118 485 160 515 162 509 177 482 171 482 193 529 199 538 148 501 146 508 133 537 137"/>
55-
<path d="M540 202L543 178 570 186 569 168 544 167 546 122 590 116 586 142 561 140 560 152 586 153 586 205"/>
56-
<path d="M595,215l5-23l31,0l-5,29L595,215z M627,176l13-70l-41-0l-0,70L627,176z"/>
57-
</g>
58-
<g class="bullseye" fill="#F4531C" opacity="0">
59-
<path d="M322,159l15-21l-27-13l-32,13l15,71l41-14l7-32L322,159z M292,142h20l3,8l-16,8 L292,142z M321,182l-18,9l-4-18l23-2V182z"/>
60-
<path d="M340 131L359 125 362 169 381 167 386 123 405 129 392 183 351 186z"/>
61-
<path d="M413 119L402 188 450 196 454 175 422 175 438 120z"/>
62-
<path d="M432 167L454 169 466 154 451 151 478 115 453 113z"/>
63-
<path d="M524 109L492 112 466 148 487 155 491 172 464 167 463 184 502 191 513 143 487 141 496 125 517 126z"/>
64-
<path d="M537 114L512 189 558 199 566 174 533 175 539 162 553 164 558 150 543 145 547 134 566 148 575 124z"/>
65-
<path d="M577 118L587 158 570 198 587 204 626 118 606 118 598 141 590 112z"/>
66-
<path d="M635 122L599 198 643 207 649 188 624 188 630 170 639 178 645 162 637 158 649 143 662 151 670 134z"/>
67-
<path d="M649,220l4-21l28,4l-6,25L649,220z M681,191l40-79l-35-8L659,184L681,191z"/>
68-
</g>
69-
<g class="hit" fill="#ffcc00" opacity="0" transform="translate(180, -80) rotate(12) ">
70-
<path d="M383 114L385 195 407 191 406 160 422 155 418 191 436 189 444 112 423 119 422 141 407 146 400 113"/>
71-
<path d="M449 185L453 113 477 112 464 186"/>
72-
<path d="M486 113L484 130 506 130 481 188 506 187 520 131 540 135 545 119"/>
73-
<path d="M526,195l5-20l22,5l-9,16L526,195z M558,164l32-44l-35-9l-19,51L558,164z"/>
19+
<link rel="icon" href="https://leoncoolmoon.github.io/icon.png">
20+
21+
</head>
22+
23+
<body>
24+
<svg id="game" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 400" overflow="visible">
25+
<linearGradient id="ArcGradient">
26+
<stop offset="0" stop-color="#fff" stop-opacity=".2" />
27+
<stop offset="50%" stop-color="#fff" stop-opacity="0" />
28+
</linearGradient>
29+
<path id="arc" fill="none" stroke="url(#ArcGradient)" stroke-width="4" d="M100,250c250-400,550-400,800,0"
30+
pointer-events="none" />
31+
<defs>
32+
<g id="arrow">
33+
<line x2="60" fill="none" stroke="#888" stroke-width="2" />
34+
<polygon fill="#888" points="64 0 58 2 56 0 58 -2" />
35+
<polygon fill="#88ce02" points="2 -3 -4 -3 -1 0 -4 3 2 3 5 0" />
7436
</g>
37+
</defs>
38+
<g id="target">
39+
<path fill="#FFF"
40+
d="M924.2,274.2c-21.5,21.5-45.9,19.9-52,3.2c-4.4-12.1,2.4-29.2,14.2-41c11.8-11.8,29-18.6,41-14.2 C944.1,228.3,945.7,252.8,924.2,274.2z" />
41+
<path fill="#F4531C"
42+
d="M915.8,265.8c-14.1,14.1-30.8,14.6-36,4.1c-4.1-8.3,0.5-21.3,9.7-30.5s22.2-13.8,30.5-9.7 C930.4,235,929.9,251.7,915.8,265.8z" />
43+
<path fill="#FFF"
44+
d="M908.9,258.9c-8,8-17.9,9.2-21.6,3.5c-3.2-4.9-0.5-13.4,5.6-19.5c6.1-6.1,14.6-8.8,19.5-5.6 C918.1,241,916.9,250.9,908.9,258.9z" />
45+
<path fill="#F4531C"
46+
d="M903.2,253.2c-2.9,2.9-6.7,3.6-8.3,1.7c-1.5-1.8-0.6-5.4,2-8c2.6-2.6,6.2-3.6,8-2 C906.8,246.5,906.1,250.2,903.2,253.2z" />
47+
</g>
48+
<g id="bow" fill="none" stroke-linecap="round" vector-effect="non-scaling-stroke" pointer-events="none">
49+
<polyline fill="none" stroke="#ddd" stroke-linecap="round" points="88,200 88,250 88,300" />
50+
<path fill="none" stroke="#88ce02" stroke-width="3" stroke-linecap="round"
51+
d="M88,300 c0-10.1,12-25.1,12-50s-12-39.9-12-50" />
52+
</g>
53+
<g class="arrow-angle">
54+
<use x="100" y="250" xlink:href="#arrow" />
55+
</g>
56+
<clipPath id="mask">
57+
<polygon opacity=".5" points="0,0 1500,0 1500,200 970,290 950,240 925,220 875,280 890,295 920,310 0,350"
58+
pointer-events="none" />
59+
</clipPath>
60+
<g class="arrows" clip-path="url(#mask)" pointer-events="none">
61+
</g>
62+
<g class="miss" fill="#aaa" opacity="0" transform="translate(0, 100)">
63+
<path d="M358 194L363 118 386 120 400 153 416 121 440 119 446 203 419 212 416 163 401 180 380 160 381 204" />
64+
<path d="M450 120L458 200 475 192 474 121" />
65+
<path d="M537 118L487 118 485 160 515 162 509 177 482 171 482 193 529 199 538 148 501 146 508 133 537 137" />
66+
<path d="M540 202L543 178 570 186 569 168 544 167 546 122 590 116 586 142 561 140 560 152 586 153 586 205" />
67+
<path d="M595,215l5-23l31,0l-5,29L595,215z M627,176l13-70l-41-0l-0,70L627,176z" />
68+
</g>
69+
<g class="bullseye" fill="#F4531C" opacity="0">
70+
<path
71+
d="M322,159l15-21l-27-13l-32,13l15,71l41-14l7-32L322,159z M292,142h20l3,8l-16,8 L292,142z M321,182l-18,9l-4-18l23-2V182z" />
72+
<path d="M340 131L359 125 362 169 381 167 386 123 405 129 392 183 351 186z" />
73+
<path d="M413 119L402 188 450 196 454 175 422 175 438 120z" />
74+
<path d="M432 167L454 169 466 154 451 151 478 115 453 113z" />
75+
<path d="M524 109L492 112 466 148 487 155 491 172 464 167 463 184 502 191 513 143 487 141 496 125 517 126z" />
76+
<path d="M537 114L512 189 558 199 566 174 533 175 539 162 553 164 558 150 543 145 547 134 566 148 575 124z" />
77+
<path d="M577 118L587 158 570 198 587 204 626 118 606 118 598 141 590 112z" />
78+
<path d="M635 122L599 198 643 207 649 188 624 188 630 170 639 178 645 162 637 158 649 143 662 151 670 134z" />
79+
<path d="M649,220l4-21l28,4l-6,25L649,220z M681,191l40-79l-35-8L659,184L681,191z" />
80+
</g>
81+
<g class="hit" fill="#ffcc00" opacity="0" transform="translate(180, -80) rotate(12) ">
82+
<path d="M383 114L385 195 407 191 406 160 422 155 418 191 436 189 444 112 423 119 422 141 407 146 400 113" />
83+
<path d="M449 185L453 113 477 112 464 186" />
84+
<path d="M486 113L484 130 506 130 481 188 506 187 520 131 540 135 545 119" />
85+
<path d="M526,195l5-20l22,5l-9,16L526,195z M558,164l32-44l-35-9l-19,51L558,164z" />
86+
</g>
7587
<!-- <line x1= "875", y1= "280", x2= "925", y2= "220" stroke="red"/>
7688
7789
<circle class="point" r="7" fill="purple" opacity=".4"/> -->
78-
</svg>
90+
</svg>
91+
92+
<span>Draw back an arrow and launch it!</span>
93+
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script>
94+
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js">
95+
// <script src='MorphSVGPlugin.min.js'></script>
96+
<script src="script.js"></script>
97+
</body>
7998

80-
<span>Draw back an arrow and launch it!</span>
81-
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script>
82-
<script src='//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js'></script>
83-
<script src="script.js"></script>
84-
</body>
8599
</html>

0 commit comments

Comments
 (0)