24夏移动软件开发-实验六

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

课程	中国海洋大学24夏《移动软件开发》
实验名称	实验6：推箱子游戏
博客地址
Gitee仓库地址	miniprogram: 微信小程序开发学习阶段 (gitee.com)

一、实验目标

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

二、实验步骤

创建项目后将资源加入到项目
https://gaopursuit.oss-cn-beijing.aliyuncs.com/course/mobileDev/boxgame_images.zip

选关页面

视图设计

<!--index.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>

index.wxss

/**index.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;
}

index.js

// index.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
    })
  },
 

游戏页面

视图设计

<!--pages/game/game.wxml-->

<view class='container'>
  <view class='title'>第{{level}}关</view>
  <canvas canvas-id="myCanvas"></canvas>
  <view class='btnBox'>
    <button type='warn' bindtap='move' data-d='1'>↑</button>
    <view>
      <button type="warn" bindtap='move' data-d='2'>←</button>
      <button type="warn" bindtap='move' data-d='3'>↓</button>
      <button type="warn" bindtap='move' data-d='4'>→</button>
    </view>  
  </view>
  <button type="warn" bindtap='restart'>重新开始</button>
</view>

game.wxss

/* pages/game/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

// pages/game/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:0

  },
  
  /**
   * 生命周期函数--监听页面加载
   */

  onLoad(options) {
    let level = options.level
    this.setData({
      level: parseInt(level) + 1
    })
    let that = this
    this.ctx = wx.createCanvasContext('myCanvas')
    this.initMap(level)
    this.drawCanvas()
  },


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

  },

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

  

  move:function(e){
    let dir = e.currentTarget.dataset.d;
    //console.log(dir)

    dir = parseInt(dir);
    //console.log(dir)
    let dmcol = [0,-1,0,1]
    let dmrow = [-1,0,1,0]
    if((dir == 1 && row > 0)||(dir == 2 && col > 0)||(dir == 3 && row <7)||(dir == 4 && col < 7)){
      let trow = row+dmrow[dir - 1]
      let tcol = col+dmcol[dir - 1]
      let ttr = trow+dmrow[dir - 1]
      let ttc = tcol+dmcol[dir - 1]
      if(map[trow][tcol] != 1&&box[trow][tcol] != 4){
        row = trow
        col = tcol
      }
      else if(box[trow][tcol] == 4){
        if((dir == 1 && trow > 0)||(dir == 2 && tcol > 0)||(dir == 3 && trow <7)||(dir == 4 && tcol < 7))
        {
          if(map[ttr][ttc] != 1 && box[ttr][ttc] != 4){
            box[ttr][ttc] = 4
            box[trow][tcol] = 0
            row = trow
            col = tcol
          }
        }
      }
    }

    this.drawCanvas()
    this.checkWin()

  },

  restart:function(){
    this.initMap(this.data.level - 1)
    this.drawCanvas()

  },

  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

      })

    }

  },

  

三、程序运行结果

四、问题总结与体会

实验提供的手册的函数上下左右各单独写一个函数, 改进一下写成一个函数更加省时省力.