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

一、实验目标

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

二、实验步骤

本次实验类似实验4拼图游戏，只不过在游戏逻辑上有所不同——后者需要对箱子位置以及是否可推动有判定之类

• 首先，本次实验有两个页面：index页面主要是选关并进入关卡；game页面就是具体的游戏画面，且分为上游戏界面区以及下操作区——含wasd以及重新开始
• index页面有一个title和选关页面。可以用wx：for创造多个关卡并在后续绑定具体的游戏页面![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images
  /20230724024159.png?origin_url=image.png&pos_id=img-2MB8JEop-1693885323824)下代码是index页面的前端样式

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

• 然后就是game页面。如前所说，上部分是游戏画布，下部分是游戏操作。与之前不同的是，画布并不是整个图片，而是icon。为此，需要创建对应的二维数组，以数组元素来判断采用什么样的素材——后续游戏逻辑也是操作数组元素完成修改后，再据此绘制图像。![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images
  /20230724024159.png?origin_url=image-1.png&pos_id=img-s9p3Bvf4-1693885323825)下代码是向右移动的逻辑实现，其它方向大同小异

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

• 最后的部分是完善。比如完成游戏的提示以及重新开始游戏的实现等等

三、程序运行结果

![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images
/20230724024159.png?origin_url=image-2.png&pos_id=img-9bilpedm-1693885323826)
![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images
/20230724024159.png?origin_url=image-3.png&pos_id=img-E1tcNVWn-1693885323826)