專案展示

專案鏈接

https://download.csdn.net/download/weixin_45525272/17061639

專案設計

配置

地圖資料
/utils/data.js

//================================================
//地圖資料map1-map4
//地圖資料：1墻，2路，3終點，4箱子，5人物，0墻的外圍
//================================================
//關卡1
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]
]
//關卡2
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]

]
//關卡3
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]
]
//關卡4
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]
}

首頁

wxml

<!--pages/menu/menu.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>

wxss

/* pages/menu/menu.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;
}

js

// pages/menu/menu.js
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    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
    })
  },
})

游戲界面

wxml

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

wxss

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

js

//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回圈記錄地圖資料
    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回圈繪制8x8的地圖
    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 < 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()
    }
  },



  /**
   * 自定義函式--判斷游戲成功
   */
  isWin: function() {
    //使用雙重for回圈遍歷整個陣列
    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()
  },

  /**
   * 生命周期函式--監聽頁面加載
   */
  onl oad: function(options) {
    //獲取關卡
    let level= options.level
    //更新頁面關卡標題
    this.setData({
      level: parseInt(level)+1
    })
    //創建畫布背景關系
    this.ctx = wx.createCanvasContext('myCanvas')
    //初始化地圖資料
    this.initMap(level)
    //繪制畫布內容
    this.drawCanvas()
  },

})