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

代码语言：html
所属分类：游戏
代码描述：gsap实现多阶拼图游戏代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@900&display=swap" rel="stylesheet">



    <style>
        html,
        body {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
          height: 100%;
        }
        
        *,
        *:before,
        *:after {
          box-sizing: border-box;
        }
        
        svg {
          max-width: 100%;
          display: block;
          pointer-events: none;
        }
        
        button {
          all: unset;
          z-index: 10;
          color: white;
          border-radius: 0.5rem;
          font-family: Playfair Display;
          font-size: 1.5rem;
          cursor: pointer;
        }
        button span {
          pointer-events: none;
        }
        
        .hidden {
          opacity: 0;
        }
        
        body {
          --body-color: hsl(220, 80%, 15%);
          --section-color: hsl(220, 75%, 13%);
          overflow-x: hidden;
          max-width: 70rem;
          margin-inline: auto;
          display: grid;
          gap: 1.15rem;
          grid-auto-rows: 1fr;
          grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
          background: #e9effb;
          padding: 5vh 3vw;
        }
        body.full {
          grid-auto-columns: 1fr;
          grid-template-columns: unset;
        }
        
        .preview,
        .buttons,
        .puzzle,
        .close {
          display: none;
        }
        
        section {
          --url: "";
          --square: 40px;
          --size: 3;
          --left: 2 / 4;
          --right: 11 / -1;
          overflow: hidden;
          position: relative;
          perspective: 800px;
          box-shadow: 0 0 5px black;
          background: linear-gradient(34deg, #081d4a 0%, #092052 16%, #0a245a 33%, #0b2762 50%, #0c2a6a 66%, #0d2e72 83%, #0f317a 100%);
          display: grid;
          grid-template-columns: 1fr;
          grid-template-rows: 1fr;
          place-items: center;
          column-gap: 1.25rem;
        }
        section > * {
          grid-area: 1/1/-1/-1;
        }
        section.selected {
          grid-row: 1/6;
          grid-column: span 3;
          grid-template-columns: repeat(13, 1fr);
          grid-template-rows: repeat(13, 1fr);
        }
        section.selected .title {
          grid-column: var(--left);
          grid-row: 1/4;
        }
        section.selected .close {
          grid-column: var(--right);
          grid-row: 1/4;
        }
        section.selected .buttons {
          grid-column: var(--left);
          grid-row: 7;
        }
        section.selected .preview {
          grid-column: var(--right);
          grid-row: 7;
        }
        
        .close {
          height: 3vmin;
          width: 3vmin;
        }
        .close > svg {
          fill: white;
        }
        
        .preview {
          height: 10vmin;
          width: 10vmin;
          background: var(--url);
          background-size: contain;
          background-repeat: no-repeat;
        }
        
        .title {
          --transition: transform 1s cubic-bezier(0.87, 0, 0.13, 1);
          position: relative;
          display: grid;
          grid-template-columns: 1fr;
          grid-template-rows: 1fr;
          place-items: center;
          filter: drop-shadow(0 0 15px black);
        }
        .title > span {
          position: absolute;
          top: -50%;
          font-size: clamp(1.3rem, 1rem + 5vw, 3.5rem);
          text-shadow: 1px 1px 5px black;
          transition: var(--transition);
        }
        .title:hover .grid {
          transform: rotate3d(1, 1, 1, 45deg) skew(150deg) rotate(360deg);
        }
        .title:hover > span {
          transform: translateY(-10px);
        }
        
        .grid {
          --grid: 60px;
          --rotate: 0deg;
          height: var(--grid);
          width: var(--grid);
          pointer-events: none;
          display: grid;
          grid-template-columns: repeat(var(--size), 1fr);
          grid-template-rows: repeat(var(--size), 1fr);
          transform: rotate3d(1, 1, 1, 45deg) skew(150deg) rotate(var(--rotate));
          transition: var(--transition);
        }
        .grid > span {
          filter: drop-shadow(0 0 1px black);
          border: 2px solid var(--section-color);
        }
        
        .buttons {
          display: grid;
          gap: 1rem;
          opacity: 0;
        }
        .buttons > button {
          height: 3vmin;
          width: 3vmin;
        }
        
        .puzzle {
          display: grid;
          grid-template-columns: repeat(var(--size), var(--square));
          grid-template-rows: repeat(var(--size), var(--square));
          gap: 0.35rem;
        }
        .puzzle .tile {
          background-image: var(--url);
          box-shadow: 0 0 5px black;
        }
    </style>



</head>

<body>
    <!--  Easy -->

    <section class="easy" data-level="easy">

        <button class="close" data-level="easy">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
    </svg>

  </button>

        <button class="title" data-level="easy">
    <div class="grid"></div>
    <span>3x3</span>
  </button>

        <div class="puzzle"></div>
        <div class="preview"></div>

        <div class="buttons">
            <button class="start">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    </button>
            <button class="reset">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
      </svg>
    </button>
        </div>

    </section>

    <!-- medium -->
    <section class="medium" data-level="medium">

        <button class="close" data-level="medium">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
    </svg>

  </button>

        <button class="title" data-level="medium">
    <div class="grid"></div>
    <span>4x4</span>
  </button>

        <div class="puzzle"></div>
        <div class="preview"></div>

        <div class="buttons">
            <button class="start">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    </button>
            <button class="reset">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
      </svg>
    </button>
        </div>

    </section>

    <!-- hard -->
    <section class="hard" data-level="hard">

        <button class="close" data-level="hard">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
    </svg>

  </button>

        <button class="title" data-level="hard">

    <div class="grid"></div>
    <span>5x5</span>
  </button>

        <div class="puzzle"></div>
        <div class="preview"></div>

        <div class="buttons">
            <button class="start">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    </button>
            <button class="reset">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
      </svg>
    </button>
        </div>

    </section>

    <!-- extreme  -->
    <section class="extreme" data-level="extreme">

        <button class="close" data-level="extreme">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
    </svg>

  </button>

        <button class="title" data-level="extreme">
    <div class="grid"></div>
    <span>6x6</span>
  </button>

        <div class="puzzle"></div>
        <div class="preview"></div>

        <div class="buttons">
            <button class="start">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    </button>
            <button class="reset">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M4 2a.........完整代码请登录后点击上方下载按钮下载查看