I am participating in the Mid-Autumn Festival Creative Submission contest, please see: Mid-Autumn Festival Creative Submission Contest for details

preface

Before doing many H5 mini game activities, suddenly found the Mid-Autumn Festival, then put together a Chang ‘e, here I talk about the puzzle ideas, the complete version of the puzzle mini game including placement, rotation, replacement, a little more function, here extract the core part to explain.

Examples of effects:

Game ideas

The upper board is divided into placing areas, each small square as a list of 16, the lower fragment area is a whole drag list of 1.

So how to set the upper checkerboard background? It can be decomposed into a transparent chang ‘e original image at the lower level and a checkerboard background image at the upper level.

// 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 (checkerboard 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 (Chang 'e img); background-size: cover; opacity:0.2;
  z-index: -1;
}
Copy the code

Drag using vue.draggable component, after the shard drag is placed, the checkerboard list receives coordinates X, Y and Angle D, shard hidden

/ / board
list: [{arr: []},// 16 arRs to receive data. ]/ / board 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>
Copy the code

If the length of the current ARR list is >1, it will be replaced. If the length is <1, it will be placed. The coordinate and Angle of the fragment will be transmitted to ARR, and the fragment can be hidden.

Simple to understand

It can be understood as 16 columns of checkerboard and 1 column of shard are being dragged and exchanged. After being dragged, animation is added according to specific business logic to simplify the demo example

Afterword.

Small game play features including placement, exchange, Angle transformation and so on, here due to too much business code, only out of the core ideas of code, such a Mid-Autumn Festival chang ‘e puzzle came out.

If it is of help to you, please click like and leave a message to support, thank you.

Of course, the Mid-Autumn Festival is coming soon. Maybe you will work overtime to write small games!