移动软件开发——推箱子游戏

2024年夏季《移动软件开发》实验报告

Gitee仓库地址？ | https://gitee.com/plumagee/summerWeb

一、实验目标

1. 综合所学知识创建完整的推箱子游戏；
2. 能够在开发过程中熟练掌握真机预览、调试等操作。

二、实验步骤

1. 页面配置：新建项目boxGame，创建index首页页面和game游戏页面，删除和修改文件。然后创建images文件夹用于存放图片素材，utils文件夹用于存放data.js公共文件，完成文件配置。最后得到的目录结构：
   

2. 页面设计：

   • 导航栏设计：修改window属性，代码如下：

   "window": {
     "navigationBarTitleText": "推箱子游戏",
     "navigationBarBackgroundColor": "#E64340"
   },
   

   • 公共样式设计：在app.wxss中设置页面容器和顶端标题的公共样式，代码如下：

   .container{
     height: 100vh;
     color: #E64340;
     font-weight: bold;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-evenly;
   }
   .title{
     font-size: 18pt;
   }
   

   • 首页设计：首页包含标题和关卡列表两部分，使用view组件实现，再为关卡对应的view组件添加wx:for属性循环显示关卡列表数据和图片，index.wxml代码如下：

   <view class="container">
     <!-- 标题 -->
     <view class="title">游戏选关</view>
     <!-- 关卡列表 -->
     <view class="levelBox">
       <view class="box" wx:for="{{levels}}" wx:key="levels{{index}}" bind:tap="chooseLevel" data-level="{{index}}">
         <image src="/images/{{item}}"></image>
         <text>第{{index+1}}关</text>
       </view>
     </view>
   </view>
   

   • 游戏页设计：首先添加编译模式，预览game页面，使用view组件实现整体容器和标题；canvas组件实现游戏画布；button组件实现方向键和重新开始按钮，game.wxml代码如下：

   <view class="container">
     <!-- 提示 -->
     <view class="title">第{{level}}关</view>
     <!-- 游戏画布 -->
     <canvas canvas-id="myCanvas"></canvas>
     <!-- 方向键 -->
     <view class="btnBox">
       <button type="warn" bind:tap="up">↑</button>
       <view>
         <button type="warn" bind:tap="left">←</button>
         <button type="warn" bind:tap="down">↓</button>
         <button type="warn" bind:tap="right">→</button>
       </view>
     </view>
     <!-- 重新开始 -->
     <button type="warn" bind:tap="restartGame">重新开始</button>
   </view>
   

3. 逻辑实现

   • 公共逻辑：在data.js文件中配置游戏地图数据，以二维数组形式存放，之后使用module.exports语句暴露数据出口，再在game.js文件顶端引用公共JS文件，代码如下：

   var data = require('../../utils/data')
   

   • 点击跳转游戏页面：为首页的关卡项目添加点击事件函数chooseLevel，并使用data-level属性携带关卡图片下标信息，然后在游戏页面进行接收，显示是第几关，相应JS代码如下：

   //游戏选关
   chooseLevel:function(e){
     let level = e.currentTarget.dataset.level
     wx.navigateTo({
       url: '../game/game?level='+level
     })
   },
   

   /**
   * 生命周期函数--监听页面加载
   */
   onLoad(options) {
     let level = options.level
     //console.log('Level:',level);
     this.setData({
       level:parseInt(level) + 1
     })
     this.ctx = wx.createCanvasContext('myCanvas')
     this.initMap(level)
     this.drawCanvas()
   },
   

   • 绘制地图：在game.js文件顶端记录游戏初始数据信息，添加initMap函数用于初始化游戏地图数据，添加drawCanvas函数用于将地图信息绘制到画布上，然后在onload函数中创建画布上下文和调用函数。相应函数代码如下：

//初始化地图数据
initMap:function(level){
  if (level < 0 || level >= data.maps.length) {
    console.error('Invalid level:', level);
    return;
  }
  let mapData = data.maps[level]
  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(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()
},

• 方向键逻辑实现：为方向键的button按钮绑定点击事件，然后添加自定义函数up、down、left和right，实现小鸟移动。up函数代码如下：（其他3个与之类似）

//上
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()
  }
},

• 判断游戏成功：只要有一个箱子不在终点则未成功，添加函数isWin来判断；若游戏成功，则弹出提示对话框，使用checkWin函数实现；最后在game.js的4个方向键中加入关于游戏成功的判断函数调用。具体代码如下：

//判断成功
isWin:function(){
  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
    })
  }
},

• 重新开始游戏：给相应button增加点击事件restartGame函数，函数代码如下：

//重新开始
restartGame:function(){
  this.initMap(this.data.level-1)
  this.drawCanvas()
},

三、程序运行结果

1. 首页

   

2. 点击进入相应关卡的游戏页
   

3. 移动小鸟
   

4. 重新开始
   

5. 过关
   

四、问题总结与体会

• 遇到问题：

• 解决方法：检查发现是data.js中的地图数据每行间没有加逗号导致，虽然不加不会被检测到问题，但会导致页面跳转失败并报错

• 遇到问题：方向键显示框样式有问题
  

• 解决方法：检查代码发现代码写的没有问题，最后发现是基础库版本的问题，改成3.5.5版本样式就能正确显示了。
  收获：通过本次实验，我学会了基本的小程序游戏开发知识，canvas游戏画布组件的使用、游戏地图的设计以及函数逻辑的实现，对小程序开发有了更加全面的理解。