Add a road and a sky colour.

Road.js

@@ -0,0 +1,42 @@
+"use strict";
+
+class Road
+{
+	constructor(inCanvas, inPos)
+	{
+		this.canvas = inCanvas;
+		this.pos = inPos;
+		this.size = new Vector(this.canvas.width, this.canvas.height * 0.1);
+		this.speed = 300; // Pixels / sec
+		this.lineOffset = 0;
+		
+		this.roadColour = "#3d3d3d";
+		this.dashColour = "rgb(234, 236, 245)";
+	}
+	
+	update(dt)
+	{
+		this.lineOffset -= this.speed * dt; 
+	}
+	
+	render(context)
+	{
+		context.save();
+		context.translate(this.pos.x, this.pos.y);
+		
+		context.fillStyle = this.roadColour;
+		context.fillRect(0, 0, this.size.x, this.size.y);
+		
+		context.beginPath();
+		context.moveTo(0, this.size.y / 2.1);
+		context.lineTo(this.size.x, this.size.y / 2.1);
+		
+		context.lineWidth = 5;
+		context.setLineDash([35, 20]);
+		context.lineDashOffset = this.lineOffset;
+		context.strokeStyle = this.dashColour;
+		context.stroke();
+		
+		context.restore();
+	}
+}

index.html

@@ -11,10 +11,13 @@
 		<link rel="stylesheet" href="./main.css" />
 		
 		<script src="./Utils.js" charset="utf-8"></script>
+		
 		<script src="./Vector.js" charset="utf-8"></script>
 		<script src="./SmoothLine.js" charset="utf-8"></script>
 		<script src="./BezierCurve.js" charset="utf-8"></script>
+		
 		<script src="./renderer.js" charset="utf-8"></script>
 		<script src="./HillSet.js" charset="utf-8"></script>
+		<script src="./Road.js" charset="utf-8"></script>
 	</head>
 </html>

renderer.js

@@ -6,14 +6,17 @@ class Renderer
 	{
 		this.canvas = canvas;
 		this.context = canvas.getContext("2d");
-		
 		this.trackWindowSize();
 		
+		this.speed = 200;
+		this.skyColour = "#4f91d4";
+		
 		this.setup();
 	}
 	
 	setup()
 	{
+		this.visibleObjects = [];
 		this.hillSets = [];
 		this.hillSets.push(new HillSet(new Vector(2048, this.canvas.height * 0.9), 0.4, "rgb(102, 164, 90)"));
 		this.hillSets.push(new HillSet(new Vector(2048, this.canvas.height * 0.6), 0.4, "rgb(43, 131, 35)"));
@@ -22,7 +25,13 @@ class Renderer
 		this.hillSets[0].pos = new Vector(0, this.canvas.height - this.hillSets[0].size.y - hillOffset);
 		this.hillSets[1].pos = new Vector(0, this.canvas.height - this.hillSets[1].size.y - hillOffset);
 		this.hillSets[2].pos = new Vector(0, this.canvas.height - this.hillSets[2].size.y - hillOffset);
-		console.log(this.hillSets);
+		this.visibleObjects.push(...this.hillSets);
+		
+		this.road = new Road(this.canvas, new Vector(0, this.canvas.height * 0.9));
+		this.visibleObjects.push(this.road);
+		
+		for (let vobj of this.visibleObjects)
+			vobj.speed = this.speed;
 	}
 	
 	start()
@@ -48,22 +57,26 @@ class Renderer
 	 */
 	update(dt)
 	{
-		for(let hillSet of this.hillSets)
+		for(let vobj of this.visibleObjects)
 		{
-			hillSet.update(dt);
+			vobj.update(dt);
 		}
 	}
 	
 	render(canvas, context)
 	{
-		context.clearRect(0, 0, canvas.width, canvas.height);
+		context.save();
+		context.fillStyle = this.skyColour;
+		context.fillRect(0, 0, canvas.width, canvas.height);
 		
 		/*context.fillStyle = "red";
 		context.fillRect(10, 10, 100, 100);*/
-			for(let hillSet of this.hillSets)
-			{
-				hillSet.render(context);
-			}
+		for(let vobj of this.visibleObjects)
+		{
+			vobj.render(context);
+		}
+		
+		context.restore();
 	}
 	
 	/**