H5小游戏嫦娥拼图

我正在参加中秋创意投稿大赛，详情请看：中秋创意投稿大赛

前言

之前做过多款H5小游戏活动，突然发现中秋节了，那就拼一个嫦娥吧，这里我讲下拼图思路吧，完整版的拼图小游戏包含放置，旋转，替换，功能有点多，这里抽取核心部分来讲解。

效果示例：

游戏思路

上部棋盘分为放置区域，每个小方格当做一个列表共16个，下部碎片区域整个是一个拖拽列表共1个。

那么上部棋盘背景如何设置呢？可以分解为下层是一个透明度的嫦娥原图，上层为一个棋盘背景图。

// html
<div class="puzzle-wrapper">
<ul class="puzzle-ul">
<div class="bg1 bg-opacity"></div>
<li></li>
</ul>
</div>

// style

.puzzle-wrapper {
  width: 691px;
  height: 729px;
  background: url(棋盘img);
  background-size: cover;
  text-align: left;
  position: relative;
  margin-left: 50px;
  }
  
.bg-opacity {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(嫦娥img);
  background-size: cover;
  opacity: 0.2;
  z-index: -1;
}

拖动使用的是vue.draggable组件,碎片拖动放置后，棋盘列表接收坐标x,y和角度d，碎片隐藏

// 棋盘
list: [
        {
          arr: []
        },
        // 16个arr去接收数据
        ...
      ]
// 棋盘html
<ul class="puzzle-ul" :class="over ? 'active' : ''">
        <div :class="['bg' + 1, 'bg-opacity']"></div>
        <li
          v-for="(item, index) in list"
          :key="index"
          :data-index="index + 1"
          class="puzzle-pic"
        >
          <draggable
            v-model="item.arr"
            group="people"
            @start="drag = true"
            @add="handdlerEnd(item, index)"
            @choose="choose"
            @unchoose="unchoose"
            :move="onMove"
            ghost-class="ghost"
            animation="300"
            class="dragger-box"
            filter="dragger-div"
            :preventOnFilter="true"
            :data-index="index"
          >
            <div>
              <a
                :class="[
                  'dragger-div',
                  'chosen' + item.arr[0].d,
                  'bpx' + item.arr[0].x,
                  'bpy' + item.arr[0].y
                ]"
                :style="{
                  'background-image': `url(${bgs[0]})`
                }"
                v-if="item.arr[0]"
              ></a>
            </div>
          </draggable>
        </li>
      </ul>
// 碎片html
<ul class="imgs-box">
      <div ref="imgsRef" class="imgs-content">
        <draggable
          v-model="arr100"
          group="people"
          @start="drag = true"
          :move="onMove"
          :scroll="false"
          class="imgs-dragger"
          animation="300"
        >
          <li v-for="(item, index) in pieces" :key="index">
            <div
              :class="[
                'chosen' + item.d,
                'bgItem',
                'bpx' + item.x,
                'bpy' + item.y
              ]"
              :style="{
                'background-image': `url(${bgs[0]})`
              }"
            ></div>
          </li>
        </draggable>
      </div>
    </ul>

当拖拽放置后触发add事件判断如果当前arr列表length>1则为替换，更换拖拽的元素坐标和角度数据，如果length<1则为放置，将碎片坐标和角度传输给arr，该碎片隐藏即可。

简单理解

可以理解为16列棋盘和1列碎片块在进行拖拽和数据交换，后续拖入后根据具体的业务逻辑来增加动画，简化demo示例

后记

小游戏玩法功能包括放置，交换，角度变换等等，这里由于业务代码太多，只抽离了核心思路代码，这样一个中秋嫦娥拼图就出来了。

如果对你有帮助，麻烦点赞加留言支持下，谢谢。

当然中秋节快来了产品说不定就要你加班写小游戏了！