更新记录

1.0.4(2021-06-29) 下载此版本

  1. 加入魔方拼图模块
  2. 更改滑动拼图描述

1.0.3(2021-06-25) 下载此版本

  1. 添加拖动拼图模式

1.0.2(2021-06-25) 下载此版本

  1. 更新滑动拼图操作模式,添加滑动操作
  2. 修改游戏完成时弹窗代码位置,改为由success函数触发
  3. 添加部分说明文档
查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

项目简介

项目来源

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

其他游戏项目

  1. 第一弹简单扫雷游戏,获得2021Dcloud插件大赛贡献奖
  2. 第二弹简单卡牌游戏,获得2021Dcloud插件大赛贡献奖
  3. 第三弹简单俄罗斯方块游戏,获得2021Dcloud插件大赛贡献奖
  4. 第四弹简单数字游戏集合,获得2021Dcloud插件大赛贡献奖

另附2021年Dcloud插件大赛获奖结果

项目玩法

滑动拼图

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

控制方式:上下左右滑动游戏区域,或点击下方按钮 滑动拼图

旋转拼图

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

控制方式:选中图层左右滑动旋转图层到合适位置 旋转拼图

拖动拼图

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

控制方式:长按选中并拖动下方的图块到地图区域放置,致歉:目前对于已拖动到地图的图块无法再次拖动,也无法删除,如果需要置换其他图块,请将目标图块再次拖动到该区域完成交换,替换的图块会被重新放置到下方。 拖动拼图

魔方拼图

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

控制方式:点击四周的方向键移动图块复原图片 魔方拼图

插件说明

插件引用方式

// 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 - 游戏开始时,拼图打乱的轮次

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问