Add a road and a sky colour.
This commit is contained in:
parent
a21573a90e
commit
ab6edde236
3 changed files with 67 additions and 9 deletions
42
Road.js
Normal file
42
Road.js
Normal 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();
|
||||
}
|
||||
}
|
|
@ -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
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…
Reference in a new issue