Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "WeChat Mini Programs's method of realizing the jigsaw puzzle". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "WeChat Mini Programs's method of realizing the jigsaw puzzle" can help you solve your doubts. Let's follow the editor's ideas slowly and deeply, and let's learn new knowledge together.

Page display

Project link

WeChat Mini Programs realizes the jigsaw puzzle

Project design

First page

Wxml

Game selection {{index+1}}

Wxss

/ * * index.wxss**//* checkpoint area list * / .levelBox {width: 100%;} / * single level area * / .box {width: 50%; float: left; margin: 25rpx 0; display: flex; flex-direction: column; align-items: center;} / * selected picture * / image {width: 260rpx; height: 260rpx } / / index.jsPage (initial data of {/ * page * / data: {levels: ["pic01.jpg", "pic02.jpg", "pic03.jpg", "pic04.jpg", "pic05.jpg", "pic06.jpg"]]} / * Custom function-- Game selection * / chooseLevel: function (e) {/ / console.log (e.currentTarget.dataset.level) / / get the selection image let level= e.currentTarget.dataset.level / / jump game page wx.navigateTo ({url: ". / game/game?level=" + level,})},})

Game page

Wxml

Prompt the diagram to start over

Wxss

/ * pages/game/game.wxss * / / * prompt * / image {width: 250rpx; height: 250rpx;} / * Game canvas area * / canvas {border: 1rpx solid; width: 300px; height: 300px;}

Js

/ / initial position of pages/game/game.js// box var num = [["00", "01", "02"], ["10", "11", "12"], ["20", "21" "22"]] / / the width of the square var w = 100max / the initial address of the picture var url = "/ images/pic01.jpg" Page (initial data of the {/ * page * / data: {isWin: false} / * Custom function-randomly disturbs the order of squares * / shuffle: function () {/ / all squares return to the initial position num = [["00", "01", "02"], ["10", "11", "12"], ["20", "21" "22"]] / / record the rows and columns of the current blank square var row = 2 var col = 2 / / randomly disturb the square order 100 times for (var I = 0 I

< 100; i++) { // 随机生成一个方向：上0,下1,左2,右3 var direction = Math.round(Math.random() * 3) // 上：0 if (direction == 0) { // 空白方块不能在最上面一行 if (row != 0) { // 交换位置 num[row][col] = num[row - 1][col] num[row - 1][col] = "22" // 更新空白方块的行 row -= 1 } } // 下：1 if (direction == 1) { // 空白方块不能在最下面一行 if (row != 2) { // 交换位置 num[row][col] = num[row + 1][col] num[row + 1][col] = "22" // 更新空白方块的行 row += 1 } } // 左：2 if (direction == 2) { // 空白方块不能在最左边一列 if (col != 0) { // 交换位置 num[row][col] = num[row][col - 1] num[row][col - 1] = "22" // 更新空白方块的列 col -= 1 } } // 右：3 if (direction == 3) { // 空白方块不能在最右边一列 if (col != 2) { // 交换位置 num[row][col] = num[row][col + 1] num[row][col + 1] = "22" // 更新空白方块的列 col += 1 } } } }, /** * 自定义函数--绘制画布内容 */ drawCanvas: function() { let ctx = this.ctx // 清空画布 ctx.clearRect(0, 0, 300, 300) // 使用双重for循环语句绘制3x3拼图 for (var i = 0; i < 3; i++) { for (var j = 0; j < 3; j++) { if (num[i][j] != "22") { // 获取行和列 var row = parseInt(num[i][j] / 10) var col = num[i][j] % 10 // 绘制方块 ctx.drawImage(url, col * w, row * w, w, w, j * w, i * w, w, w) } } } ctx.draw() }, /** * 自定义函数--监听点击方块事件 */ touchBox: function(e) { // 如果游戏已经成功，不做任何操作 if (this.data.isWin) { // 终止本函数 return } // 获取被点击方块的坐标x和y var x = e.changedTouches[0].x var y = e.changedTouches[0].y // console.log("x:"+x+",y:"+y) // 换算成行和列 var row = parseInt(y / w) var col = parseInt(x / w) // 如果点击的不是空白位置 if (num[row][col] != "22") { // 尝试移动方块 this.moveBox(row, col) // 重新绘制画布内容 this.drawCanvas() // 判断游戏是否成功 if (this.isWin()) { // 在画面上绘制提示语句 let ctx = this.ctx // 绘制完整图片 ctx.drawImage(url, 0, 0) // 绘制文字 ctx.setFillStyle("#e64340") ctx.setTextAlign("center") ctx.setFontSize(60) ctx.fillText("游戏成功", 150, 150) ctx.draw() } } }, /** * 自定义函数--移动被点击的方块 */ moveBox: function(i, j) { // 情况1：如果被点击的方块不在最上方，检查可否上移 if (i >

0) {/ / if there is a blank if at the top of the square (num [I-1] [j] = "22") {/ / swap the current clicked square and blank position num [I-1] [j] = num [I] [j] num [I] [j] = "22" return}} / / case 2 If the box clicked is not at the bottom Check whether the if can be moved down (I

< 2) { // 如果方块的下方是空白 if (num[i + 1][j] == "22") { // 交换当前被点击的方块和空白的位置 num[i + 1][j] = num[i][j] num[i][j] = "22" return } } // 情况3：如果被点击的方块不在最左侧，检查可否左移 if (j >

0) {/ / if the left side of the square is blank if (num [I] [j-1] = "22") {/ / swap the current clicked square and blank location num [I] [j-1] = num [I] [j] num [I] [j] = "22" return}} / / case 4 If the box clicked is not on the far right Check if if (j < 2) {/ / if the right side of the square is blank if (num [I] [j + 1] = "22") {/ / swap the current clicked square and blank position num [I] [j + 1] = num [I] [j] num [I] [j] = "22" return} / * Custom function-- determine whether the game is successful * / isWin: function () {/ / use a double for loop to check the entire array for (var I = 0) I < 3; iTunes +) {for (var j = 0; j < 3) If (num [I] [j]! = I * 10 + j) {/ / returns false, the game is not successful return false} / / the game is successful, update status this.setData ({isWin: true}) / / returns true Game success return true}, / * Custom function-restart the game * / restartGame: function () {/ / update game status this.setData ({isWin: false}) / / disrupt the order of boxes this.shuffle () / / draw canvas content this.drawCanvas ()} / * Life cycle function-- load the listening page * / onLoad: function (options) {/ / console.log (options.level) / / update the image path address url = "/ images/" + options.level / / update the address of the prompt diagram this.setData ({url: url}) / / create a canvas context this.ctx = wx.createCanvasContext ("myCanvas") / / disrupt the order of squares this.shuffle () / / draw canvas content this.drawCanvas ()} / * Lifecycle function-first rendering of listening page completed * / onReady: function () {}, / * Lifecycle function-listening page display * / onShow: function () {}, / * Lifecycle function-listening page hiding * / onHide: function () {} / * Lifecycle function-listens to page unload * / onUnload: function () {}, / * page related event handler-listens to user drop-down action * / onPullDownRefresh: function () {}, / * Handler function for pull-down event on page * / onReachBottom: function () {} / * users click on the upper right corner to share * / onShareAppMessage: function () {}}) to read here This article "WeChat Mini Programs's method of realizing the jigsaw puzzle" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about the article, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.