Draggable+TweenMax实现可拖动svg拼图小游戏代码
代码语言：html
所属分类：游戏
代码描述：Draggable+TweenMax实现可拖动svg拼图小游戏代码
代码标签： Draggable TweenMax 拖动 svg 拼图 游戏 代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html,
body {
height: 100%;
}
body {
background-color: lightyellow;
overflow: hidden;
}
svg {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
<defs>
<clipPath id='piece1'>
<path fill="#D6694F" d="M631.7 224.1c.4-.9.7-1.8 1-2.7-5.8-4.8-9.5-12-9.5-20.1 0-14.4 11.7-26.1 26.1-26.1 14.4 0 26.1 11.7 26.1 26.1 0 8.1-3.7 15.3-9.4 20.1.3.9.6 1.8 1 2.7 22.2 1 44.4 4 66.3 8.9 4.9-21.9 7.8-44.1 8.9-66.4.9-.4 1.8-.7 2.7-1 4.8 5.8 12 9.5 20.1 9.5 14.4 0 26.1-11.7 26.1-26.1 0-14.4-11.7-26.1-26.1-26.1-8.1 0-15.3 3.7-20.1 9.5-.9-.3-1.8-.6-2.7-1-1-22.3-4-44.5-8.9-66.4-21.9 4.9-44 7.8-66.3 8.9-.4.9-.7 1.8-1 2.7 5.8 4.8 9.4 12 9.4 20.1 0 14.4-11.7 26.1-26.1 26.1-14.4 0-26.1-11.7-26.1-26.1 0-8.1 3.7-15.3 9.5-20.1-.3-.9-.6-1.8-1-2.7-22.2-1-44.4-4-66.3-8.9v.1c-4.9 21.9-7.8 44.1-8.8 66.3-.9.4-1.8.7-2.7 1-4.8-5.8-12-9.5-20.1-9.5-14.4 0-26.1 11.7-26.1 26.1 0 14.4 11.7 26.1 26.1 26.1 8.1 0 15.3-3.7 20.1-9.5.9.3 1.8.6 2.7 1 1 22.3 4 44.5 8.8 66.3v.1c21.9-5 44.1-7.9 66.3-8.9z"/>
</clipPath>
<clipPath id='piece2'>
<path id="piece2" fill="#F2F0E9" d="M463.8 392.2c.4-.9.7-1.8 1-2.7-5.8-4.8-9.4-12-9.4-20.1 0-14.4 11.7-26.1 26.1-26.1 14.4 0 26.1 11.7 26.1 26.1 0 8.1-3.7 15.3-9.5 20.1.3.9.6 1.8 1 2.7 22.3 1 44.4 4 66.3 8.9 4.9-21.9 7.8-44.1 8.9-66.4.9-.4 1.8-.7 2.7-1 4.8 5.8 12 9.5 20.1 9.5 14.4 0 26.1-11.7 26.1-26.1 0-14.4-11.7-26.1-26.1-26.1-8.1 0-15.3 3.7-20.1 9.5-.9-.3-1.8-.6-2.7-1-1-22.3-4-44.5-8.9-66.4-21.9 4.9-44 7.8-66.3 8.9-.4.9-.7 1.8-1 2.7 5.8 4.8 9.5 12 9.5 20.1 0 14.4-11.7 26.1-26.1 26.1-14.4 0-26.1-11.7-26.1-26.1 0-8.1 3.7-15.3 9.4-20.1-.3-.9-.6-1.8-1-2.7-22.2-1-44.4-4-66.3-8.9v.1c-4.9 21.9-7.8 44.1-8.8 66.3-.9.4-1.8.7-2.7 1-4.8-5.8-12-9.5-20.1-9.5-14.4 0-26.1 11.7-26.1 26.1 0 14.4 11.7 26.1 26.1 26.1 8.1 0 15.3-3.7 20.1-9.5.9.3 1.8.6 2.7 1 1 22.3 4 44.5 8.8 66.3v.1c21.9-5 44.1-7.9 66.3-8.9z"/>
</clipPath>
<clipPath id='piece3'>
<path id="piece3" fill="#E4BE69" d="M556.6 166.5c-.9-.4-1.8-.7-2.7-1-4.8 5.8-12 9.5-20.1 9.5-14.4 0-26.1-11.7-26.1-26.1s11.7-26.1 26.1-26.1c8.1 0 15.3 3.7 20.1 9.5.9-.3 1.8-.6 2.7-1 1-22.3 4-44.5 8.8-66.4-21.9-4.9-44-7.8-66.3-8.9-.4-.9-.7-1.8-1-2.7 5.8-4.8 9.4-12 9.4-20.1 0-14.4-11.7-26.1-26.1-26.1-14.4 0-26.1 11.7-26.1 26.1 0 8.1 3.7 15.3 9.4 20.1-.3.9-.6 1.8-1 2.7-22.3 1-44.4 4-66.3 8.9 4.9 21.9 7.8 44.1 8.8 66.4.9.4 1.8.7 2.7 1 4.8-5.8 12-9.5 20.1-9.5 14.4 0 26.1 11.7 26.1 26.1s-11.6 26.1-26 26.1c-8.1 0-15.3-3.7-20.1-9.5-.9.3-1.8.6-2.7 1-1 22.3-4 44.5-8.8 66.4h.1c21.8 4.9 44 7.8 66.2 8.9.4.9.7 1.8 1 2.7-5.8 4.8-9.5 12-9.5 20.1 0 14.4 11.7 26.1 26.1 26.1s26.1-11.7 26.1-26.1c0-8.1-3.7-15.3-9.4-20.1.3-.9.6-1.8 1-2.7 22.2-1 44.4-4 66.2-8.9h.1c-4.9-21.9-7.8-44.1-8.8-66.4z"/>
</clipPath>
<clipPath id='piece4'>
<path id="piece4" fill="#59402F" d="M724.5 334.6c-.9-.4-1.8-.7-2.7-1-4.8 5.8-12 9.5-20.1 9.5-14.4 0-26.1-11.7-26.1-26.1 0-14.4 11.7-26.1 26.1-26.1 8.1 0 15.3 3.7 20.1 9.5.9-.3 1.8-.6 2.7-1 1-22.3 4-44.5 8.9-66.4-21.9-4.9-44-7.8-66.3-8.9-.4-.9-.7-1.8-1-2.7 5.8-4.8 9.4-12 9.4-20.1 0-14.4-11.7-26.1-26.1-26.1-14.4 0-26.1 11.7-26.1 26.1 0 8.1 3.7 15.3 9.4 20.1-.3.9-.6 1.8-1 2.7-22.3 1-44.4 4-66.3 8.9 4.9 21.9 7.8 44.1 8.8 66.4.9.4 1.8.7 2.7 1 4.8-5.8 12-9.5 20.1-9.5 14.4 0 26.1 11.7 26.1 26.1 0 14.4-11.7 26.1-26.1 26.1-8.1 0-15.3-3.7-20.1-9.5-.9.3-1.8.6-2.7 1-1 22.3-4 44.5-8.8 66.4h.1c21.8 4.9 44 7.8 66.2 8.9.4.9.7 1.8 1 2.7-5.8 4.8-9.5 12-9.5 20.1 0 14.4 11.7 26.1 26.1 26.1 14.4 0 26.1-11.7 26.1-26.1 0-8.1-3.7-15.3-9.4-20.1.3-.9.6-1.8 1-2.7 22.2-1 44.4-4 66.2-8.9h.1c-4.9-21.9-7.8-44.1-8.8-66.4z"/>
</clipPath>
<clipPath id='piece5'>
<path id="piece5" fill="#59402F" d="M295.9 224.1c.4-.9.7-1.8 1-2.7-5.8-4.8-9.4-12-9.4-20.1 0-14.4 11.7-26.1 26.1-26.1 14.4 0 26.1 11.7 26.1 26.1 0 8.1-3.7 15.3-9.4 20.1.3.9.6 1.8 1 2.7 22.2 1 44.4 4 66.3 8.9 4.9-21.9 7.8-44.1 8.9-66.4.9-.4 1.8-.7 2.7-1 4.8 5.8 12 9.5 20.1 9.5 14.4 0 26.1-11.7 26.1-26.1 0-14.4-11.7-26.1-26.1-26.1-8.1 0-15.3 3.7-20.1 9.5-.9-.3-1.8-.6-2.7-1-1-22.3-4-44.5-8.9-66.4-21.9 4.9-44 7.8-66.3 8.9-.4.9-.7 1.8-1 2.7 5.8 4.8 9.4 12 9.4 20.1 0 14.4-11.7 26.1-26.1 26.1-14.4 0-26.1-11.7-26.1-26.1 0-8.1 3.7-15.3 9.4-20.1-.3-.9-.6-1.8-1-2.7-22.2-1-44.4-4-66.3-8.9v.1c-4.9 21.9-7.8 44.1-8.8 66.3-.9.4-1.8.7-2.7 1-4.8-5.8-12-9.5-20.1-9.5-14.4 0-26.1 11.7-26.1 26.1 0 14.4 11.7 26.1 26.1 26.1 8.1 0 15.3-3.7 20.1-9.5.9.3 1.8.6 2.7 1 1 22.3 4 44.5 8.8 66.3v.1c21.9-5 44.1-7.9 66.3-8.9z"/>
</clipPath>
<clipPath id='piece6'>
<path id="piece6" fill="#D6694F" d="M128 392.2c.4-.9.7-1.8 1-2.7-5.8-4.8-9.4-12-9.4-20.1 0-14.4 11.7-26.1 26.1-26.1 14.4 0 26.1 11.7 26.1 26.1 0 8.1-3.7 15.3-9.4 20.1.3.9.6 1.8 1 2.7 22.2 1 44.4 4 66.3 8.9 4.9-21.9 7.8-44.1 8.9-66.4.9-.4 1.8-.7 2.7-1 4.8 5.8 12 9.5 20.1 9.5 14.4 0 26.1-11.7 26.1-26.1 0-14.4-11.7-26.1-26.1-26.1-8.1 0-15.3 3.7-20.1 9.5-.9-.3-1.8-.6-2.7-1-1-22.3-4-44.5-8.9-66.4-21.9 4.9-44 7.8-66.3 8.9-.4.9-.7 1.8-1 2.7 5.8 4.8 9.4 12 9.4 20.1 0 14.4-11.7 26.1-26.1 26.1-14.4 0-26.1-11.7-26.1-26.1 0-8.1 3.7-15.3 9.4-20.1-.3-.9-.6-1.8-1-2.7-22.2-1-44.4-4-66.3-8.9v.1c-4.9 21.9-7.8 44.1-8.8 66.3-.9.4-1.8.7-2.7 1-4.8-5.8-12-9.5-20.1-9.5C15.7 290.9 4 302.5 4 317c0 14.4 11.7 26.1 26.1 26.1 8.1 0 15.3-3.7 20.1-9.5.9.3 1.8.6 2.7 1 1 22.3 4 44.5 8.8 66.3v.1c21.9-4.9 44.1-7.8 66.3-8.8z"/>
</clipPath>
<clipPath id='piece7'>
<path id="piece7" fill="#F2F0E9" d="M220.8 166.5c-.9-.4-1.8-.7-2.7-1-4.8 5.8-12 9.5-20.1 9.5-14.4 0-26.1-11.7-26.1-26.1s11.7-26.1 26.1-26.1c8.1 0 15.3 3.7 20.1 9.5.9-.3 1.8-.6 2.7-1 1-22.3 4-44.5 8.8-66.4-21.9-4.9-44-7.8-66.3-8.9-.4-.9-.7-1.8-1-2.7 5.8-4.8 9.4-12 9.4-20.1 0-14.4-11.7-26.1-26.1-26.1-14.4 0-26.1 11.7-26.1 26.1 0 8.1 3.7 15.3 9.4 20.1-.3.9-.6 1.8-1 2.7-22.3 1-44.4 4-66.3 8.9 4.9 21.9 7.8 44.1 8.8 66.4.9.4 1.8.7 2.7 1 4.8-5.8 12-9.5 20.1-9.5 14.4 0 26.1 11.7 26.1 26.1s-11.6 26.1-26 26.1c-8.1 0-15.3-3.7-20.1-9.5-.9.3-1.8.6-2.7 1-1 22.3-4 44.5-8.8 66.4h.1c21.8 4.9 44 7.8 66.2 8.9.4.9.7 1.8 1 2.7-5.8 4.8-9.4 12-9.4 20.1 0 14.4 11.7 26.1 26.1 26.1 14.4 0 26.1-11.7 26.1-26.1 0-8.1-3.7-15.3-9.4-20.1.3-.9.6-1.8 1-2.7 22.2-1 44.4-4 66.2-8.9h.1c-5-21.9-7.9-44.1-8.9-66.4z"/>
</clipPath>
<clipPath id='piece8'>
<path id="piece8" fill="#E4BE69" d="M388.7 334.6c-.9-.4-1.8-.7-2.7-1-4.8 5.8-12 9.5-20.1 9.5-14.4 0-26.1-11.7-26.1-26.1 0-14.4 11.7-26.1 26.1-26.1 8.1 0 15.3 3.7 20.1 9.5.9-.3 1.8-.6 2.7-1 1-22.3 4-44.5 8.9-66.4-.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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