微信小程序——推箱子小游戏

ゞ浴缸里的玫瑰 2023-01-15 15:26 191阅读 0赞

### 文章目录 ###

*  项目展示
 *  项目链接
 *  项目设计
 *   *  配置
     *  首页
     *  游戏界面

# 项目展示 #

![在这里插入图片描述][20210423101420538.gif_pic_center]

# 项目链接 #

[https://download.csdn.net/download/weixin\_45525272/17061639][https_download.csdn.net_download_weixin_45525272_17061639]

# 项目设计 #

## 配置 ##

地图数据  
/utils/data.js

//================================================
    //地图数据map1-map4
    //地图数据：1墙，2路，3终点，4箱子，5人物，0墙的外围
    //================================================
    //关卡1
    var map1 = [
      [0, 1, 1, 1, 1, 1, 0, 0],
      [0, 1, 2, 2, 1, 1, 1, 0],
      [0, 1, 5, 4, 2, 2, 1, 0],
      [1, 1, 1, 2, 1, 2, 1, 1],
      [1, 3, 1, 2, 1, 2, 2, 1],
      [1, 3, 4, 2, 2, 1, 2, 1],
      [1, 3, 2, 2, 2, 4, 2, 1],
      [1, 1, 1, 1, 1, 1, 1, 1]
    ]
    //关卡2
    var map2 = [
      [0, 0, 1, 1, 1, 0, 0, 0],
      [0, 0, 1, 3, 1, 0, 0, 0],
      [0, 0, 1, 2, 1, 1, 1, 1],
      [1, 1, 1, 4, 2, 4, 3, 1],
      [1, 3, 2, 4, 5, 1, 1, 1],
      [1, 1, 1, 1, 4, 1, 0, 0],
      [0, 0, 0, 1, 3, 1, 0, 0],
      [0, 0, 0, 1, 1, 1, 0, 0]
    
    ]
    //关卡3
    var map3 = [
      [0, 0, 1, 1, 1, 1, 0, 0],
      [0, 0, 1, 3, 3, 1, 0, 0],
      [0, 1, 1, 2, 3, 1, 1, 0],
      [0, 1, 2, 2, 4, 3, 1, 0],
      [1, 1, 2, 2, 5, 4, 1, 1],
      [1, 2, 2, 1, 4, 4, 2, 1],
      [1, 2, 2, 2, 2, 2, 2, 1],
      [1, 1, 1, 1, 1, 1, 1, 1]
    ]
    //关卡4
    var map4 = [
      [0, 1, 1, 1, 1, 1, 1, 0],
      [0, 1, 3, 2, 3, 3, 1, 0],
      [0, 1, 3, 2, 4, 3, 1, 0],
      [1, 1, 1, 2, 2, 4, 1, 1],
      [1, 2, 4, 2, 2, 4, 2, 1],
      [1, 2, 1, 4, 1, 1, 2, 1],
      [1, 2, 2, 2, 5, 2, 2, 1],
      [1, 1, 1, 1, 1, 1, 1, 1]
    ]
    
    module.exports = { 
      maps: [map1, map2, map3, map4]
    }

## 首页 ##

wxml

<view class='container'>
      
      <view class='title'>游戏选关</view>
    
      
      <view class='levelBox'>
        <view class='box' wx:for='{ {levels}}' wx:key='levels{ {index}}' bindtap='chooseLevel' data-level='{ {index}}'>
          <image src='/images/{ {item}}'></image>
          <text>第{
       {index+1}}关</text>
        </view>
      </view>
    
    </view>

wxss

/* pages/menu/menu.wxss */
    
    /* 关卡列表区域 */
    .levelBox { 
      width: 100%;
    }
    
    /* 单个关卡区域 */
    .box { 
      width: 50%;
      float: left;
      margin: 20rpx 0;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    /* 选关图片 */
    image { 
      width: 300rpx;
      height: 300rpx;
    }

// pages/menu/menu.js
    Page({ 
    
      /** * 页面的初始数据 */
      data: { 
        levels: [
          'level01.png',
          'level02.png',
          'level03.png',
          'level04.png'
        ]
      },
    
      /** * 自定义函数--游戏选关 */
      chooseLevel: function(e) { 
        let level = e.currentTarget.dataset.level
        wx.navigateTo({ 
          url: '../game/game?level=' + level
        })
      },
    })

## 游戏界面 ##

wxml

<view class='container'>
      
      <view class='title'>第{
       {level}}关</view>
    
      
      <canvas canvas-id='myCanvas'></canvas>
    
      
      <view class='btnBox'>
        <button type='warn' bindtap='up'>↑</button>
        <view>
          <button type='warn' bindtap='left'>←</button>
          <button type='warn' bindtap='down'>↓</button>
          <button type='warn' bindtap='right'>→</button>
        </view>
      </view>
    
      
      <button type='warn' bindtap='restartGame'>重新开始</button>
    </view>

wxss

/**game.wxss**/
    /* 游戏画布样式 */
    canvas { 
      border: 1rpx solid;
      width: 320px;
      height: 320px;
    }
    
    /* 方向键按钮整体区域 */
    .btnBox { 
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    /* 方向键按钮第二行 */
    .btnBox view { 
      display: flex;
      flex-direction: row;
    }
    
    /* 所有方向键按钮 */
    .btnBox button { 
      width: 90rpx;
      height: 90rpx;
    }
    
    /* 所有按钮样式 */
    button { 
      margin: 10rpx;
    }

//game.js
    var data = require('../../utils/data.js')
    //地图图层数据
    var map = [
      [0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0]
    ]
    //箱子图层数据
    var box = [
      [0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0]
    ]
    //方块的宽度
    var w = 40
    //初始化小鸟的行与列
    var row = 0
    var col = 0
    
    Page({ 
    
      /** * 页面的初始数据 */
      data: { 
        level: 1
      },
    
      /** * 自定义函数--初始化地图数据 */
      initMap: function(level) { 
        // 读取原始的游戏地图数据
        let mapData = data.maps[level]
        //使用双重for循环记录地图数据
        for (var i = 0; i < 8; i++) { 
          for (var j = 0; j < 8; j++) { 
            box[i][j] = 0
            map[i][j] = mapData[i][j]
    
            if (mapData[i][j] == 4) { 
              box[i][j] = 4
              map[i][j] = 2
            } else if (mapData[i][j] == 5) { 
              map[i][j] = 2
              //记录小鸟的当前行和列
              row = i
              col = j
            }
          }
        }
      },
      /** * 自定义函数--绘制地图 */
      drawCanvas: function() { 
        let ctx = this.ctx
        //清空画布
        ctx.clearRect(0, 0, 320, 320)
        //使用双重for循环绘制8x8的地图
        for (var i = 0; i < 8; i++) { 
          for (var j = 0; j < 8; j++) { 
            //默认是道路
            let img = 'ice'
            if (map[i][j] == 1) { 
              img = 'stone'
            } else if (map[i][j] == 3) { 
              img = 'pig'
            }
    
            //绘制地图
            ctx.drawImage('/images/icons/' + img + '.png', j * w, i * w, w, w)
    
            if (box[i][j] == 4) { 
              //叠加绘制箱子
              ctx.drawImage('/images/icons/box.png', j * w, i * w, w, w)
            }
          }
        }
    
        //叠加绘制小鸟
        ctx.drawImage('/images/icons/bird.png', col * w, row * w, w, w)
    
        ctx.draw()
      },
    
      /** * 自定义函数--方向键：上 */
      up: function() { 
        //如果不在最顶端才考虑上移
        if (row > 0) { 
          //如果上方不是墙或箱子,可以移动小鸟
          if (map[row - 1][col] != 1 && box[row - 1][col] != 4) { 
            //更新当前小鸟坐标
            row = row - 1
          }
          //如果上方是箱子
          else if (box[row - 1][col] == 4) { 
            //如果箱子不在最顶端才能考虑推动
            if (row - 1 > 0) { 
              //如果箱子上方不是墙或箱子
              if (map[row - 2][col] != 1 && box[row - 2][col] != 4) { 
                box[row - 2][col] = 4
                box[row - 1][col] = 0
                //更新当前小鸟坐标
                row = row - 1
              }
            }
          }
          //重新绘制地图
          this.drawCanvas()
          //检查游戏是否成功
          this.checkWin()
        }
      },
      /** * 自定义函数--方向键：下 */
      down: function() { 
        //如果不在最底端才考虑下移
        if (row < 7) { 
          //如果下方不是墙或箱子,可以移动小鸟
          if (map[row + 1][col] != 1 && box[row + 1][col] != 4) { 
            //更新当前小鸟坐标
            row = row + 1
          }
          //如果下方是箱子
          else if (box[row + 1][col] == 4) { 
            //如果箱子不在最底端才能考虑推动
            if (row + 1 < 7) { 
              //如果箱子下方不是墙或箱子
              if (map[row + 2][col] != 1 && box[row + 2][col] != 4) { 
                box[row + 2][col] = 4
                box[row + 1][col] = 0
                //更新当前小鸟坐标
                row = row + 1
              }
            }
          }
          //重新绘制地图
          this.drawCanvas()
          //检查游戏是否成功
          this.checkWin()
        }
      },
      /** * 自定义函数--方向键：左 */
      left: function() { 
        //如果不在最左侧才考虑左移
        if (col > 0) { 
          //如果左侧不是墙或箱子,可以移动小鸟
          if (map[row][col - 1] != 1 && box[row][col - 1] != 4) { 
            //更新当前小鸟坐标
            col = col - 1
          }
          //如果左侧是箱子
          else if (box[row][col - 1] == 4) { 
            //如果箱子不在最左侧才能考虑推动
            if (col - 1 > 0) { 
              //如果箱子左侧不是墙或箱子
              if (map[row][col - 2] != 1 && box[row][col - 2] != 4) { 
                box[row][col - 2] = 4
                box[row][col - 1] = 0
                //更新当前小鸟坐标
                col = col - 1
              }
            }
          }
          //重新绘制地图
          this.drawCanvas()
          //检查游戏是否成功
          this.checkWin()
        }
    
    
      },
      /** * 自定义函数--方向键：右 */
      right: function() { 
        //如果不在最右侧才考虑右移
        if (col < 7) { 
          //如果右侧不是墙或箱子,可以移动小鸟
          if (map[row][col + 1] != 1 && box[row][col + 1] != 4) { 
            //更新当前小鸟坐标
            col = col + 1
          }
          //如果右侧是箱子
          else if (box[row][col + 1] == 4) { 
            //如果箱子不在最右侧才能考虑推动
            if (col + 1 < 7) { 
              //如果箱子右侧不是墙或箱子
              if (map[row][col + 2] != 1 && box[row][col + 2] != 4) { 
                box[row][col + 2] = 4
                box[row][col + 1] = 0
                //更新当前小鸟坐标
                col = col + 1
              }
            }
          }
          //重新绘制地图
          this.drawCanvas()
          //检查游戏是否成功
          this.checkWin()
        }
      },
    
    
    
      /** * 自定义函数--判断游戏成功 */
      isWin: function() { 
        //使用双重for循环遍历整个数组
        for (var i = 0; i < 8; i++) { 
          for (var j = 0; j < 8; j++) { 
            //如果有箱子没在终点
            if (box[i][j] == 4 && map[i][j] != 3) { 
              //返回假，游戏尚未成功
              return false
            }
          }
        }
        //返回真，游戏成功
        return true
      },
    
      /** * 自定义函数--游戏成功处理 */
      checkWin: function() { 
        if (this.isWin()) { 
          wx.showModal({ 
            title: '恭喜',
            content: '游戏成功！',
            showCancel: false
          })
        }
      },
    
      /** * 自定义函数--重新开始游戏 */
      restartGame: function() { 
        //初始化地图数据
        this.initMap(this.data.level - 1)
        //绘制画布内容
        this.drawCanvas()
      },
    
      /** * 生命周期函数--监听页面加载 */
      onLoad: function(options) { 
        //获取关卡
        let level= options.level
        //更新页面关卡标题
        this.setData({ 
          level: parseInt(level)+1
        })
        //创建画布上下文
        this.ctx = wx.createCanvasContext('myCanvas')
        //初始化地图数据
        this.initMap(level)
        //绘制画布内容
        this.drawCanvas()
      },
    
    })

[20210423101420538.gif_pic_center]: /images/20221022/808f8121cc604b1ea95b65561414ff5b.png
[https_download.csdn.net_download_weixin_45525272_17061639]: https://download.csdn.net/download/weixin_45525272/17061639