使用Vue完成拼图游戏（数字和图片两种类型）

                      使用Vue完成拼图游戏（数字和图片两种类型）

一 数字类型

1.先创建一个基本的格式，:class 里面的hide 控制隐藏样式

<template>
	<view class="pages">
		<view class="body">
			<block v-for="( item , index) in lists" :key="index">
				<view class="list" @click="ti(index)" :class="{'hide' : item.id == 8}">
					{
  {item.id}}
				</view>
			</block>
		</view>
	</view>
</template>

 2.拼图显示数字的时候 lists里面的对象属性可以写{id:'',ishide:''}   ，id唯一 ，ishide后面用来判断是否是隐藏（更容易理解）

拼图显示图片需要{id:'',ishide:'',imgurl:''}，imgurl后面为接收图片路径。

shang(),xia(),zuo(),you()，四个方法用来判断点击时候所点击数附近是否有满足条件的。

romnumber() 把lists打乱随机不重复重新赋予给原来的lists  

this.$forceUpdate()  强制刷新vue渲染  

panduan()  判断lists里面的对象的id 看顺序是否是满足递增（打个比方）如：1.2.3.4.5.6.7.8.9 满足的时候 不满足结束循环，

每次点击拼图上面的数字触发一次，如果满足 设变量接受 a=true 下面判断 a的值。

<script>
	export default {
		data:() => ({
			lists:[
				{id:0 , ishide : false},
				{id:1 , ishide : false},
				{id:2 , ishide : false},
				{id:3 , ishide : false},
				{id:4 , ishide : false},
				{id:5 , ishide : false},
				{id:6 , ishide : false},
				{id:7 , ishide : false},
				{id:8 , ishide : true},
			],
			numlist:[],
			a:'',
		}),
		mounted() {
			this.romnumber()
		},
		methods:{
			shang( e