diff --git a/Road.js b/Road.js new file mode 100644 index 0000000..b458799 --- /dev/null +++ b/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(); + } +} diff --git a/index.html b/index.html index 2364088..0d8d480 100644 --- a/index.html +++ b/index.html @@ -11,10 +11,13 @@ + + + diff --git a/renderer.js b/renderer.js index 51de7f7..46e9ef0 100644 --- a/renderer.js +++ b/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(); } /**