Built (most) of a bicycle. Still need to add the handlebars though.
This commit is contained in:
parent
c21a727141
commit
3643c9eefe
5 changed files with 136 additions and 2 deletions
6
.tern-project
Normal file
6
.tern-project
Normal file
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"ecmaVersion": 6,
|
||||
"libs": [
|
||||
"browser"
|
||||
]
|
||||
}
|
124
Bicycle.js
Normal file
124
Bicycle.js
Normal file
|
@ -0,0 +1,124 @@
|
|||
"use strict";
|
||||
|
||||
class Bicycle
|
||||
{
|
||||
constructor(inPos)
|
||||
{
|
||||
this.pos = inPos;
|
||||
|
||||
this.wheelLeft = new Wheel(new Vector(-47, 20), 30, 200);
|
||||
this.wheelRight = new Wheel(new Vector(47, 20), 30, 200);
|
||||
|
||||
this.mainColour = "#4f32d2";
|
||||
this.seatColour = "#312b50";
|
||||
this.seatSize = 10;
|
||||
}
|
||||
|
||||
update(dt)
|
||||
{
|
||||
this.wheelLeft.update(dt);
|
||||
this.wheelRight.update(dt);
|
||||
}
|
||||
|
||||
render(context)
|
||||
{
|
||||
context.save();
|
||||
context.translate(this.pos.x, this.pos.y);
|
||||
|
||||
this.wheelLeft.render(context);
|
||||
this.wheelRight.render(context);
|
||||
|
||||
// Bicycle frame
|
||||
var pedalPosition = this.wheelRight.pos.clone().subtract(new Vector(35, 0)),
|
||||
seatPosition = pedalPosition.clone().add(new Vector(15, -40));
|
||||
context.beginPath();
|
||||
context.moveTo(this.wheelLeft.pos.x, this.wheelLeft.pos.y);
|
||||
context.lineTo(this.wheelLeft.pos.x + 20, this.wheelLeft.pos.y - 52);
|
||||
context.moveTo(this.wheelLeft.pos.x + 13, this.wheelLeft.pos.y - 35);
|
||||
context.lineTo(pedalPosition.x, pedalPosition.y);
|
||||
context.lineTo(seatPosition.x, seatPosition.y);
|
||||
context.moveTo(pedalPosition.x, pedalPosition.y);
|
||||
context.lineTo(this.wheelRight.pos.x, this.wheelRight.pos.y);
|
||||
context.lineTo(seatPosition.x - 4, seatPosition.y + 10);
|
||||
context.lineTo(this.wheelLeft.pos.x + 14, this.wheelLeft.pos.y - 40);
|
||||
|
||||
context.lineWidth = 5;
|
||||
context.strokeStyle = this.mainColour;
|
||||
context.stroke();
|
||||
|
||||
this.renderSeat(context, seatPosition);
|
||||
|
||||
context.restore();
|
||||
}
|
||||
|
||||
renderSeat(context, pos)
|
||||
{
|
||||
context.save();
|
||||
context.translate(pos.x - this.seatSize * 0.3, pos.y);
|
||||
context.beginPath();
|
||||
context.moveTo(this.seatSize, -this.seatSize / 2.4);
|
||||
context.lineTo(-this.seatSize * 1.5, 0);
|
||||
context.lineTo(this.seatSize * 1.3, this.seatSize / 2.3);
|
||||
context.closePath();
|
||||
|
||||
context.fillStyle = this.seatColour;
|
||||
context.fill();
|
||||
|
||||
context.restore();
|
||||
}
|
||||
}
|
||||
|
||||
class Wheel
|
||||
{
|
||||
constructor(inPos, inRadius, inSpeed)
|
||||
{
|
||||
this.pos = inPos;
|
||||
this.radius = inRadius;
|
||||
this.speed = inSpeed / (Math.PI * 18);
|
||||
|
||||
this.rotation = 0;
|
||||
|
||||
this.rimColour = "#1f1e1e";
|
||||
this.spokeColour = "rgb(198, 176, 172)";
|
||||
this.spokeCount = 12;
|
||||
|
||||
this.spokeSpacing = (Math.PI*2) / this.spokeCount;
|
||||
}
|
||||
|
||||
update(dt)
|
||||
{
|
||||
this.rotation -= this.speed * dt;
|
||||
}
|
||||
|
||||
render(context)
|
||||
{
|
||||
context.save();
|
||||
context.translate(this.pos.x, this.pos.y);
|
||||
context.rotate(this.rotation);
|
||||
|
||||
context.beginPath();
|
||||
for (let r = 0; r < Math.PI; r += this.spokeSpacing)
|
||||
{
|
||||
context.moveTo(this.radius * Math.cos(r), this.radius * Math.sin(r));
|
||||
context.lineTo(this.radius * Math.cos(r + Math.PI), this.radius * Math.sin(r + Math.PI));
|
||||
}
|
||||
|
||||
context.lineWidth = 1;
|
||||
context.strokeStyle = this.spokeColour;
|
||||
context.stroke();
|
||||
|
||||
context.beginPath();
|
||||
context.ellipse(0, 0, this.radius * 0.95, this.radius * 0.95, 0, 0, Math.PI * 2, false);
|
||||
context.lineWidth = 3;
|
||||
context.stroke();
|
||||
|
||||
context.beginPath();
|
||||
context.ellipse(0, 0, this.radius, this.radius, 0, 0, Math.PI * 2, false);
|
||||
|
||||
context.strokeStyle = this.rimColour;
|
||||
context.lineWidth = 4;
|
||||
context.stroke();
|
||||
|
||||
context.restore();
|
||||
}
|
||||
}
|
4
Road.js
4
Road.js
|
@ -28,8 +28,8 @@ class Road
|
|||
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.moveTo(0, this.size.y / 2.2);
|
||||
context.lineTo(this.size.x, this.size.y / 2.2);
|
||||
|
||||
context.lineWidth = 5;
|
||||
context.setLineDash([35, 20]);
|
||||
|
|
|
@ -19,5 +19,6 @@
|
|||
<script src="./renderer.js" charset="utf-8"></script>
|
||||
<script src="./HillSet.js" charset="utf-8"></script>
|
||||
<script src="./Road.js" charset="utf-8"></script>
|
||||
<script src="./Bicycle.js" charset="utf-8"></script>
|
||||
</head>
|
||||
</html>
|
||||
|
|
|
@ -30,6 +30,9 @@ class Renderer
|
|||
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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue