Add parallax scrolloing to the hills
This commit is contained in:
parent
6b6efb1c6c
commit
cf63528e0e
2 changed files with 10 additions and 9 deletions
|
@ -2,17 +2,18 @@
|
||||||
|
|
||||||
class HillSet
|
class HillSet
|
||||||
{
|
{
|
||||||
constructor(inSize, inHeightRange, inColour)
|
constructor(inSize, inHeightRange, inColour, inSpeed)
|
||||||
{
|
{
|
||||||
if(typeof inSize != "object") inSize = new Vector(2048, 1024);
|
if(typeof inSize != "object") inSize = new Vector(2048, 1024);
|
||||||
if(typeof inHeightRange != "number") inHeightRange = 0.4;
|
if(typeof inHeightRange != "number") inHeightRange = 0.4;
|
||||||
if(typeof inColour != "string") inColour = "green";
|
if(typeof inColour != "string") inColour = "green";
|
||||||
|
if(typeof inSpeed != "number") inSpeed = 30;
|
||||||
|
|
||||||
this.pos = new Vector(0, 0);
|
this.pos = new Vector(0, 0);
|
||||||
this.startPos = this.pos.clone();
|
this.startPos = this.pos.clone();
|
||||||
this.size = inSize;
|
this.size = inSize;
|
||||||
this.colour = inColour;
|
this.colour = inColour;
|
||||||
this.speed = 300; // in pixels per second
|
this.speed = inSpeed; // in pixels per second
|
||||||
|
|
||||||
this.heightRangeMultiplier = inHeightRange;
|
this.heightRangeMultiplier = inHeightRange;
|
||||||
this.heightRange = this.heightRangeMultiplier * this.size.y;
|
this.heightRange = this.heightRangeMultiplier * this.size.y;
|
||||||
|
|
14
renderer.js
14
renderer.js
|
@ -18,23 +18,23 @@ class Renderer
|
||||||
{
|
{
|
||||||
this.visibleObjects = [];
|
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.speed * 0.3));
|
||||||
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)", this.speed * 0.6));
|
||||||
this.hillSets.push(new HillSet(new Vector(2048, this.canvas.height * 0.2), 0.4, "rgb(50, 111, 8)"));
|
this.hillSets.push(new HillSet(new Vector(2048, this.canvas.height * 0.2), 0.4, "rgb(50, 111, 8)", this.speed * 0.8));
|
||||||
|
this.visibleObjects.push(...this.hillSets);
|
||||||
|
|
||||||
var hillOffset = this.canvas.height * 0.1;
|
var hillOffset = this.canvas.height * 0.1;
|
||||||
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);
|
||||||
this.visibleObjects.push(...this.hillSets);
|
|
||||||
|
|
||||||
this.road = new Road(this.canvas, new Vector(0, this.canvas.height * 0.9));
|
this.road = new Road(this.canvas, new Vector(0, this.canvas.height * 0.9));
|
||||||
|
this.road.speed = this.speed;
|
||||||
this.visibleObjects.push(this.road);
|
this.visibleObjects.push(this.road);
|
||||||
|
|
||||||
this.bicycle = new Bicycle(new Vector(this.canvas.width / 2, this.canvas.height * 0.9));
|
this.bicycle = new Bicycle(new Vector(this.canvas.width / 2, this.canvas.height * 0.9));
|
||||||
|
this.bicycle.speed = this.speed;
|
||||||
this.visibleObjects.push(this.bicycle);
|
this.visibleObjects.push(this.bicycle);
|
||||||
|
|
||||||
for (let vobj of this.visibleObjects)
|
|
||||||
vobj.speed = this.speed;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
start()
|
start()
|
||||||
|
|
Loading…
Reference in a new issue