中国海洋大学2023年夏季《移动软件开发》实验报告6

中国海洋大学2023年夏季《移动软件开发》实验报告6

Info: 韩翔 21020007023

Date: 2023-08-21

准备工作

与之前的实验相同，通过创建js模板，并删除部分代码和文件来完成。此处略。

此外，还要在目录中添加images文件夹，用于存储关卡图片。

创建公共js文件data.js，用于存储数据信息。

界面设计

首先进行导航栏的设计，颜色改为“#E64340”，文字改为“推箱子游戏”。

通过设计公共样式，并在index.wxml中添加<view>容器，设计主页。

进行游戏页的设计。游戏页包括标题、游戏界面、方向键按钮和重新开始按钮。通过调整样式，得到基本的游戏界面。

借助wx:for，让首页出现四个关卡：

逻辑实现

本实验的核心是逻辑设计。首先准备好地图信息：

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

var map2 = [
  [0, 0, 1, 1, 1, 0, 0, 0],
  [0, 0, 1, 3, 1, 0, 0, 0],
  [0, 0, 1, 2, 1, 1, 1, 1],
  [1, 1, 1, 4, 2, 4, 3, 1],
  [1, 3, 2, 4, 5, 1, 1, 1],
  [1, 1, 1, 1, 4, 1, 0, 0],
  [0, 0, 0, 1, 3, 1, 0, 0],
  [0, 0, 0, 1, 1, 1, 0, 0]
]

var map3 = [
  [0, 0, 1, 1, 1, 1, 0, 0],
  [0, 0, 1, 3, 3, 1, 0, 0],
  [0, 1, 1, 2, 3, 1, 1, 0],
  [0, 1, 2, 2, 4, 3, 1, 0],
  [1, 1, 2, 2, 5, 4, 1, 1],
  [1, 2, 2, 1, 4, 4, 2, 1],
  [1, 2, 2, 2, 2, 2, 2, 1],
  [1, 1, 1, 1, 1, 1, 1, 1]
]

var map4 = [
  [0, 1, 1, 1, 1, 1, 1, 0],
  [0, 1, 3, 2, 3, 3, 1, 0],
  [0, 1, 3, 2, 4, 3, 1, 0],
  [1, 1, 1, 2, 2, 4, 1, 1],
  [1, 2, 4, 2, 2, 4, 2, 1],
  [1, 2, 1, 4, 1, 1, 2, 1],
  [1, 2, 2, 2, 5, 2, 2, 1],
  [1, 1, 1, 1, 1, 1, 1, 1]
]

同时要借助module.exports语句暴露数据出口：

module.exports = {
  maps: [map1, map2, map3, map4]
}

最后需要在game界面的js文件顶端引用公共js文件：

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

对于首页而言，需要实现展示关卡列表和跳转游戏界面的功能。对于跳转游戏界面，在wxml文件中添加bindtap和data-level属性，使其具备跳转功能。

对于游戏页而言，需要实现显示关卡、游戏逻辑、判断游戏是否成功。代码如下：(game.js)

// pages/game/game.js
var data = require('../../utils/data')

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({
  restartGame: function() {
    this.initMap(this.data.level - 1)
    this.drawCanvas()
  },
  
  initMap: function(level) {
    let mapData = data.maps[level]
    console.log(mapData)
    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()
  },

  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()
    }
  },
  down:function()
  {
    if(row<7)
    {
      if(map[row+1][col]!=1&&box[row+1][col]!=4)
      {
        row=row+1
      }
      else if(box[row+1][col]==4)
      {
        if(row+1<7)
        {
          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()
    }
  },
  left:function()
  {
    if(col>0)
    {
      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()
    }
  },
  right:function()
  {
    if(col>0)
    {
      if(map[row][col+1]!=1&&box[row][col+1]!=4)
      {
        col=col+1
      }
      else if(box[row][col+1]==4)
      {
        if(col+1<7)
        {
          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()
    }
  },

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

  /**
   * 页面的初始数据
   */
  data: {
    level: 1
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    let level = options.level
    console.log(level)

    this.setData({
      level: parseInt(level) + 1
    })

    this.ctx = wx.createCanvasContext('myCanvas')
    this.initMap(level)
    this.drawCanvas()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

此时页面效果如下：