实验6：推箱子游戏

一、实验目标

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

二、实验步骤

1.创建小程序项目

2.在app.json文件中pages属性中的“pages/logs/logs"改成"pages/game/game"保存生成game目录

3.删除系统默认文件和默认函数

4.创建images和utils文件夹,把关卡图片和游戏图标复制到images目录下

5.在utils文件夹下创建data.js文件

6.在app.json文件中设置导航栏的标题和文字

7.页面设计：首页包括标题和关卡列表两部分，均用view容器实现，在pages/index/index.wxml文件中添加好实现代码后再在对应wxss文件添加格式实现即可；游戏页面包括关卡提示、游戏画布、方向键和重新开始按钮，其中游戏画布用canvas组件实现，方向键和重新开始按钮均用button组件实现，pages/game/game.wxml文件中添加好实现代码后再在对应wxss文件添加格式实现即可
8.逻辑实现：在公共文件utils/data.js中添加关卡地图信息，并使用module.exports语句暴露数据出口，再在pages/game/game.js文件中引用该文件；在pages/index/index.js文件中data里添加关卡图片信息，再添加点击关卡跳转页面函数chooseLevel，并在关卡列表处绑定函数；在pages/game/game.js文件中添加地图和箱子图层初始信息，添加initMap函数初始化游戏地图数据，添加绘制地图函数drawCanvas，添加up、down、left、right函数用来实现方向键移动时地图的变化，并在pages/game/game.wxml文件中的四个方向键绑定点击事件，添加isWin函数用于判断游戏是否成功，最后再添加restartGame函数用于重新开始游戏即可

9.各文件代码如下：

pages/index/index.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
      level:1,
    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
      })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

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

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

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

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

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

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

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

pages/index/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>

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

pages/game/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:1
    },
    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
                }
            }
        }
    },
    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<7){
            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()
        }
    },
    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()
        }
    },
    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
            })
        }
    },
    drawCanvas:function(){
        // const ctx=wx.createCanvasContext('myCanvas')
        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()
    },
    restartGame:function(){
        this.initMap(this.data.level-1)
        this.drawCanvas()
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        let level=options.level
        this.setData({
            level:parseInt(level)+1
        })
        this.ctx=wx.createCanvasContext('myCanvas')
        this.initMap(level)
        this.drawCanvas()
    },

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

    },

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

    },

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

    },

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

    },

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

    },

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

    },

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

    }
})

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

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

app.json

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

`## 三、问题总结与体会

​		通过本次实验，我更熟悉了小程序游戏的制作流程，比起上次的拼图游戏，这次的小游戏涉及到了图层的放置问题，两次实验都涉及到了canvas组件画游戏画布，同时这次实验还有弹出游戏成功的设计。