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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0