微信小游戏入门案例——拼图游戏

逃离我推掉我的手 2022-12-16 13:03 489阅读 0赞

微信小游戏入门案例——拼图游戏

涉及内容:canvas组件、小程序界面绘图API

目录结构：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlYXRoZXI_size_16_color_FFFFFF_t_70

pages\game\game.js

  1. // pages/game/game.js
  2. // 方块的初始位置
  3. var num = [
  4.   ['00', '01', '02'],
  5.   ['10', '11', '12'],
  6.   ['20', '21', '22']
  7. ]
  9. // 方块的宽度
  10. var w = 100
  12. // 图片的初始地址
  13. var url = '/images/pic01.jpg'
  15. Page({
  17.   /**
  18.    * 页面的初始数据
  19.    */
  20.   data: {
  21.     isWin: false
  23.   },
  25.   /**
  26.    * 自定义函数--随机打乱方块顺序
  27.    */
  28.   shuffle: function() {
  29.     // 先令所有方块回归初始位置
  30.     num = [
  31.       ['00', '01', '02'],
  32.       ['10', '11', '12'],
  33.       ['20', '21', '22']
  34.     ]
  36.     // 记录当前空白方块的行和列
  37.     var row = 2
  38.     var col = 2
  40.     // 随机打乱方块顺序100次
  41.     for (var i = 0; i < 100; i++) {
  42.       // 随机生成一个方向：上0,下1,左2,右3
  43.       var direction = Math.round(Math.random() * 3)
  45.       // 上：0
  46.       if (direction == 0) {
  47.         // 空白方块不能在最上面一行
  48.         if (row != 0) {
  49.           // 交换位置
  50.           num[row][col] = num[row - 1][col]
  51.           num[row - 1][col] = '22'
  53.           // 更新空白方块的行
  54.           row -= 1
  55.         }
  56.       }
  58.       // 下：1
  59.       if (direction == 1) {
  60.         // 空白方块不能在最下面一行
  61.         if (row != 2) {
  62.           // 交换位置
  63.           num[row][col] = num[row + 1][col]
  64.           num[row + 1][col] = '22'
  66.           // 更新空白方块的行
  67.           row += 1
  68.         }
  69.       }
  71.       // 左：2
  72.       if (direction == 2) {
  73.         // 空白方块不能在最左边一列
  74.         if (col != 0) {
  75.           // 交换位置
  76.           num[row][col] = num[row][col - 1]
  77.           num[row][col - 1] = '22'
  79.           // 更新空白方块的列
  80.           col -= 1
  81.         }
  82.       }
  84.       // 右：3
  85.       if (direction == 3) {
  86.         // 空白方块不能在最右边一列
  87.         if (col != 2) {
  88.           // 交换位置
  89.           num[row][col] = num[row][col + 1]
  90.           num[row][col + 1] = '22'
  92.           // 更新空白方块的列
  93.           col += 1
  94.         }
  95.       }
  97.     }
  99.   },
  101.   /**
  102.    * 自定义函数--绘制画布内容
  103.    */
  104.   drawCanvas: function() {
  105.     let ctx = this.ctx
  107.     // 清空画布
  108.     ctx.clearRect(0, 0, 300, 300)
  110.     // 使用双重for循环语句绘制3x3拼图
  111.     for (var i = 0; i < 3; i++) {
  112.       for (var j = 0; j < 3; j++) {
  113.         if (num[i][j] != '22') {
  114.           // 获取行和列
  115.           var row = parseInt(num[i][j] / 10)
  116.           var col = num[i][j] % 10
  118.           // 绘制方块
  119.           ctx.drawImage(url, col * w, row * w, w, w, j * w, i * w, w, w)
  120.         }
  121.       }
  122.     }
  124.     ctx.draw()
  125.   },
  127.   /**
  128.    * 自定义函数--监听点击方块事件
  129.    */
  130.   touchBox: function(e) {
  131.     // 如果游戏已经成功，不做任何操作
  132.     if (this.data.isWin) {
  133.       // 终止本函数
  134.       return
  135.     }
  137.     // 获取被点击方块的坐标x和y
  138.     var x = e.changedTouches[0].x
  139.     var y = e.changedTouches[0].y
  140.     // console.log('x:'+x+',y:'+y)
  142.     // 换算成行和列
  143.     var row = parseInt(y / w)
  144.     var col = parseInt(x / w)
  146.     // 如果点击的不是空白位置
  147.     if (num[row][col] != '22') {
  148.       // 尝试移动方块
  149.       this.moveBox(row, col)
  151.       // 重新绘制画布内容
  152.       this.drawCanvas()
  154.       // 判断游戏是否成功
  155.       if (this.isWin()) {
  156.         // 在画面上绘制提示语句
  157.         let ctx = this.ctx
  159.         // 绘制完整图片
  160.         ctx.drawImage(url, 0, 0)
  162.         // 绘制文字
  163.         ctx.setFillStyle('#e64340')
  164.         ctx.setTextAlign('center')
  165.         ctx.setFontSize(60)
  166.         ctx.fillText('游戏成功', 150, 150)
  167.         ctx.draw()
  168.       }
  169.     }
  170.   },
  172.   /**
  173.    * 自定义函数--移动被点击的方块
  174.    */
  175.   moveBox: function(i, j) {
  176.     // 情况1：如果被点击的方块不在最上方，检查可否上移
  177.     if (i > 0) {
  178.       // 如果方块的上方是空白
  179.       if (num[i - 1][j] == '22') {
  180.         // 交换当前被点击的方块和空白的位置
  181.         num[i - 1][j] = num[i][j]
  182.         num[i][j] = '22'
  183.         return
  184.       }
  185.     }
  187.     // 情况2：如果被点击的方块不在最下方，检查可否下移
  188.     if (i < 2) {
  189.       // 如果方块的下方是空白
  190.       if (num[i + 1][j] == '22') {
  191.         // 交换当前被点击的方块和空白的位置
  192.         num[i + 1][j] = num[i][j]
  193.         num[i][j] = '22'
  194.         return
  195.       }
  196.     }
  198.     // 情况3：如果被点击的方块不在最左侧，检查可否左移
  199.     if (j > 0) {
  200.       // 如果方块的左侧是空白
  201.       if (num[i][j - 1] == '22') {
  202.         // 交换当前被点击的方块和空白的位置
  203.         num[i][j - 1] = num[i][j]
  204.         num[i][j] = '22'
  205.         return
  206.       }
  207.     }
  209.     // 情况4：如果被点击的方块不在最右侧，检查可否右移
  210.     if (j < 2) {
  211.       // 如果方块的右侧是空白
  212.       if (num[i][j + 1] == '22') {
  213.         // 交换当前被点击的方块和空白的位置
  214.         num[i][j + 1] = num[i][j]
  215.         num[i][j] = '22'
  216.         return
  217.       }
  218.     }
  219.   },
  221.   /**
  222.    * 自定义函数--判断游戏是否成功
  223.    */
  224.   isWin: function() {
  225.     // 使用双重for循环检查整个数组
  226.     for (var i = 0; i < 3; i++) {
  227.       for (var j = 0; j < 3; j++) {
  228.         // 如果有方块位置不对
  229.         if (num[i][j] != i * 10 + j) {
  230.           // 返回假，游戏尚未成功
  231.           return false
  232.         }
  233.       }
  234.     }
  236.     // 游戏成功，更新状态
  237.     this.setData({
  238.       isWin: true
  239.     })
  240.     // 返回真，游戏成功
  241.     return true
  242.   },
  244.   /**
  245.    * 自定义函数--重新开始游戏
  246.    */
  247.   restartGame: function() {
  248.     // 更新游戏状态
  249.     this.setData({
  250.       isWin: false
  251.     })
  253.     // 打乱方块顺序
  254.     this.shuffle()
  256.     // 绘制画布内容
  257.     this.drawCanvas()
  258.   },
  260.   /**
  261.    * 生命周期函数--监听页面加载
  262.    */
  263.   onLoad: function(options) {
  264.     // console.log(options.level)
  266.     // 更新图片路径地址
  267.     url = '/images/' + options.level
  268.     // 更新提示图的地址
  269.     this.setData({
  270.       url: url
  271.     })
  273.     // 创建画布上下文
  274.     this.ctx = wx.createCanvasContext("myCanvas")
  276.     // 打乱方块顺序
  277.     this.shuffle()
  279.     // 绘制画布内容
  280.     this.drawCanvas()
  281.   },
  283.   /**
  284.    * 生命周期函数--监听页面初次渲染完成
  285.    */
  286.   onReady: function() {
  288.   },
  290.   /**
  291.    * 生命周期函数--监听页面显示
  292.    */
  293.   onShow: function() {
  295.   },
  297.   /**
  298.    * 生命周期函数--监听页面隐藏
  299.    */
  300.   onHide: function() {
  302.   },
  304.   /**
  305.    * 生命周期函数--监听页面卸载
  306.    */
  307.   onUnload: function() {
  309.   },
  311.   /**
  312.    * 页面相关事件处理函数--监听用户下拉动作
  313.    */
  314.   onPullDownRefresh: function() {
  316.   },
  318.   /**
  319.    * 页面上拉触底事件的处理函数
  320.    */
  321.   onReachBottom: function() {
  323.   },
  325.   /**
  326.    * 用户点击右上角分享
  327.    */
  328.   onShareAppMessage: function() {
  330.   }
  331. })

pages\game\game.wxml

  1. <view class="container">
  2.   <view class="title">
  3.     提示图
  4.   </view>
  5.   <image src="{
  6.     {url}}"></image>
  7.   <canvas canvas-id="myCanvas" bindtouchstart="touchBox"></canvas>
  8.   <button type="warn" bindtap="restartGame">重新开始</button>
  9. </view>

pages\game\game.wxss

  1. /* pages/game/game.wxss */
  2. /* 提示图 */
  3. image{
  4.   width: 250rpx;
  5.   height: 250rpx;
  6. }
  8. /* 游戏画布区域 */
  9. canvas{
  10.   border: 1rpx solid;
  11.   width: 300px;
  12.   height: 300px;
  13. }

pages\index\index.js

  1. Page({
  3.   /**
  4.    * 页面的初始数据
  5.    */
  6.   data: {
  7.     levels:[
  8.       'pic01.jpg',
  9.       'pic02.jpg',
  10.       'pic03.jpg',
  11.       'pic04.jpg',
  12.       'pic05.jpg',
  13.       'pic06.jpg',
  15.     ]
  16.   },
  17.   chooseLevel:function(e){
  18.     let level = e.currentTarget.dataset.level
  19.     wx.navigateTo({
  20.       url: '../game/game?level='+level,
  21.     })
  22.   },
  24.   /**
  25.    * 生命周期函数--监听页面加载
  26.    */
  27.   onLoad: function (options) {
  29.   },
  31.   /**
  32.    * 生命周期函数--监听页面初次渲染完成
  33.    */
  34.   onReady: function () {
  36.   },
  38.   /**
  39.    * 生命周期函数--监听页面显示
  40.    */
  41.   onShow: function () {
  43.   },
  45.   /**
  46.    * 生命周期函数--监听页面隐藏
  47.    */
  48.   onHide: function () {
  50.   },
  52.   /**
  53.    * 生命周期函数--监听页面卸载
  54.    */
  55.   onUnload: function () {
  57.   },
  59.   /**
  60.    * 页面相关事件处理函数--监听用户下拉动作
  61.    */
  62.   onPullDownRefresh: function () {
  64.   },
  66.   /**
  67.    * 页面上拉触底事件的处理函数
  68.    */
  69.   onReachBottom: function () {
  71.   },
  73.   /**
  74.    * 用户点击右上角分享
  75.    */
  76.   onShareAppMessage: function () {
  78.   }
  79. })

pages\index\index.wxml

  1. <view class="container">
  2.   <view class="title">
  3.     游戏选关
  4.   </view>
  6.   <view class="levelBox">
  7.     <view class="box" wx:for="{
  8.     {levels}}" wx:key="levels{
  9.     {index}}" bindtap="chooseLevel" data-level="{
  10.     {item}}">
  11.       <image src="/images/{
  12.     {item}}"></image>
  13.       <text>第{
  14.     {index+1}}关</text>
  15.     </view>
  16.   </view>
  17. </view>

pages\index\index.wxss

  1. /**index.wxss**/
  2. /* 关卡区域列表 */
  3. .levelBox{
  4.   width: 100%;
  5. }
  7. /* 单个关卡区域 */
  8. .box{
  9.   width: 50%;
  10.   float: left;
  11.   margin: 25rpx 0;
  12.   display: flex;
  13.   flex-direction: column;
  14.   align-items: center;
  15. }
  17. /* 选关图片 */
  18. image{
  19.   width: 260rpx;
  20.   height: 260rpx;
  21. }

app.json

  1. {
  2.   "pages":[
  3.     "pages/index/index",
  4.     "pages/game/game"
  5.   ],
  6.   "window":{
  7.     "backgroundTextStyle":"light",
  8.     "navigationBarBackgroundColor": "#E64340",
  9.     "navigationBarTitleText": "拼图游戏",
  10.     "navigationBarTextStyle":"black"
  11.   },
  12.   "style": "v2",
  13.   "sitemapLocation": "sitemap.json"
  14. }

app.wxss

  1. /**app.wxss**/
  2. /* 页面容器样式 */
  3. .container{
  4.   height: 100vh;
  5.   color: #e64340;
  6.   font-weight: bold;
  7.   display: flex;
  8.   flex-direction: column;
  9.   align-items: center;
  10.   justify-content: space-evenly;
  11. }
  13. /* 顶端标题样式 */
  14. .title{
  15.   font-size: 18pt;
  16. }

app.js

  1. App({
  3.   /**
  4.    * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
  5.    */
  6.   onLaunch: function () {
  8.   },
  10.   /**
  11.    * 当小程序启动，或从后台进入前台显示，会触发 onShow
  12.    */
  13.   onShow: function (options) {
  15.   },
  17.   /**
  18.    * 当小程序从前台进入后台，会触发 onHide
  19.    */
  20.   onHide: function () {
  22.   },
  24.   /**
  25.    * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
  26.    */
  27.   onError: function (msg) {
  29.   }
  30. })

运行截图；

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlYXRoZXI_size_16_color_FFFFFF_t_70 1watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlYXRoZXI_size_16_color_FFFFFF_t_70 2

发表评论

表情：
评论列表 （有 0 条评论，489人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Java（拼图小游戏）

    目录 一、主界面分析： 二、逻辑处理 三、文件目录 四、代码 （一）游戏界面 （二）登录界面 （三）注册界面 （四）测试类代码 五、实现效果 ----

    桃扇骨桃扇骨/ 0 赞/ 199 阅读

    相关 拼图游戏

    [拼图游戏][Link 1] 本文讨论如何判断拼图游戏中图形是否可以还原。 例1：下图是一个3X3的数字拼图。 <table style="width: 30%;"

    - 日理万妓- 日理万妓/ 0 赞/ 341 阅读