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

一、实验目标

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

二、实验步骤

本次实验一共使用到了两个页面，一个是首页（游戏选关页），还有一个就是游戏关卡页面。实验前准备，把我们所需要的图片下载到我们的实验项目里面。

• 首页

  首页包括标题还有关卡列表，关卡有四个包括预览图片并显示第几关，点击游戏列表跳转至游戏关卡页面。下面是我们预期页面。

  我们使用两层组件嵌套循环渲染列表。

  <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>

  跳转逻辑：给列表添加一个跳转函数chooseLevel，从index页面跳转到game页面，同时传递level参数。

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

• 游戏页面

  游戏页面显示第几关，游戏画面，方向键还有重新开始按钮。游戏画面由8x8的小方块组成，包括地板、箱子、游戏主角、目的地组成，具体如下。

  第一步我们先准备好我们本次游戏地图，由8x8的二维数组记录我们的地图在data.js存储到我们的本地缓存。

  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],].....                   //还有三个地图数据就不过多赘述了module.exports={  maps:[map1,map2,map3,map4]}

  游戏页面设计,我们第一次使用了组件，每一个按钮分别添加了一个点击函数。

  <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="resartgame">重新开始</button></view>

  逻辑实现,下面是我们的全局变量，存储地图等相关数据。

  var data = require('../../utils/data')   //获取我们的所有地图数据var map = [  [0,0,0,0,0,0,0,0],  ...                  //8x8数组  [0,0,0,0,0,0,0,0],]var box = [  [0,0,0,0,0,0,0,0],  ...                   //8x8数组  [0,0,0,0,0,0,0,0],]var w = 40var row = 0var col = 0

  我们首先初始化地图,我们接受level参数，通过两层循环循环初始化地图数据map、box。

  initMap:function(level){    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        }      }    }  },

  我们通过map、box数组数据渲染我们的地图。

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

  我们还要设置方向键的点击函数。另外三个点击函数原理一致，这里不过多赘述。

  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:function(){                         //检测游戏是否过关，过关返回ture。    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      })    }  },

  最后是重新开始我们游戏按钮的点击函数。我们调用初始化函数即可。

  resartgame:function(){    this.initMap(this.data.level-1)    this.drawCanvas()  },

三、程序运行结果

四、问题总结与体会

本次实验我们最后一个小实验，但也是我们最有趣的实验，我们成功的做了一个我们小时候很有趣的推箱子小游戏，并且我们还学着使用了组件渲染画面，虽然复杂了一点，但还是受益颇多。