Add a road and a sky colour.

This commit is contained in:
Starbeamrainbowlabs 2016-06-09 14:16:27 +01:00
parent a21573a90e
commit ab6edde236
3 changed files with 67 additions and 9 deletions

42
Road.js Normal file
View File

@ -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();
}
}

View File

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

View File

@ -6,14 +6,17 @@ class Renderer
{ {
this.canvas = canvas; this.canvas = canvas;
this.context = canvas.getContext("2d"); this.context = canvas.getContext("2d");
this.trackWindowSize(); this.trackWindowSize();
this.speed = 200;
this.skyColour = "#4f91d4";
this.setup(); this.setup();
} }
setup() setup()
{ {
this.visibleObjects = [];
this.hillSets = []; 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.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)")); 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[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[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); 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() start()
@ -48,22 +57,26 @@ class Renderer
*/ */
update(dt) update(dt)
{ {
for(let hillSet of this.hillSets) for(let vobj of this.visibleObjects)
{ {
hillSet.update(dt); vobj.update(dt);
} }
} }
render(canvas, context) 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.fillStyle = "red";
context.fillRect(10, 10, 100, 100);*/ context.fillRect(10, 10, 100, 100);*/
for(let hillSet of this.hillSets) for(let vobj of this.visibleObjects)
{ {
hillSet.render(context); vobj.render(context);
} }
context.restore();
} }
/** /**