├── app.wxss ├── pages └── index │ ├── index.json │ ├── index.wxml │ ├── index.wxss │ └── index.js ├── app.js ├── app.json ├── utils └── util.js ├── project.config.json └── README.md /app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | -------------------------------------------------------------------------------- /pages/index/index.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | 4 | }) -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "pages/index/index" 4 | ], 5 | "window":{ 6 | "backgroundTextStyle":"light", 7 | "navigationBarBackgroundColor": "#fff", 8 | "navigationBarTitleText": "拼图", 9 | "navigationBarTextStyle":"black" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /utils/util.js: -------------------------------------------------------------------------------- 1 | const formatTime = date => { 2 | const year = date.getFullYear() 3 | const month = date.getMonth() + 1 4 | const day = date.getDate() 5 | const hour = date.getHours() 6 | const minute = date.getMinutes() 7 | const second = date.getSeconds() 8 | 9 | return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 10 | } 11 | 12 | const formatNumber = n => { 13 | n = n.toString() 14 | return n[1] ? n : '0' + n 15 | } 16 | 17 | module.exports = { 18 | formatTime: formatTime 19 | } 20 | -------------------------------------------------------------------------------- /pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 智力拼图 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | {{time}}秒 13 | 14 | 15 | -------------------------------------------------------------------------------- /project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件。", 3 | "packOptions": { 4 | "ignore": [] 5 | }, 6 | "setting": { 7 | "urlCheck": true, 8 | "es6": true, 9 | "postcss": true, 10 | "minified": true, 11 | "newFeature": true 12 | }, 13 | "compileType": "miniprogram", 14 | "libVersion": "2.2.1", 15 | "appid": "wxa10e47c51d2045f2", 16 | "projectname": "jigsaw", 17 | "isGameTourist": false, 18 | "condition": { 19 | "search": { 20 | "current": -1, 21 | "list": [] 22 | }, 23 | "conversation": { 24 | "current": -1, 25 | "list": [] 26 | }, 27 | "game": { 28 | "currentL": -1, 29 | "list": [] 30 | }, 31 | "miniprogram": { 32 | "current": -1, 33 | "list": [] 34 | } 35 | } 36 | } -------------------------------------------------------------------------------- /pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | .title{ 3 | text-align:center; 4 | font-size:28rpx; 5 | line-height:3; 6 | } 7 | .container{ 8 | width:744rpx; 9 | height:744rpx; 10 | background:#fff; 11 | overflow: hidden; 12 | } 13 | .btn{ 14 | width:248rpx; 15 | height:248rpx; 16 | line-height:248rpx; 17 | color:#666; 18 | font-size:124rpx; 19 | } 20 | 21 | .active{ 22 | color:transparent!important; 23 | background:transparent!important; 24 | } 25 | 26 | .row{ 27 | width:33.33333%; 28 | float:left; 29 | } 30 | 31 | .init{ 32 | text-align:center; 33 | } 34 | 35 | .init button{ 36 | width:50%; 37 | display:inline-block 38 | } 39 | 40 | .time{ 41 | color:#333; 42 | font-size:42rpx; 43 | line-height:2; 44 | width:100%; 45 | display:inline-block; 46 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 思路&功能： 2 | 1.初始化，将数字1~8存放在数组中，随机打乱后拼接一个9(空白格),修改空白格的样式 3 | 2.点击数字，判断空白格对于其所在位置的方向，进行相应的上下左右移动 4 | 3.上下左右移动，及把移动的两个数字互换在数组中的位置 5 | 4.判断数组中元素是否是[1,2,3,4,5,6,7,8,9]，是则游戏成功， 6 | 5.计时，利用定时器，结束，清除定时器 7 | 8 | 代码： 9 | 10 | 项目中所用到的数据：data: { 11 | num: ['★', '★', '★', '★', '★', '★', '★', '★', '★'], //初始化前 12 | hidden: true, //隐藏空白格中的数字 13 | time:0, //秒数 14 | t:'' //定时器 15 | }, 16 | 构建页面：index.wxml 17 | 18 | 19 | 20 | 21 | 22 | 23 | 需要传两个数据过去，一个是被点击块的下标index和块中的数字item动态为空白格[9]添加样式active{{item == 9?'active':''}} 24 | 25 | 游戏初始化： 26 | init:function(){ 27 | this.setData({ 28 | num:this.sortArr([1,2,3,4,5,6,7,8]).concat([9]) 29 | }) 30 | }, 31 | 32 | 初始化的时候，这里用了sortArr(arr)打乱数组，并拼接个空白格[9]，这样让空白格初始化的时候永远处于最后一位。 33 | 34 | 35 | 随机打乱数组: 36 | sortArr: function (arr) { 37 | return arr.sort(function () { 38 | return Math.random() - 0.5 39 | }) 40 | } 41 | 42 | 这里用了最简单的打乱方法，缺点就是打乱不完全 43 | 44 | 给每个块添加点击事件 45 | 46 | onMoveTap:onMoveTap: function (e) { 47 | var index = e.currentTarget.dataset.index; 48 | var item = e.currentTarget.dataset.item; 49 | if (this.data.num[index + 3] == 9) { 50 | this.down(e); 51 | } 52 | if (this.data.num[index - 3] == 9) { 53 | this.up(e); 54 | } 55 | if (this.data.num[index + 1] == 9 && index != 2 && index != 5) { 56 | this.right(e); 57 | } 58 | if (this.data.num[index - 1] == 9 && index != 3 & index != 6) { 59 | this.left(e); 60 | } 61 | } 62 | 如果空白格的下标比所点击的块的下表大3，则表示空白格在所点击块的下方，那么点击后向下移动； 63 | 如果空白格的下标比所点击的块的下表小3，则表示空白格在所点击块的上方，那么点击后向上移动； 64 | 如果空白格的下标比所点击的块的下表大1，则表示空白格在所点击块的右方，那么点击后向右移动，需考虑点击快是否在容器右边缘； 65 | 如果空白格的下标比所点击的块的下表小1，则表示空白格在所点击块的左方，那么点击后向左移动，需考虑点击快是否在容器左边缘； 66 | 67 | 移动：以向上移动举例 68 | up: function (e) { 69 | var index = e.currentTarget.dataset.index; //当前数字下标 70 | var temp = this.data.num[index]; 71 | this.data.num[index] = this.data.num[index - 3] 72 | this.data.num[index - 3] = temp; 73 | this.setData({ 74 | num: this.data.num 75 | }) 76 | if (this.data.num.toString() == [1, 2, 3, 4, 5, 6, 7, 8, 9].toString()) { 77 | this.success(); 78 | } 79 | } 80 | 81 | 移动后，将所点击块与空白格互换在数组中的位置，并判断目前的数组是否满足游戏成功的条件，判断数组相等，我这里把数组转化成字符串做的比较 82 | 83 | 游戏成功： 84 | success: function () { 85 | var that = this; 86 | wx.showToast({ 87 | title: '闯关成功', 88 | icon: 'success', 89 | success: function () { 90 | that.init(); 91 | } 92 | }) 93 | } 94 | 游戏成功，弹出交互反馈窗口，并初始化重新打乱数组 95 | 96 | 定时器： timeCount:function(){ 97 | var that = this; 98 | var timer = that.data.time; 99 | that.setData({ 100 | t:setInterval(function(){ 101 | timer++; 102 | that.setData({ 103 | time:timer 104 | }) 105 | },1000) 106 | }) 107 | } 108 | 109 | 开始结束游戏： 110 | timeBegin:function(){ 111 | clearInterval(this.data.t); 112 | this.setData({ 113 | time:0 114 | }) 115 | this.timeCount(); 116 | this.init(); 117 | }, 118 | timeStop:function(){ 119 | clearInterval(this.data.t); 120 | if (this.data.num.toString() != [1, 2, 3, 4, 5, 6, 7, 8, 9].toString()) { 121 | this.fail(); 122 | } 123 | } 124 | 125 | 给开始按钮绑定timeBegin事件，初始化游戏给结束按钮绑定timeStop事件，判断是否游戏成功 126 | 127 | -------------------------------------------------------------------------------- /pages/index/index.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | //获取应用实例 3 | const app = getApp() 4 | 5 | Page({ 6 | data: { 7 | num: ['★', '★', '★', '★', '★', '★', '★', '★', '★'], 8 | hidden: true, 9 | success: '', 10 | time:0, 11 | t:'' //定时器 12 | }, 13 | onLoad: function () { 14 | 15 | }, 16 | //随机打乱数组 17 | sortArr: function (arr) { 18 | return arr.sort(function () { 19 | return Math.random() - 0.5 20 | }) 21 | }, 22 | onMoveTap: function (e) { 23 | var index = e.currentTarget.dataset.index; 24 | var item = e.currentTarget.dataset.item; 25 | if (this.data.num[index + 3] == 9) { 26 | this.down(e); 27 | } 28 | if (this.data.num[index - 3] == 9) { 29 | this.up(e); 30 | } 31 | if (this.data.num[index + 1] == 9 && index != 2 && index != 5) { 32 | this.right(e); 33 | } 34 | if (this.data.num[index - 1] == 9 && index != 3 & index != 6) { 35 | this.left(e); 36 | } 37 | }, 38 | up: function (e) { 39 | var index = e.currentTarget.dataset.index; //当前数字下标 40 | var temp = this.data.num[index]; 41 | this.data.num[index] = this.data.num[index - 3] 42 | this.data.num[index - 3] = temp; 43 | this.setData({ 44 | num: this.data.num 45 | }) 46 | if (this.data.num.toString() == [1, 2, 3, 4, 5, 6, 7, 8, 9].toString()) { 47 | this.success(); 48 | } 49 | }, 50 | down: function (e) { 51 | var index = e.currentTarget.dataset.index; //当前数字下标 52 | var temp = this.data.num[index]; 53 | this.data.num[index] = this.data.num[index + 3] 54 | this.data.num[index + 3] = temp; 55 | this.setData({ 56 | num: this.data.num 57 | }) 58 | if (this.data.num.toString() == [1, 2, 3, 4, 5, 6, 7, 8, 9].toString()) { 59 | this.success(); 60 | } 61 | }, 62 | left: function (e) { 63 | var index = e.currentTarget.dataset.index; //当前数字下标 64 | var temp = this.data.num[index]; 65 | this.data.num[index] = this.data.num[index - 1] 66 | this.data.num[index - 1] = temp; 67 | this.setData({ 68 | num: this.data.num 69 | }) 70 | if (this.data.num.toString() == [1, 2, 3, 4, 5, 6, 7, 8, 9].toString()) { 71 | this.success(); 72 | } 73 | }, 74 | right: function (e) { 75 | var index = e.currentTarget.dataset.index; //当前数字下标 76 | var temp = this.data.num[index]; 77 | this.data.num[index] = this.data.num[index + 1] 78 | this.data.num[index + 1] = temp; 79 | this.setData({ 80 | num: this.data.num 81 | }) 82 | if (this.data.num.toString() == [1, 2, 3, 4, 5, 6, 7, 8, 9].toString()) { 83 | this.success(); 84 | } 85 | }, 86 | success: function () { 87 | var that = this; 88 | that.setData({ 89 | success: 'you win !' 90 | }) 91 | wx.showToast({ 92 | title: '闯关成功', 93 | icon: 'success', 94 | success: function () { 95 | that.init(); 96 | } 97 | }) 98 | }, 99 | fail: function () { 100 | var that = this; 101 | that.setData({ 102 | success: 'you lost !' 103 | }) 104 | wx.showToast({ 105 | title: '闯关失败', 106 | icon: 'loading', 107 | success: function () { 108 | that.init(); 109 | } 110 | }) 111 | }, 112 | //初始化拼图 113 | init:function(){ 114 | this.setData({ 115 | num:this.sortArr([1,2,3,4,5,6,7,8]).concat([9]) 116 | }) 117 | }, 118 | timeCount:function(){ 119 | var that = this; 120 | var timer = that.data.time; 121 | that.setData({ 122 | t:setInterval(function(){ 123 | timer++; 124 | that.setData({ 125 | time:timer 126 | }) 127 | },1000) 128 | }) 129 | }, 130 | timeBegin:function(){ 131 | clearInterval(this.data.t); 132 | this.setData({ 133 | time:0 134 | }) 135 | this.timeCount(); 136 | this.init(); 137 | }, 138 | timeStop:function(){ 139 | clearInterval(this.data.t); 140 | if (this.data.num.toString() != [1, 2, 3, 4, 5, 6, 7, 8, 9].toString()) { 141 | this.fail(); 142 | } 143 | } 144 | }) --------------------------------------------------------------------------------