Browse Source

Add a road and a sky colour.

master
Starbeamrainbowlabs 5 years ago
parent
commit
ab6edde236
  1. 42
      Road.js
  2. 3
      index.html
  3. 31
      renderer.js

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

3
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>

31
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();
}
/**

Loading…
Cancel
Save