vue制作3*3拼图

自从上次发布了vue制作抓娃娃机经验之后，好多朋友来私信我让我多分享一些小游戏的经验。（看来友友们对这种小游戏还是挺感兴趣哦_捂脸笑）
好了，回归正题。今天给大家带来一个比较简单的小游戏——拼图。想必大家平时或多或少都玩过拼图游戏吧，我记得小时候经常偷偷用我爸爸的手机玩上面的拼图小游戏，简单的有2×2，3×3甚至有4×4、5×5等等复杂的难关。作为玩者我们是在研究如何过关，而对于我们程序猿来说，我们是不是应该研究研究这些游戏怎么做出来的呢。今天它来啦~~
老样子，先看效果图。

首先介绍规则：3×3的方格中，有一处是空白，点击空白周围的卡片，使其移动，直至拼成最终效果图（页面下方有成品图，这里录gif的时候没带上）。
第一步，上样式：

      <div class="game">
        <ul class="puzzle-wrap">
          <li
            v-for="(puzzle, index) in puzzles"
            :key="puzzle.id"
            :class="{'puzzle': true, 'puzzle-empty': !puzzle}"
            @click="move(puzzle,index)"
          >