110 lines
2.8 KiB
JavaScript
110 lines
2.8 KiB
JavaScript
"use strict";
|
|
|
|
class Renderer
|
|
{
|
|
constructor(canvas)
|
|
{
|
|
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)"));
|
|
this.hillSets.push(new HillSet(new Vector(2048, this.canvas.height * 0.2), 0.4, "rgb(50, 111, 8)"));
|
|
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[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.visibleObjects.push(...this.hillSets);
|
|
|
|
this.road = new Road(this.canvas, new Vector(0, this.canvas.height * 0.9));
|
|
this.visibleObjects.push(this.road);
|
|
|
|
this.bicycle = new Bicycle(new Vector(this.canvas.width / 2, this.canvas.height * 0.9));
|
|
this.visibleObjects.push(this.bicycle);
|
|
|
|
for (let vobj of this.visibleObjects)
|
|
vobj.speed = this.speed;
|
|
}
|
|
|
|
start()
|
|
{
|
|
this.lastTime = +new Date();
|
|
this.nextFrame();
|
|
}
|
|
|
|
nextFrame()
|
|
{
|
|
let startTime = +new Date();
|
|
this.update((+new Date() - this.lastTime) / 1000);
|
|
this.render(this.canvas, this.context);
|
|
|
|
this.lastTime = startTime;
|
|
|
|
requestAnimationFrame(this.nextFrame.bind(this));
|
|
}
|
|
|
|
/**
|
|
* Updates the simluation ready for the next frame.
|
|
* @param {number} dt The number of seconds since the last frame was rendered.
|
|
*/
|
|
update(dt)
|
|
{
|
|
for(let vobj of this.visibleObjects)
|
|
{
|
|
vobj.update(dt);
|
|
}
|
|
}
|
|
|
|
render(canvas, context)
|
|
{
|
|
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 vobj of this.visibleObjects)
|
|
{
|
|
vobj.render(context);
|
|
}
|
|
|
|
context.restore();
|
|
}
|
|
|
|
/**
|
|
* Updates the canvas size to match the current viewport size.
|
|
*/
|
|
matchWindowSize() {
|
|
this.canvas.width = window.innerWidth;
|
|
this.canvas.height = window.innerHeight;
|
|
|
|
//this.render(this.context);
|
|
}
|
|
|
|
/**
|
|
* Makes the canvas size track the window size.
|
|
*/
|
|
trackWindowSize() {
|
|
this.matchWindowSize();
|
|
window.addEventListener("resize", this.matchWindowSize.bind(this));
|
|
}
|
|
}
|
|
|
|
window.addEventListener("load", function (event) {
|
|
var canvas = document.getElementById("canvas-main"),
|
|
renderer = new Renderer(canvas);
|
|
renderer.start();
|
|
window.renderer = renderer;
|
|
});
|