上篇，我们讲了更新画布尺寸，以及网格，出入口位置，可移动对象的生成。这篇，我们接上一篇，给大家讲下迷宫图的生成和游戏界面绘制。
生成迷宫图迷宫图是由墙和走廊构成的，我们需要将墙打通，形成一条入口到出口的通路，这就需要一种算法来实现，我这里采用的是深度优先查找算法。具体什么是深度优先查找算法，大家可以自行头条搜索，我就不过多介绍了。
我是这样实现的：首先初始化几个变量，
然后，我们根据当前墙，随机打通一道它的相邻墙，然后把打通的那道墙作为当前墙。在循环中，我们不断地将当前墙压入历史数组，当找不到可打的墙时，就从历史中弹出最后一道墙作为当前墙，这样一直循环，直到历史被清空，结束循环。
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 }
}绘制游戏界面
我采用的双画布绘制，可移动目标单独绘制在一张画布上，其它静止的对象绘制在另一张画布上。目标移动过程中，需要不断重绘画布。这样做有一个好处，就是可以大幅减少计算量和重绘次数，这可以提高性能，因为我们仅需重绘可移动目标所在的画布。
绘制游戏界面之前，需要先将画布擦干净，然后进行一系列对象的绘制。流程是：
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()
}
本篇文章到此就结束了，童鞋们都理解了吗？下一讲，下篇见！感谢阅读！
Copyright © 2024 妖气游戏网 www.17u1u.com All Rights Reserved
