gsap+Draggable实现拖拽拼图小游戏代码
代码语言：html
所属分类：游戏
代码描述：gsap+Draggable实现拖拽拼图小游戏代码
代码标签： gsap Draggable 拖拽 拼图 小游戏 代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: #000;
}
.puzzle {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body translate="no">
<svg class="puzzle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 285 200">
<rect class="box" width="125" height="100" opacity="0.5" style="mix-blend-mode:overlay" />
<use class="endImg" href="#imgSrc" opacity="0" />
<g class="pieces"></g>
<path d="M24.72 24.61h-9.15c-.61-.04-1.55-.81-1.12-1.46 3.17-2.97 2.37-6.77-2.14-7.11-4.12.09-5.42 4.23-2.27 6.86.65.79-.31 1.8-1.19 1.72-2.95-.03-5.9-.01-8.85-.01V.01h24.75c.04 2.93-.02 5.86-.03 8.79-.01 1.09 1.33 2.39 2.29 1.55 1.62-1.99 4.85-2.65 6 .18 1.79 4.38-2.7 7.76-6.03 3.82-1.23-.86-2.41.89-2.27 2.05.05 2.75 0 5.46.01 8.22Z" />
<path d="M25.07 24.7c-.05-2.99 0-5.99-.03-8.98.11-.61.71-1.35 1.36-1.24 1.48.66 2.57 2.44 4.41 1.95 1.84-.43 3.12-2.47 2.96-4.31-.37-3.95-4.33-5.14-6.9-2.03-.89.66-1.89-.5-1.84-1.43.04-2.87.01-5.75.02-8.62C33.13.03 41.16.06 49.22.02c.46 0 .49.04.49.49 0 2.78-.02 5.56.01 8.34-1.03 4.44-3.83-3.48-7.49.56-2.47 2.4-.63 7.73 3.06 7 1.35-.13 2.55-2.66 3.87-1.67 1.23 1.33.25 7.46.56 9.69 0 .26-.1.32-.33.32-2.82-.02-5.63-.04-8.45-.04-1.02.02-2.45 1.36-1.47 2.32 1.12 1.15 2.33 2.92 1.38 4.53-3.3 4.53-10.43-.26-5.47-4.54 1.01-1.2-.63-2.38-1.8-2.33-2.84.04-5.66.01-8.51.02Z" />
<path d="M62.45.01h11.51c.88 0 .87 0 .87.88-.41 1.77 1.28 10.4-1.76 9.24-3.26-3.66-7.59-1.38-6.86 3.24.66 3.32 4.26 4.04 6.39 1.51.83-.89 2.2-.2 2.23 1 .02 2.85-.04 5.71.02 8.55.02.27-.1.3-.3.29-2.85-.11-5.7-.02-8.55-.06-1.08-.04-2.34 1.21-1.6 2.22 2.85 2.34 2.09 6.27-1.83 6.44-3.56.18-5.31-3.59-2.43-6.03 1.12-1.08.27-2.39-1.12-2.61-2.87-.01-5.75 0-8.63.02-.23 0-.33-.07-.32-.3.09-2.85.03-5.7.04-8.55-.02-.97-1.24-2.31-2.21-1.54-2.93 3.39-7.16 1.5-6.35-2.93.71-3.46 4.23-3.48 6.3-1.04 3.6 1.96 1.87-8.23 2.24-10.1 0-.2.07-.25.27-.25l12.08.02Z" />
<path d="M75.19.01h24.79v8.75c0 .97 1.2 2.39 2.19 1.65 3.48-4.15 8.2-.34 5.97 4.08-1.43 2.6-4.07 1.7-5.94-.18-3.54-1.78-1.85 8.38-2.22 10.29h-9.15c-.59 0-.87-.47-1.12-.89-.09-1.45 2.38-2.41 2.03-4.23-1.6-7.03-12.56-2.14-6.26 3.73.37.75-.7 1.45-1.44 1.42-2.95-.04-5.89-.01-8.85-.02v-8.63c0-.75-.73-1.71-1.47-1.86-1.25.09-2.08 1.48-3.27 1.87-7.15.89-3.68-12.07 2.37-5.68 1.17.94 2.43-.65 2.38-1.84-.04-2.82-.01-5.64-.02-8.47Z" />
<path d="M100.31 24.61v-8.06c-.26-1.07.53-2.41 1.7-1.98.75.43 1.38 1.14 2.15 1.57 2.78 1.43 5.38-1.96 4.83-4.6-.55-3.37-4.45-4.41-6.56-1.65-.85.85-2.11-.02-2.15-1.13.01-2.93.04-5.8.04-8.73h24.72v24.59h-9.08c-.93-.04-1.61-1.22-.82-1.88 3.08-2.46 1.51-6.52-2.15-6.69-4.43-.02-5.73 4.1-2.45 7.06.5.74-.53 1.55-1.28 1.52-2.98-.03-5.96-.01-8.94-.01Z" />
<path d="M24.77 49.67c-3.04.05-6.07 0-9.12.02-.43 0-1.3-.66-1.28-1.07.62-1.8 3.06-3.21 1.71-5.38-3.12-5.28-11.47-.06-6.07 4.68.6.72-.11 1.76-.98 1.77H0V25.02c3.01.02 5.99-.03 8.99 0 1.16-.09 2.07-1.47 1.2-2.38-3.42-3.07-.85-7.13 3.4-6.05 2.6.44 3.28 3.97 1.29 5.56-3.9 4.25 7.29 2.51 9.24 2.84.32 0 .71-.04.66.4l-.03 8.31c0 .79-.65 1.64-1.32 1.63-1.46-.6-2.45-2.45-4.31-2-6.38 1.87-1.96 12.35 3.95 6.24 2.87-1.02 1.29 8.29 1.7 10.11Z" />
<path d="M25.05 49.67v-8.81c-.03-.74-1.1-2.11-1.92-1.68-.98.6-1.76 1.46-2.86 1.87-2.32.63-4.25-1.9-3.94-4.07.36-3.67 4.08-4.42 6.32-1.69 1.14.95 2.46-.52 2.42-1.73-.04-2.82-.01-5.63-.02-8.45 3.02.07 6.04-.01 9.06 0 .88 0 1.64 1.13.95 1.8-5.09 4.42 2.38 9.62 5.93 4.94 3.06-5.27-9.56-7.11 7.9-6.71.81 0 .81-.02.81.81.53 18.85-2.31 2.45-7.82 8.88-2.28 2.74.69 8.27 4.22 6.23 1.07-.85 3.19-2.85 3.6-.3v8.89c-2.75.04-5.5.04-8.25 0-1.27-.06-3.08 1.36-1.89 2.55 2.98 2.44 1.46 6.53-2.43 6.21-3.79-.26-4.48-3.93-1.8-6.25 1.05-1.03-.46-2.47-1.59-2.5-2.9 0-5.79.04-8.69 0Z" />
<path d="M74.83 49.68h-8.92c-.76 0-1.74 1-1.7 1.76.49 1.5 2.39 2.4 1.97 4.23-.25 1.66-1.93 2.74-3.55 2.76-3.63.22-5.3-3.57-2.51-5.98 1.25-1.16-.05-2.81-1.53-2.78-2.75.04-5.49.02-8.24.02-.16 0-.27 0-.26-.22.09-2.86.01-5.73.04-8.59-1.67-5.08-3.98 3.01-7.71-.75-2.54-2.6.21-8.29 3.84-6.04.94.58 1.99 2.26 3.14 1.16 1.54-1.55.38-7.44.71-9.9 0-.21.08-.25.27-.25 2.65.03 5.3.04 7.96.06.18 0 .36.03.53-.02 1.03-.26 1.96.98 1.18 1.84-1.84 1.77-2.52 4.23-.34 5.78 4.39 3.05 9.56-2.15 4.97-6.01-.59-.92.46-1.82 1.4-1.64l7.22.04c.48.12 1.55-.44 1.56.32.34 2.38-.97 8.83 1.02 9.94 1.73 1.23 3.96-4.8 7.24-.04 1.91 3.25-1.76 7.78-4.95 4.79-.61-.36-1.44-1.5-2.18-.89-.46.5-1.19.94-1.14 1.71-.03 2.9.07 5.81 0 8.7Z" />
<path d="M99.96 49.68h-8.71c-.71 0-1.74.8-1.91 1.5-.08 1.01 1.07 1.58 1.52 2.39 3.27 7.42-12.22 5.82-5.19-1.63.8-1.09-.93-2.35-2-2.27-2.83.04-5.65.01-8.49.02v-8.92c.07-.89 1.23-1.75 1.99-1.04 2.37 2.66 5.71 2.19 6.67-1.37.73-4.53-3.75-6.88-6.86-3.22-2.98 1.67-1.45-8.5-1.8-10.15h9.19c.78-.12 1.96-1.19 1.36-2.01-2.04-1.89-2.88-5.31.41-6.33 4.04-1.37 7.23 2.91 3.67 5.91-1.19 1.01.09 2.46 1.33 2.46 2.95-.03 5.88-.03 8.83-.04v8.96c-.06.81-1.02 1.88-1.87 1.12-1.51-1.67-4.07-2.7-5.75-.59-3.4 4.26 1.83 9.85 5.75 5.23.73-.63 1.83.16 1.86 1 0 3 .04 5.99-.01 8.99Z" />
<path d="M125.03 49.68h-8.96c-.85.01-1.64-.98-1.07-1.73 3.67-3.07 1.2-7.65-3.32-6.76-3.84 1.07-3.71 4.4-1.17 6.87.62.83-.66 1.69-1.48 1.64-2.92-.04-5.83-.01-8.75-.01-.04-2.94 0-5.88.04-8.82.01-.69-.93-1.67-1.42-1.76-.84 0-1.5.81-2.13 1.29-2.68 2.29-5.85-1.09-5.02-3.94.41-3.09 4.08-3.72 5.91-1.4 1.06 1.26 2.71.04 2.65-1.39-.04-2.89-.03-5.77-.04-8.66 3.05-.08 6.08 0 9.13-.03.84-.09 2.03-1.2 1.4-2.05-1.99-1.81-2.8-5.13.33-6.25 3.9-1.55 7.47 2.86 3.84 5.79-1.19 1.01-.1 2.47 1.2 2.53 2.96-.05 5.9.05 8.86-.06v24.73Z" />
<path d="M0 74.79V50.11h8.92c2.58-.85 1.62-2.21.26-3.72-1.47-1.69-.15-4.45 1.93-4.82 2.1-.43 4.86.36 4.95 2.88.5 2.18-3.78 3.73-1.02 5.42 2.95.62 6.19.06 9.23.24.53 0 .55.01.49.56-.08 2.79 0 5.59-.02 8.38.04 1.03 1.28 2.23 2.23 1.46 1.56-1.72 4.14-2.69 5.68-.51 2.21 2.84-.77 8.22-4.27 5.6-1.64-1.74-3.37-1.94-3.67.83.09 2.71-.06 5.42.07 8.13.02.22-.07.29-.28.29-1.53-.36-12.27 1.24-9.75-2.01 4.82-4.01-1.99-9.2-5.64-5.29a2.98 2.98 0 0 0-.17 4.11c1.11 1.19 2.29 2.84-.2 3.18-2.91-.03-5.82.02-8.73-.03Z" />
<path d="M49.84 74.8h-8.96c-.87.13-2.3 1.34-1.5 2.25 3.4 2.88 1.49 7.13-2.88 6.4-3.47-.62-3.5-4.2-1.13-6.25 1.01-1.04-.56-2.45-1.66-2.43-2.88.03-5.75.02-8.63.03-.05-3 0-6-.02-9 .05-.84 1.1-1.63 1.85-1.01 2.81 3.23 6.87 1.64 6.87-2.54-.35-4.04-4.37-5.15-6.95-2.02-.67.56-1.57-.37-1.76-1 .01-3.05-.03-6.1.01-9.14 2.86 0 5.72.04 8.58-.03.88-.02 2.18.89 1.53 1.77-1.65 1.77-2.88 4.12-.64 5.89 4.56 3.38 9.78-2.03 5.01-6.06-.44-.86.87-1.64 1.69-1.59 2.87.04 5.73 0 8.6 0v9.13c.05 1.11 1.48 2.03 2.32 1.14 3.12-3.97 7.68.02 5.84 3.96-.68 1.67-2.88 2.59-4.4 1.41-.72-.51-1.33-1.22-2.17-1.52-.88-.11-1.6.89-1.59 1.73.02 2.95 0 5.9.01 8.85Z" />
<path d="M50.12 74.79v-9.05c0-.79 1.01-1.47 1.62-1.07 1.2.74 2.15 2.17 3.72 1.9 2.34-.34 3.71-2.82 3.15-5.09-.88-3.51-4.37-4.05-6.61-1.37-.83.81-1.93-.21-1.89-1.18.03-2.94.01-5.89.01-8.83h8.93c.96.05 1.72 1.24.98 2-2.49 2.39-2.31 5.48 1.21 6.54 4.37 1.09 7.27-3.67 3.46-6.72-1.79-3.08 8.13-1.43 9.76-1.84.27 0 .39.03.39.36-.02 2.77-.02 5.54 0 8.31.04.88-.85 2.08-1.75 1.53-3.01-3.39-7.18-1.86-6.93 2.71.09 2.38 2.82 4.64 5.01 3.14 1.29-1.01 3.1-2.8 3.66-.09.01 2.83 0 5.66.02 8.49 0 .26-.09.31-.33.31l-8.59-.02c-.81 0-1.78 1-1.72 1.76.12.71.78 1.18 1.19 1.74 2.62 3.05-1.59 6.34-4.67 4.92-5.72-3.45 2.01-5.84-.71-7.89-2.11-1.27-7.19-.16-9.9-.54Z" />
<path d="M99.98 50.1v8.88c0 .68.72 1.6 1.4 1.7 1.64-.02 2.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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