TweenMax+MorphSVGPlugin+svg实现弓箭瞄准射击靶子小游戏代码-html代码-BFW代码库

TweenMax+MorphSVGPlugin+svg实现弓箭瞄准射击靶子小游戏代码

代码语言：html

所属分类：游戏

代码描述：TweenMax+MorphSVGPlugin+svg实现弓箭瞄准射击靶子小游戏代码，用鼠标往后面拉弓瞄准释放鼠标射击

代码标签： TweenMax MorphSVGPlugin svg 弓箭瞄准射击靶子游戏

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<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 >
  <svg id="game" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 400" overflow="visible">
	<linearGradient id="ArcGradient" >
			<stop offset="0"  stop-color="#fff" stop-opacity=".2"/>
			<stop offset="50%" stop-color="#fff" stop-opacity="0"/>
	</linearGradient>
    <path id="arc" fill="none" stroke="url(#ArcGradient)" stroke-width="4" d="M100,250c250-400,550-400,800,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>
	<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="miss" fill="#aaa" opacity="0" transform="translate(0, 100)">
		<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"/>
		<path d="M450 120L458 200 475 192 474 121"/>
		<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"/>
		<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"/>
		<path d="M595,215l5-23l31,0l-5,29L595,215z M627,176l13-70l-41-0l-0,70L627,176z"/>
	</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-2V182.........完整代码请登录后点击上方下载按钮下载查看