# 项目简介
## 项目来源
我本人耍了很多密室逃脱类型的解谜游戏，所以个人倾向于自己制作一款。
拼图游戏在解密谜题小游戏里面非常常见，所以我想自己写一个模块，来为未来的密室逃脱游戏开发做铺垫。

## 其他游戏项目
1. 第一弹[简单扫雷游戏](https://ext.dcloud.net.cn/plugin?id=4710),获得2021Dcloud插件大赛贡献奖
2. 第二弹[简单卡牌游戏](https://ext.dcloud.net.cn/plugin?id=4724),获得2021Dcloud插件大赛贡献奖
3. 第三弹[简单俄罗斯方块游戏](https://ext.dcloud.net.cn/plugin?id=4741),获得2021Dcloud插件大赛贡献奖
4. 第四弹[简单数字游戏集合](https://ext.dcloud.net.cn/plugin?id=4749),获得2021Dcloud插件大赛贡献奖

另附[2021年Dcloud插件大赛获奖结果](https://ask.dcloud.net.cn/article/39133)

# 项目玩法
## 滑动拼图
游戏中一张图片被分割为多个图块，这些图块按照向上向下向左向右的方式进行打乱，玩家通过移动图块对原始图片进行还原。

**控制方式**：上下左右滑动游戏区域，或点击下方按钮
![滑动拼图](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-513d9aa0-6203-43b2-b630-c2b7ad89c3c7/3be38050-dceb-4450-a33b-bb8a26737b11.png)

## 旋转拼图
游戏中一张图片被分割为多个围绕同一圆心的环形图块，这些图块按照不同的旋转角度进行打乱，玩家通过旋转图块对原始图片进行还原。

**控制方式**：选中图层左右滑动旋转图层到合适位置
![旋转拼图](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-513d9aa0-6203-43b2-b630-c2b7ad89c3c7/48412c70-0f76-450e-ae3b-b8ec24526ab9.png)

## 拖动拼图
游戏中一张图片被分割为多个图块，这些图块打乱后排列在下方，玩家通过移动图块对原始图片进行还原。

**控制方式**：长按选中并拖动下方的图块到地图区域放置，致歉：目前对于已拖动到地图的图块无法再次拖动，也无法删除，如果需要置换其他图块，请将目标图块再次拖动到该区域完成交换，替换的图块会被重新放置到下方。
![拖动拼图](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-513d9aa0-6203-43b2-b630-c2b7ad89c3c7/f7a6e595-1238-4e2c-8b39-a0722ab33f67.png)

## 魔方拼图
游戏中的图片依照向上下左右平移的方式进行打乱，玩家通过点击四周的方向键移动图块复原图片

**控制方式**：点击四周的方向键移动图块复原图片
![魔方拼图](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-513d9aa0-6203-43b2-b630-c2b7ad89c3c7/c1205989-d51d-4076-833c-7ba210abc265.png)

# 插件说明
## 插件引用方式
```
// index.vue
<templete>
	<puzzle gameType="slice"></puzzle>
</templete>

<script>
	import puzzle from '@/uni_modules/gwh-jigsaw_puzzle/components/gwh-jigsaw_puzzle/gwh-jigsaw_puzzle.vue'
	export default{
		components:{
			puzzle
		},
		// do something else 
	}
</script>
```

## 参数说明
### 公共参数
| 参数 | 类型 | 值域 | 说明 |
| :-: | :-: | :-: | :- |
| gameType | `String` | ['slice','rotate','move','cube'] | 拼图游戏类型 | 
| mapWidth | Number | 0~750 | 地图边缘宽度（单位：upx） | 
| sourseImg | String | - | 拼图图片地址 |
| @init | Function | {mapblocks} | 地图生成时触发，返回地图图块属性 |
| @change | Function | {mapblocks} | 移动一步后触发，返回地图图块属性 |
| @success | Function | {mapblocks} | 游戏完成时触发，返回地图图块属性 |

### 私有参数
#### 滑动拼图模式
`gameType = 'slice'`

| 参数 | 类型 | 值域/返回值 | 说明 |
| :-: | :-: | :-: | :- |
| mapSize | Array | [Number,Number] | 拼图分割成多少图块，[2,3]代表图块是width=2, height=3，`地图边缘高度=mapWidth*mapSize[1]/mapSize[0]` |
| initChangeSteps | Number | - | 游戏开始时，拼图打乱的轮次 |

#### 旋转拼图模式
`gameType = 'rotate'`

| 参数 | 类型 | 值域/返回值 | 说明 |
| :-: | :-: | :-: | :- |
| mapSize | Array | [Number] | 拼图分割成多少层图块，[2]代表有两层环形，为保证游戏性，该值须大于2 |

#### 拖动拼图模式
`gameType = 'move'`

| 参数 | 类型 | 值域/返回值 | 说明 |
| :-: | :-: | :-: | :- |
| mapSize | Array | [Number,Number] | 拼图分割成多少图块，[2,3]代表图块是width=2, height=3，`地图边缘高度=mapWidth*mapSize[1]/mapSize[0]` |

#### 魔方拼图模式
`gameType = 'cube'`

| 参数 | 类型 | 值域/返回值 | 说明 |
| :-: | :-: | :-: | :- |
| mapSize | Array | [Number,Number] | 拼图分割成多少图块，[2,3]代表图块是width=2, height=3，`地图边缘高度=mapWidth*mapSize[1]/mapSize[0]` |
| initChangeSteps | Number | - | 游戏开始时，拼图打乱的轮次 |