В качестве побочного проекта я создал генератор лабиринта, используя график.Логика генерации работает нормально, но я сталкиваюсь с некоторыми проблемами при рендеринге.В моей логике каждая ячейка представлена в виде массива из 4 ребер, где первый край - это верхняя стенка, второй - правая стенка и т. Д. По часовой стрелке.Если есть грань (что-либо отличное от -1), должна быть стена, если есть -1, эта сторона должна быть открыта.
Для того, чтобы следовать этой логике, я создал следующий класс Render
export class Renderer {
private _context: CanvasRenderingContext2D;
private _y: number;
private _x: number;
constructor(canvas: HTMLCanvasElement, xSize: number, ySize: number) {
this._context = canvas.getContext('2d') as CanvasRenderingContext2D;
this._x = xSize;
this._y = ySize
}
public render(graphAdjacencyList: Array<Vertex>): void {
for (let i = 0; i < this._x; i++) {
for (let j = 0; j < this._y; j++) {
const codedIndex: number = parseInt(i.toString() + j.toString());
this._renderCell({ x: 20 * j, y: 20 * i }, graphAdjacencyList[codedIndex].getEdges(), 20)
}
}
}
private _renderCell(coords: Record<'x' | 'y', number>, cellWalls: Array<number>, size: number) {
cellWalls.forEach((w: number, index: number) => {
this._context.beginPath();
switch (index) {
case 0:
this._context.moveTo(coords.x, coords.y);
(w !== -1) ? this._context.lineTo(coords.x + size, coords.y) : null;
break;
case 1:
this._context.moveTo(coords.x + size, coords.y);
(w !== -1) ? this._context.lineTo(coords.x + size, coords.y + size) : null;
break;
case 2:
this._context.moveTo(coords.x + size, coords.y + size);
(w !== -1) ? this._context.lineTo(coords.x, coords.y + size) : null;
break;
case 3:
this._context.moveTo(coords.x, coords.y + size);
(w !== -1) ? this._context.lineTo(coords.x, coords.y - size) : this._context.moveTo(coords.x, coords.y - size);
break;
}
this._context.closePath();
this._context.stroke();
});
}
}
, который на первый взгляд кажется работоспособным, за исключением того факта, что он рендерит "призрачные стены"(светло-серые штрихи), как на этом изображении
Если я взгляну по краям, я вижу, что, например, ячейка [3][3]
должна иметь только верхнюю и левуюстена, потому что ее края [23, -1, -1, 32]
.Я убежден, что ошибка в том, как я перемещаю точку, но я не могу точно определить проблему.
минимальный пример: https://stackblitz.com/edit/js-ys9a1j
в минимальном примере график не рандомизирован, но разработан таким образом, что результат должен состоять из всех блоков, чтобы иметь только нижнюю и левую стенки ([-1, -1, 1, 1])