self driving car

road.js

@@ -0,0 +1,59 @@
+class Road {
+	constructor(x, width, laneCount = 5) {
+		this.x = x;
+		this.width = width;
+		this.laneCount = laneCount;
+
+		this.left = x - width / 2;
+		this.right = x + width / 2;
+
+		const infinity = 1000000;
+		this.top = -infinity;
+		this.bottom = infinity;
+
+		const topLeft = { x: this.left, y: this.top };
+		const topRight = { x: this.right, y: this.top };
+		const bottomLeft = { x: this.left, y: this.bottom };
+		const bottomRight = { x: this.right, y: this.bottom };
+		this.borders = [
+			[topLeft, bottomLeft],
+			[topRight, bottomRight],
+		];
+	}
+
+	getLaneCenter(laneIndex) {
+		const laneWidth = this.width / this.laneCount;
+		return (
+			this.left +
+			laneWidth / 2 +
+			Math.min(laneIndex, this.laneCount - 1) * laneWidth
+		);
+	}
+
+	draw(ctx) {
+		ctx.lineWidth = 5;
+		ctx.strokeStyle = "white";
+
+		for (let i = 1; i <= this.laneCount - 1; i++) {
+			const x = lerp(
+				this.left,
+				this.right,
+				i / this.laneCount
+			);
+
+			ctx.setLineDash([20, 20]);
+			ctx.beginPath();
+			ctx.moveTo(x, this.top);
+			ctx.lineTo(x, this.bottom);
+			ctx.stroke();
+		}
+
+		ctx.setLineDash([]);
+		this.borders.forEach((border) => {
+			ctx.beginPath();
+			ctx.moveTo(border[0].x, border[0].y);
+			ctx.lineTo(border[1].x, border[1].y);
+			ctx.stroke();
+		});
+	}
+}