2023年夏季《移动软件开发》实验报告——实验4

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

一、实验目标

1、综合应用所学知识创建完整的拼图游戏项目；2、熟练掌握组件。

二、实验步骤

1.创建项目

2.删除和修改文件

3.创建其他文件

4.根据个人喜好设置导航栏样式

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#E64340",
    "navigationBarTitleText": "拼图游戏",
    "navigationBarTextStyle": "white"
  },

5.公共样式设计

/**app.wxss**/
/** 公共样式设计 可修改 **/
.container {
  height: 100%;
  color:#E64340;
  font-weight: bold;/** 字体加粗**/
  display: flex;
  flex-direction: column;
  align-items: center;/** 设置组布局属性(纵向)**/
  justify-content: space-evenly;/** 设置组布局属性(横向)**/
} 

.title
{
  font-size:18pt;
}

6.首页设计

<!--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='{{item}}'>
      <image src='/images/{{item}}'></image>
      <text>第{{index+1}}关</text>
    </view>
  </view>
</view>

<!--index.wxss-->
.levelBox{
  width:100%；
}
.box{
  width:50%;
  float:left;
  margin:25rpx 0;
  display:flex;
  flex-direction: column;
  align-items: center;
}

image{
  width:260rpx;
  height:260rpx;
}

7.游戏页面设计

<!--pages/game/game.wxml-->
<view class="container">
  <view class='title'>提示图</view>
  <image src='{{url}}'></image>

  <canvas canvas-id='myCanvas' bindtouchstart="touchBox"></canvas>

  <button type='warn' bindtap='restartGame'>重新开始</button>
</view>


/* pages/game/game.wxss */
image{
  width:250rpx;
  height:250rpx;
}

canvas{
  border:1rpx solid;
  width:300px;
  height:300px;
}

8.逻辑实现

（1）首页逻辑实现

/*index.js*/
Page({

  /**
   * 页面的初始数据
   */
  data: {
    levels:[
      'pic01.jpg',
      'pic02.jpg',
      'pic03.jpg',
      'pic04.jpg',
      'pic05.jpg',
      'pic06.jpg'
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

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

  /**
   * 自定义函数--游戏选关
   */
  chooseLevel:function(e){
    let level = e.currentTarget.dataset.level
      wx.navigateTo({
        url:'../game/game?level='+level
      })
  },

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

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

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

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

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

(2)游戏页逻辑

// pages/game/game.js
var num=[
  ['00','01','02'],
  ['10','11','12'],
  ['20','21','22']
]
var w=100
var url='/images/pic01.jpg'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isWin:false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    //更新图片路径
    url='/images/'+ options.level
    //更新提示图的地址
    this.setData({url:url})
    this.ctx=wx.createCanvasContext('myCanvas')
    this.shuffle()
    this.drawCanvas()
  },

  /**
   * 自定义函数--随机打乱方块顺序
   */
  shuffle() {
    num=[
      ['00','01','02'],
      ['10','11','12'],
      ['20','21','22']
    ]
    var row=2
    var col=2
    for(var i=0;i<100;i++)
    {
      //随机产生一个方向：上（0）、下（1）、左（2）、右（3）
      var direction=Math.round(Math.random()*3)
      if(direction==0){
        if(row!=0){
          num[row][col]=num[row-1][col]
          num[row-1][col]='22'
          row-=1
        }
      }
      else if(direction==1){
        if(row!=2){
          num[row][col]=num[row+1][col]
          num[row+1][col]='22'
          row+=1
        }
      }
      else if(direction==2){
        if(col!=0){
          num[row][col]=num[row][col-1]
          num[row][col-1]='22'
          col-=1
        }
      }
      else if(direction==3){
        if(col!=2){
          num[row][col]=num[row][col+1]
          num[row][col+1]='22'
          col+=1
        }
      }
    }
  },

  /**
   * 自定义函数--绘制画布内容
   */
  drawCanvas() {
    let ctx=this.ctx

    ctx.clearRect(0,0,300,300)

    for(var i=0;i<3;i++)
    {
      for(var j=0;j<3;j++){
        if(num[i][j]!='22'){
          var row=parseInt(num[i][j]/10)
          var  col=num[i][j]%10

          ctx.drawImage(url,col*w,row*w,w,w,j*w,i*w,w,w)
        }
      }
    }
    ctx.draw()
  },

  /**
   * 自定义函数--监听点击方块事件
   */
  touchBox(e) {
    if(this.data.isWin){
      return
    }

    var x=e.changedTouches[0].x
    var y=e.changedTouches[0].y

    var row=parseInt(y/w)
    var col=parseInt(x/w)

    if(num[row][col]!='22'){
      this.moveBox(row,col)

      this.drawCanvas()

      if(this.isWin()){
        let ctx=this.ctx

        ctx.drawImage(url,0,0)

        ctx.setFillStyle('#E64340')
        ctx.setTextAlign('center')
        ctx.setFontSize(60)
        ctx.fillText('游戏成功',150,150)
        ctx.draw()
      }
    }
  },

  /**
   * 自定义函数--移动被点击的方块
   */
  moveBox(i,j) {
    if(i>0){
      if(num[i-1][j]=='22'){
        num[i-1][j]=num[i][j]
        num[i][j]='22'
        return
      }
    }
    if(i<2){
      if(num[i+1][j]=='22'){
        num[i+1][j]=num[i][j]
        num[i][j]='22'
        return
      }
    }
    if(j>0){
      if(num[i][j-1]=='22'){
        num[i][j-1]=num[i][j]
        num[i][j]='22'
        return
      }
    }
    if(j<2){
      if(num[i][j+1]=='22'){
        num[i][j+1]=num[i][j]
        num[i][j]='22'
        return
      }
    }
  },

  /**
   * 自定义函数--判断游戏是否成功
   */
  isWin() {
    for(var i=0;i<3;i++){
      for(var j=0;j<3;j++){
        if(num[i][j]!=i*10+j){
          return false
        }
      }
    }
    this.setData({isWin:true})
    return true
  },

  /**
   * 自定义函数--重新开始游戏
   */
  restartGame() {
    this.setData({isWin:false})
    this.shuffle()
    this.drawCanvas()
  }
})

9.测试小程序功能

三、程序运行结果

1.首页

2.选择关卡

3.移动图片

4.游戏成功界面

5.另一关卡

四、问题总结与体会

这次实验为我的个人项目提供了新的思路，也学会了更多编写小程序的知识，对于跳转界面也有了更深的体会。