TweenMax+MorphSVGPlugin+svg实现一个射箭游戏代码
代码语言：html
所属分类：游戏
代码描述：TweenMax+MorphSVGPlugin+svg实现一个射箭游戏代码
代码标签： TweenMax MorphSVGPlugin svg 射箭 游戏 代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>射箭游戏</title>
<style>
body{
margin:0;
background:#222;
margin:20px;
}
svg{
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
}
span{
color:white;
font-family:sans-serif;
opacity:.3;
}</style>
</head>
<body>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/MorphSVGPlugin.js"></script>
<svg id="game" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 400" overflow="visible">
<path id="arc" fill="none" stroke="url(#ArcGradient)" stroke-width="4" d="M100,250c250-400,550-400,800,0" opacity="0" pointer-events="none"/>
<defs>
<g id="arrow">
<line x2="60" fill="none" stroke="#888" stroke-width="2" />
<polygon fill="#888" points="64 0 58 2 56 0 58 -2" />
<polygon fill="#88ce02" points="2 -3 -4 -3 -1 0 -4 3 2 3 5 0" />
</g>
</defs>
<g id="target">
<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" />
<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" />
<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" />
<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" />
</g>
<g id="bow" fill="none" stroke-linecap="round" vector-effect="non-scaling-stroke" pointer-events="none">
<polyline fill="none" stroke="#ddd" stroke-linecap="round" points="88,200 88,250 88,300"/>
<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"/>
</g>
<g class="arrow-angle"><use x="100" y="250" xlink:href="#arrow"/></g>
<linearGradient id="ArcGradient" >
<stop offset="0" stop-color="#fff" stop-opacity=".2"/>
<stop offset="80%" stop-color="#fff" stop-opacity="0"/>
</linearGradient>
<clipPath id="mask">
<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"/>
</clipPath>
<g class="arrows" clip-path="url(#mask)" pointer-events="none">
</g>
<g class="bullseye" fill="#F4531C" opacity="0">
<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"/>
<path d="M340 131L359 125 362 169 381 167 386 123 405 129 392 183 351 186z"/>
<path d="M413 119L402 188 450 196 454 175 422 175 438 120z"/>
<path d="M432 167L454 169 466 154 451 151 478 115 453 113z"/>
<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"/>
<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"/>
<path d="M577 118L587 158 570 198 587 204 626 118 606 118 598 141 590 112z"/>
<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"/>
<path d="M649,220l4-21l28,4l-6,25L649,220z M681,191l40-79l-35-8L659,184L681,191z"/>
</g>
<g class="hit" fill="#ffcc00" opacity="0">
<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"/>
<path d="M449 185L453 113 477 112 464 186"/>
<path d="M486 113L484 130 506 130 481 188 506 187 520 131 540 135 545 119"/>
<path d="M526,195l5-20l22,5l-9,16L526,195z M558,164l32-44l-35-9l-19,51L558,164z"/>
</g>
</svg>
<span>画一个箭头并发射它</span>
<script>
var svg = document.querySelector("svg");
var cursor = svg.createSVGPoint();
var arrows = document.querySelector(".arrows");
var target={x:902,y:247};
var line={x1:875,y1:280,x2:925,y2:220};
window.addEventListener("mousedown", knock);
function knock(e) {
TweenMax.to(".arrow-angle use", 0.3, {
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0