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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
export function render(ctx, level, index) {
ctx.fillStyle = 'white';
const [x0, y0] = level.path[index];
const [x1, y1] = level.path[index+1] || level.path[index];
const angle = Math.atan2(y1-y0, x1-x0);
clearBlack(ctx);
drawGrid(ctx);
drawPath(ctx, level.path);
drawShip(ctx, [x0, y0], angle);
level.resources
.filter(({ collected }) => collected === false)
.forEach(({ position}) => drawMark(ctx, '+', position[0], position[1]));
drawMark(ctx, '※', level.home[0], level.home[1]);
}
export function clearBlack(ctx) {
const { width, height } = ctx.canvas;
ctx.fillStyle = 'black';
ctx.fillRect(-width, -height, 2*width, 2*height);
}
export function drawShip(ctx, pos, angle) {
const transform = ctx.getTransform();
const { width, height } = ctx.canvas;
const [x, y] = pos;
ctx.translate(x, y);
ctx.rotate(angle);
ctx.fillStyle = 'white';
const STEP = 0.2;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(-STEP, -STEP);
ctx.lineTo(2*STEP, 0);
ctx.lineTo(-STEP, STEP);
ctx.lineTo(0, 0);
ctx.fill();
ctx.setTransform(transform);
}
export function drawGrid(ctx) {
ctx.scale(1, -1);
ctx.strokeStyle = 'white';
ctx.fillStyle = 'white';
const { width, height } = ctx.canvas;
ctx.font = `0.4px monospace`;
ctx.lineWidth = 4 / Math.max(width, height);
const drawLine = (start, end) => {
ctx.beginPath();
ctx.moveTo(start[0], start[1]);
ctx.lineTo(end[0], end[1]);
ctx.stroke();
}
const drawXLabel = (x, y) => {
ctx.textAlign = 'right';
ctx.textBaseline = 'bottom';
ctx.fillText(`${x} `, x, y);
}
const drawYLabel = (x, y) => {
ctx.rotate(Math.PI/2);
ctx.textAlign = 'right';
ctx.textBaseline = 'bottom';
ctx.fillText(`${y} `, y, x);
ctx.rotate(-Math.PI/2);
}
const drawGrid = (start, end, step) => {
[...Array(1+Math.floor((end-start)/step)).keys()].forEach(z => {
z = (step*z)+start;
drawLine([z, start], [z, end]);
drawLine([start, z], [end, z]);
drawXLabel(z, end);
drawYLabel(end, z);
});
}
drawGrid(-10, 10, 2);
ctx.scale(1, -1);
}
export function drawPath(ctx, path) {
const [ start, ...line ] = path;
ctx.strokeStyle = 'white';
ctx.lineWidth = 0.04;
ctx.beginPath();
ctx.moveTo(start[0], start[1]);
line.forEach(p => ctx.lineTo(p[0], p[1]));
ctx.stroke();
}
export function drawMark(ctx, mark, x, y) {
ctx.strokeStyle = 'white';
ctx.fillStyle = 'white';
ctx.font = `0.5px monospace`;
ctx.lineWidth = 0.1;
ctx.beginPath();
ctx.arc(x, y, 0.4, 0, 2*Math.PI);
ctx.stroke();
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(mark, x-0.02, y-0.12);
}
|
