移动软件开发实验六

一、实验目标

1、综合所学知识创建完整的前端新闻小程序项目；能够在开发过程中熟练掌握真机预览、调试等操作。

二、实验步骤

项目创建

创建一个空白的项目

页面配置

视图设计

1.导航栏设计

app.json

{
  "pages":[
    "pages/index/index",
    "pages/game/game"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#E64340",
    "navigationBarTitleText": "推箱子游戏",
    "navigationBarTextStyle":"black"
  },
  "sitemapLocation": "sitemap.json"
}

公共样式设计

app.wxss

.container{
  height: 100vh;
  color: #E64340;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}
.title{
  font-size: 18pt;
}

2.首页设计

首页主要包含标题和关卡列表两部分内容

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代码如下：

.levelBox{
  width: 100%;
}
.box{
  width: 50%;
  float: left;
  margin: 20rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
image{
  width: 300rpx;
  height: 300rpx;
}
​

3.游戏页面设计

game.wxml

<view class="container">
  <view class="title">第{{level}}关</view>
  <canvas canvas-id="myCanvas"></canvas>
  <view class="btnBox">
    <button type="warn" bindtap='up'>↑</button>
  <view>
    <button type="warn" bindtap='left'>←</button>
    <button type="warn" bindtap='down'>↓</button>
    <button type="warn" bindtap='right'>→</button>
  </view>
</view>
<button type="warn" bindtap='restartGame'>重新开始</button>
</view>

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

逻辑实现

1.公共逻辑

在公共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]
]
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={
  maps:[map1,map2,map3,map4]
}

2.首页逻辑

index.js的data里面录入关卡的数据信息

index.js为

levels:[
      'level01.png',
      'level02.png',
      'level03.png',
      'level04.png',
    ]

3.点击跳转游戏页面

在index.js文件里添加chooselevel函数并且使用data-level属性携带了关卡图片的下标信息

对应代码如下

chooseLevel:function(e){
    let level=e.currentTarget.dataset.level
    wx.navigateTo({
      url: '../game/game?level='+level,
    })
  },

3.游戏页逻辑

①显示当前第几关

game.js文件代码如下

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

②游戏逻辑实现

先在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

再初始化游戏界面

代码如下

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

然后再方向键逻辑实现

up: function() {
    if (row > 0) {
     
      if (map[row - 1][col] != 1 && box[row - 1][col] != 4) {
        row--;
      }
      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--;
          }
        }
      }
      this.drawCanvas();
      this.checkWin();
    }
  },
  down: function() {
    if (row < 7) {
      if (map[row + 1][col] != 1 && box[row + 1][col] != 4) {
        row++;
      }
​
      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++;
          }
        }
      }
      this.drawCanvas();
      this.checkWin();
    }
  },
  left: function() {
    if (col > 0) {
      if (map[row][col - 1] != 1 && box[row][col - 1] != 4) {
        col--;
      }
      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--;
          }
        }
      }
      this.drawCanvas();
      this.checkWin();
    }
  },
  right: function() {
    if (col != 7) {
      if (map[row][col + 1] != 1 && box[row][col + 1] != 4) {
        col++;
      }
      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++;
          }
        }
      }
      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,
      })
    }
  },
  restartGame:function(){
    this.initMap(this.data.level-1)
    this.drawCanvas()
  },
​

三、程序运行结果

四、问题总结与体会

就是我复制粘贴完迷宫数组没有检查，导致游戏画布上一直没有图案，然后一开始画布有点太小了，影响游戏体验