Browse Source

Built (most) of a bicycle. Still need to add the handlebars though.

master
Starbeamrainbowlabs 4 years ago
parent
commit
3643c9eefe
5 changed files with 136 additions and 2 deletions
  1. +6
    -0
      .tern-project
  2. +124
    -0
      Bicycle.js
  3. +2
    -2
      Road.js
  4. +1
    -0
      index.html
  5. +3
    -0
      renderer.js

+ 6
- 0
.tern-project View File

@@ -0,0 +1,6 @@
{
"ecmaVersion": 6,
"libs": [
"browser"
]
}

+ 124
- 0
Bicycle.js View 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();
}
}

+ 2
- 2
Road.js View File

@@ -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]);


+ 1
- 0
index.html View File

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

+ 3
- 0
renderer.js View File

@@ -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…
Cancel
Save