VUE实现的简单拼图游戏

写在前面

最近玩游戏的时候玩到游戏内置的拼图小游戏，突然唤起我对拼图游戏的热爱了，结果这内置游戏要花钱，在steam上找到的免费拼图游戏也不能自定义图片，想玩其他的图还要花钱。这让我很不爽，就索性自己写一个拼图游戏。
但是要说明的是，我做出的拼图游戏是非常简单的版本，甚至也不能算是个拼图，因为它的具体样子是这样的

这游戏的玩法是把拼图块以正确的方式放入正确的卡槽中的，拼图块还是正方形的（正在考虑如何做成真实的那种拼图块），也没有相互关联的拼图块拼成一个的时候，可以一起移动的效果。非要说跟拼图游戏有什么关系的话那就是都是以图片为线索拼接出一个完整图片。

1. 页面结构
   页面结构很简单，左侧卡槽区，右侧拼图区，右上角缩略图区

  <div class="pintu_area">
    <div v-for="(part, index) in partList" :key="'part' + index" class="pintu_part"></div>
    <div v-for="(img, index) in imgList" :key="index" :style="randomStyle(img)" class="part_img"
        @mousedown="moveImg($event,index)" @contextmenu.prevent="rotateImg($event, index)">
    </div>
    <img class="thumb" :src="image">
    <input type="file" accept=".jpg,.png" @change="chooseImg($event)" title="点击更换图片">
  </div>

2. 样式效果

  .pintu_area {
   
    display: flex;
    flex-wrap: wrap;
    width: 800px;
    height: 600px;
    background-color: rgba(0, 0, 0, 0.4);
  }

  .pintu_part {
   
    width: 100px;
    height: 100px;
    border: 1px solid #fff;
  }

  .part_img {
   
    width: 100px;
    height: 100px;
    background-size: 800px 600px;
    position: absolute;
  }

  .thumb,
  input {
   
    width: 200px;
    height: 150px;
    position: absolute;
    top: 0;
    right: 0;
  }

  input {
   
    opacity: 0;
  }

  @keyframes checked {
   
    50% {
   
      box-shadow: 0 0 20px #ffff00;