gsap实现拼图游戏代码-html代码-BFW代码库

gsap实现拼图游戏代码

代码语言：html

所属分类：游戏

代码描述：gsap实现拼图游戏代码

代码标签：游戏

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


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

<head>

  <meta charset="UTF-8">


  
<style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%);
}

.puzzle {
  --puzzle-width: 16rem;
  --puzzle-height: 24rem;
  --puzzle-row: 3;
  --puzzle-col: 4;
  --puzzle-gap: 1px;
  --puzzle-frag-width: calc(var(--puzzle-width) / var(--puzzle-col));
  --puzzle-frag-height: calc(var(--puzzle-height) / var(--puzzle-row));
  --puzzle-img: url(//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png);
  display: flex;
  flex-wrap: wrap;
  width: calc(var(--puzzle-width) + calc(var(--puzzle-col) * var(--puzzle-gap) * 2));
  height: calc(var(--puzzle-height) + calc(var(--puzzle-row) * var(--puzzle-gap) * 2));
}
.puzzle .fragment {
  --x-offset: calc(var(--x) * var(--puzzle-frag-width) * -1);
  --y-offset: calc(var(--y) * var(--puzzle-frag-height) * -1);
  width: var(--puzzle-frag-width);
  height: var(--puzzle-frag-height);
  order: var(--order);
  margin: var(--puzzle-gap);
  background: var(--puzzle-img) var(--x-offset) var(--y-offset)/var(--puzzle-width) var(--puzzle-height) no-repeat;
  border-radius: 10px;
}
</style>



</head>

<body translate="no" >
  <div class="puzzle"></div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.5.2.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Draggable.js"></script>
<script src='//repo.bfw.wiki/bfwrepo/js/dat.gui.min.js'></script>
  
      <script>
const shuffle = ([...arr]) => {
  let m = arr.length;
  while (m) {
    const i = Math.floor(Math.random() * m--);
    [arr[m], arr[i]] = [arr[i], arr[m]];
  }
  return arr;
};

const sleep = (time) => new Promise((resolve) => setTimeout(resolve, time));

class Puzzle {
  constructor(el, width = 16, height = 24, row = 3, col = 3, gap = 1) {
    this.el = el;
    this.fragments = el.children;
    this.width = width;
    this.height = height;
    this.row = row;
    this.col = col;
    this.gap = gap;
  }

  // 创建拼图
  create() {
    this.ids = [...Array(this.row * this.col).keys()];
    const puzzle = this.el;
    const fragments = this.fragments;
    if (fragments.length) {
      Array.from(fragments).forEach((item) => item.remove());
    }
    puzzle.style.setProperty("--puzzle-width", this.width + "rem");
    puzzle.style.setProperty("--puzzle-height", this.height + "rem");
    puzzle.style.setProperty("--puzzle-row", this.row);
    puzzle.style.setProperty("--puzzle-col", this.col);
    puzzle.style.setProperty("--puzzle-gap", this.gap + "px");
    for (let i = 0; i < this.row; i++) {
      for (let j = 0; j < this.col; j++) {
        const fragment = document.createElement("div");
        fragment.className = "fragment";
        fragment.style.setProperty(&q.........完整代码请登录后点击上方下载按钮下载查看