背景以及最终效果

随着几个项目的提测，也闲下来了，恰好玩了一把拼图游戏，于是突发奇想打算自己写一个试试。
在线体验

实现的功能有：

  1. 普通拼图的功能
  2. 自动拼图

本部分是这篇文章的第一部分，主要讲的是实现普通拼图的功能。

原理

相信拼图的玩法大家一点都不陌生，就是点击一个非空的块，如果它的周围有空的块，被点击的块就会往空块的方向移动。如果最后的排列是[1,2,3,4,5,6,7,8,0],则过关。
于是总结一下，我们需要做的事包括以下几个：

  1. 使用Vue
  2. 页面布局
  3. 打乱
  4. 点击和移动
  5. 判断有没有过关

具体步骤

清楚了具体要做的事，那就一件一件跟着做就好了。

使用Vue

直接使用vue-cli脚手架工具安装即可。

  • 1.安装

npm install -g @vue/cli

  • 2.创建一个项目

vue create hello-world

页面布局

html

<template>
    <div class="box">
        <transition-group name="cell" tag="div" class="container">
            <div
                @click.prevent="clickBlock(index)"
                v-for="(puzzle,index) in puzzles"
                :key="puzzle"
                v-text="puzzle"
                :class="puzzle === ''? 'cell cells':'cell'"
            ></div>
        </transition-group>
    </div>
</template>

css

<style>
.box {
    width: 400px;
    margin: 60px auto 0;
}

.container {
    display: flex;
    flex-wrap: wrap;
    width: 306px;
    margin-top: 10px;
    border: 1px solid #ccc;
}
.cell {
    color: #fff;
    font-size: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100px;
    height: 100px;
    margin: 1px;
    -moz-box-shadow: 0px 0px 3px #333333;
    -webkit-box-shadow: 0px 0px 3px #333333;
    box-shadow: 0px 0px 3px #333333;
    background-color: #996666;
}
.cells {
    background-color: #fff;
    -moz-box-shadow: 0px 0px 0px #333333;
    -webkit-box-shadow: 0px 0px 0px #333333;
    box-shadow: 0px 0px 0px #333333;
    z-index: -999;
}
.cell-move {
    transition: transform 0.5s;
}
</style>

有一点需要注意的是我在页面中是使用Vue的列表的排序过渡动画，效果看起来挺不错的。<transition-group> 组件有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需了解新增的 v-move 特性，它会在元素的改变定位的过程中应用。像之前的类名一样，可以通过 name 属性来自定义前缀，也可以通过 move-class 属性手动设置。详细使用情况请看：
https://cn.vuejs.org/v2/guide/transitions.html

js部分则需要在data属性中定义一个数组，methods中需要定义一个渲染函数，mounted中则是执行这个渲染函数：

data() {
  return {
    puzzles: []
  };
},
rander() {
  this.puzzles = [1,2,3,4,5,6,7,8,'']
},
mounted() {
  this.rander();
}

现在我们来看一下效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o4vQH8cB-1578640484937)(http://www.caomage.com/wp-content/uploads/2019/03/2-296x300.jpg)]

打乱

现在给这个拼图加个打乱的按钮。

<button @click="shuffle">重置</button>

然后在methods中定义一个‘shuffle’函数，负责打乱整个拼图：

shuffle() {
  this.puzzles = _.shuffle(this.puzzles);
},

其中_.shuffle是lodash的打乱数组函数，当然不喜欢这个库的话也可以自己写一个打乱函数。
然后我们再看看效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cZYuIQuq-1578640484937)(http://www.caomage.com/wp-content/uploads/2019/03/3.gif)]

有一个需要注意的点：我们写的打乱函数打乱的拼图其实不一定都是可以复原的。能不能复原需要用专门的算法计算出来，我会在下一篇文章讲到。

点击和移动

这个地方稍微复杂一点，具体过程就是当点击某个块的时候获取点击快上下左右的值，如果空白块在点击快的左边，并且点击快不是此列的第一个，则点击块往左侧和空白块交换位置，其实是交换值。
具体的代码如下：

// 点击方块
clickBlock(index) {
  let curIndex = this.puzzles[index];
  let leftIndex = this.puzzles[index - 1];
  let rightIndex = this.puzzles[index + 1];
  let topIndex = this.puzzles[index - 3];
  let bottomIndex = this.puzzles[index + 3];

  if (leftIndex === '' && index % 3) {
    this.$set(this.puzzles, index - 1, curIndex);
    this.$set(this.puzzles, index, '');
  } else if (rightIndex === '' && 2 !== index % 3) {
    this.$set(this.puzzles, index + 1, curIndex);
    this.$set(this.puzzles, index, '');
  } else if (topIndex === '') {
    this.$set(this.puzzles, index - 3, curIndex);
    this.$set(this.puzzles, index, '');
  } else if (bottomIndex === '') {
    this.$set(this.puzzles, index + 3, curIndex);
    this.$set(this.puzzles, index, '');
  }
}

可以点击之后再来看看效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3kXTAey7-1578640484938)(http://www.caomage.com/wp-content/uploads/2019/03/4.gif)]

判断有没有过关

判断有没有过关的条件是：

  1. 最后一块是空
  2. 前面8个是从1-8顺序排列
pass() {
  if (this.puzzles[8] === '') {
    const newPuzzles = this.puzzles.slice(0, 8);
    const isPass = newPuzzles.every((e, i) => e === i + 1);
    if (isPass) {
      alert('666！');
    }
  }
}