-
Notifications
You must be signed in to change notification settings - Fork 0
/
mazeRenderer.js
48 lines (42 loc) · 1.48 KB
/
mazeRenderer.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import CellTypes from "./cellTypes.js";
export default class MazeRenderer {
constructor(canvas) {
this.canvas = canvas;
this.ctx = canvas.getContext('2d');
this.cellSize = 20;
}
draw(state) {
// -1 = wall
// 0 = empty
// 1 = start
// 2 = end
// 3 = path
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
for (let i = 0; i < this.canvas.height / this.cellSize; i++) {
for (let j = 0; j < this.canvas.width / this.cellSize; j++) {
switch(state.maze[i][j]){
case CellTypes.Wall:
this.drawCell(j, i, 'black');
break;
case CellTypes.Start:
this.drawCell(j, i, 'red');
break;
case CellTypes.End:
this.drawCell(j, i, 'green');
break;
case CellTypes.Path:
this.drawCell(j, i, 'blue');
break;
}
}
}
// draw best move cost on canvas
this.ctx.fillStyle = 'red';
this.ctx.font = '20px Arial';
this.ctx.fillText(`Best move cost: ${state.bestMoveCost || 0}`, 10, 20);
}
drawCell(x, y, color) {
this.ctx.fillStyle = color;
this.ctx.fillRect(x * this.cellSize, y * this.cellSize, this.cellSize, this.cellSize);
}
}