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

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

姓名：刘演森 学号：22020007064

姓名和学号	刘演森，22020007064
本实验属于哪门课程？	中国海洋大学22夏《移动软件开发》
实验名称	实验1：第一个微信小程序
博客地址	https://blog.csdn.net/lysall?type=blog
Github仓库地址？	XXXXXXX

一、实验目标

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 = 40
  var row = 0
  var 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()
    },
  

三、程序运行结果

四、问题总结与体会

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