从零开始的小程序开发之路 看这一篇就够了!(适用于有基础)#4

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

​

一、实验目标

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

二、实验步骤

步骤一 app设置

wxss文件里设置container css

步骤二 页面设计

标题 关卡盒子

然后 设计游戏界面

需要在这里面添加 并且在app.json中进行设置

他就会有game这个文件夹和game.wxml文件了

wxss样式如下

步骤三 逻辑实现

搭建好了游戏界面回到首页去做选关界面

在js中写这个函数并把他绑定到关卡box上

跳转后：

步骤四 游戏页逻辑

图片就可以正常显示了

在做下面拼图区，先设置方块的位置参数等

然后做一个打乱函数

 shuffle: function(){
    num = [
      ['00', '01', '02'],
      ['10', '11', '12'],
      ['20', '21', '22']
    ]
    var row = 2
    var col = 2
    //打乱方块顺序100次
    for (var i = 0; i < 100; i++){
      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: function(){
    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()
  },

在加在onload函数里

onLoad: function (options) {
    //更新图片路径地址提示图
    url = '/images/'+options.level
    //更新提示图的地址
    this.setData({url:url})
    //创建画布上下文
    this.ctx=wx.createCanvasContext('myCanvas')
    //打乱方块顺序
    this.shuffle()
    //绘制画布内容
    this.drawCanvas()
  },
  

好了 只不过现在还不能玩 要完成点击使他移动的功能

我们把touch和move都写在js里

touchBox: function(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: function(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
      }
    }
  },
​

可以移动了 移动了几格

然后再data里加入win_flag

  data: {
    isWin: false
  },

然后加win的判断函数

isWin: function(){
    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
  },

最后试着把他拼完

游戏成功

最后只需要把重新开始做完就可以了

只需要把winflag设置成false重新打乱并且重新布置到画布里就可以了

restartGame: function(){
    this.setData({isWin: false})
    this.shuffle()
    this.drawCanvas()
  },

记得把它绑在button上

最后就可以重新来了

三、程序运行结果

四、问题总结与体会

本次拼图游戏，学到了三点：第一点是创建另一个页面的操作，需要设置并且选择编译的模式

第二点是canvas组件的使用 第三点是用js的函数实现小游戏这个有点复杂的操作，也用到了canvas的touch监听

就是游戏有点难。。。