上篇，我们讲了更新画布尺寸，以及网格，出入口位置，可移动对象的生成。这篇，我们接上一篇，给大家讲下迷宫图的生成和游戏界面绘制。

生成迷宫图

迷宫图是由墙和走廊构成的，我们需要将墙打通，形成一条入口到出口的通路，这就需要一种算法来实现，我这里采用的是深度优先查找算法。具体什么是深度优先查找算法，大家可以自行头条搜索，我就不过多介绍了。

我是这样实现的：首先初始化几个变量，

• curCell 当前遍历的目标墙（以下简称当前墙），我们取网格中的第一道墙给它
• history 访问过一次的墙构成的数组
• getWall 根据墙，获取相邻墙的函数

然后，我们根据当前墙，随机打通一道它的相邻墙，然后把打通的那道墙作为当前墙。在循环中，我们不断地将当前墙压入历史数组，当找不到可打的墙时，就从历史中弹出最后一道墙作为当前墙，这样一直循环，直到历史被清空，结束循环。

private genMap () {
    const startTime = Date.now()
    let curCell: Block = this.grid[0][0]
    const history: Block[] = [curCell]
    const { TOP, RIGHT, BOTTOM, LEFT } = Direction
    const getWall = (cell: Block, dir: Direction) => this.getBlock(cell, dir, BlockType.WALL)
    while (history.length) {
      curCell.flag = true
      const tCell = this.getBlock(curCell, TOP)
      const rCell = this.getBlock(curCell, RIGHT)
      const bCell = this.getBlock(curCell, BOTTOM)
      const lCell = this.getBlock(curCell, LEFT)
      const cells = [tCell, rCell, bCell, lCell].filter(_ => _ && !_.flag)
      if (cells.length) {
        history.push(curCell)
        const rndCell = cells[getRandInt(0, cells.length - 1)]
        let wall
        if (rndCell === tCell) {
          wall = getWall(curCell, TOP)
          curCell = tCell
        } else if (rndCell === rCell) {
          wall = getWall(curCell, RIGHT)
          curCell = rCell
        } else if (rndCell === bCell) {
          wall = getWall(curCell, BOTTOM)
          curCell = bCell
        } else {
          wall = getWall(curCell, LEFT)
          curCell = lCell
        }
        wall.type = BlockType.CELL
      } else {
        curCell = history.pop() as Block
      }
    }
    console.log(Date.now() - startTime)
  }

获取墙的坐标

我们的墙是根据行和列确定位置的，但是，绘制到画布上时，需要将行列转化为笛卡尔坐标系中的xy坐标。

画布的坐标原点在左上角，向右是x轴正方向，向下是y轴正方向，这和数学上的坐标系有一些差异。

private getWallCoord (wall: Block) {
    let x1
    let y1
    let x2
    let y2
    const { row, col } = wall
    const { wallWidth, cellWidth } = this
    const space = wallWidth + cellWidth
    if (row % 2) {
      if (col % 2) return
      x1 = col / 2 * space - wallWidth / 2
      y1 = y2 = (row + 1) / 2 * space
      x2 = x1 + space + wallWidth
    } else {
      x1 = x2 = (col + 1) / 2 * space
      y1 = row / 2 * space - wallWidth / 2
      y2 = y1 + space + wallWidth
    }
    return { x1, y1, x2, y2 }
  }

绘制游戏界面

我采用的双画布绘制，可移动目标单独绘制在一张画布上，其它静止的对象绘制在另一张画布上。目标移动过程中，需要不断重绘画布。这样做有一个好处，就是可以大幅减少计算量和重绘次数，这可以提高性能，因为我们仅需重绘可移动目标所在的画布。

绘制游戏界面之前，需要先将画布擦干净，然后进行一系列对象的绘制。流程是：

1. 绘制入口
2. 保存画布状态
3. 绘制迷宫图
4. 恢复上次保存的状态
5. 绘制出口
6. 绘制可移动目标，独享一张画布

private drawUI () {
    const { cvs, ctx, wallWidth } = this
    ctx.clearRect(0, 0, cvs.width, cvs.height)
    this.drawStartPosition()
    ctx.save()
    ctx.strokeStyle = this.wallColor
    ctx.lineWidth = wallWidth
    ctx.strokeRect(wallWidth / 2, wallWidth / 2, cvs.width - wallWidth, cvs.height - wallWidth)
    this.grid.forEach(rows => {
      rows.forEach(_ => {
        if (_.type === BlockType.WALL) {
          const coord = this.getWallCoord(_)
          if (coord) {
            ctx.beginPath()
            ctx.moveTo(coord.x1, coord.y1)
            ctx.lineTo(coord.x2, coord.y2)
            ctx.stroke()
          }
        }
      })
    })
    ctx.restore()
    this.drawEndPosition()
    this.drawBall()
  }

本篇文章到此就结束了，童鞋们都理解了吗？下一讲，下篇见！感谢阅读！

#头条创作挑战赛##前端#?#程序员#?#JavaScript#?

Tags：游戏前端

微信扫一扫：分享

微信里点“发现”，扫一下

二维码便可将本文分享至朋友圈。