gsap+Draggable实现拖拽拼图小游戏代码-html代码-BFW代码库

gsap+Draggable实现拖拽拼图小游戏代码

代码语言：html

所属分类：游戏

代码描述：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.........完整代码请登录后点击上方下载按钮下载查看