im currently doing a JavaScript exersise involving classes and just cant seem to get it working, even when i follow the example exactly. anyu help and exlinations would be greatly appretiated, thanks here is the exersise so you can see the end goal and what ive been following: https://gamr1520.github.io/GAMR1520/exercises/6.2.html
code bellow (forgot to add moduleScript.js, added it now):
Modules.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>classes and modules</title>
<link rel="stylesheet" href="stylesheet.css">
<script src="moduleScript.js" type="module" defer></script>
</head>
<body>
<h1>Classes and Moduels</h1>
<canvas id="canvas" width="250" height="150"></canvas>
</body>
</html>
thing.js
export default class Thing {
constructor(x, y, size, hue) {
this.x = x;
this.y = y;
this.size = size;
this.fillStyle = `hsl(${hue}, 30%, 60%)`;
this.angle = angle;
this.rotationRate = 0;
this.speed = 100;
}
get xSpeed() {
return Math.cos(this.angle) * this.speed;
}
get ySpeed() {
return Math.sin(this.angle) * this.speed;
}
update(elapsed) {
this.rotattionRate += (Math.random() - 0.5);
this.rotationRate = Math.max(this.rotationRate, -2 * Math.PI);
this.rotationRate = Math.min(this.rotationRate, 2 * Math.PI);
this.angle += this.rotationRate * elapsed;
this.x += this.xSpeed * elapsed;
this.y += this.ySpeed * elapsed;
}
draw(ctx) {
ctx.save();
ctx.fillStyle = this.fillStyle;
ctx.translate(this.x, this.y);
ctx.rotate(this.angle);
ctx.beginPath();
ctx.arc(0, 0, this.size/2, Math.PI / 2, 1.5 * Math.PI)
ctx.lineTo(this.size, 0);
ctx.restore();
}
}
follower.js
export default class Follower {
constructor(x, y, speed, target) {
this.target = target;
this.speed = speed;
this.x = x;
this.y = y;
}
get angle() {
const dy = this.target.y - this.y;
const dx = this.target.x - this.x;
return Math.atan2(dy, dx);
}
get xSpeed() {
return Math.cos(this.angle) * this.speed;
}
get ySpeed() {
return Math.sin(this.angle) * this.spped;
}
update(elapsed) {
this.x += this.xSpeed * elapsed;
this.y += this.ySpeed * elapsed;
}
draw(ctx) {
ctx.save();
ctx.strokeStyle = this.target.fillStyle;
ctx.lineWidth = 2;
ctx.translate(this.x, this.y);
ctx.rotate(this.x, this.y);
ctx.beginPath();
ctx.moveTo(-10, 0);
ctx.lineTo(10, 0);
ctx.moveTo(5, -5);
ctx.lineTo(10, 0);
ctx.lineTo(5, 5);
ctx.stroke();
ctx.restore();
}
}
scene.js
import Thing from './thing.js';
import Follower from './follower.js';
export default class Scene {
constructor(nThings, canvas) {
this.things = Array.from({length: nThings}, () => {
return new Thing(
Math.random() * canvas.width,
Math.random() * canvas.height,
20 + Math.random() * 10,
Math.random() * 360,
Math.random() * 2 * Math.PI
);
});
this.followes = this.things.map((thing) => {
return new Follower(
canvas.width / 2,
canvas.height / 2,
thing.speed / 2, thing
);
});
}
draw(ctx) {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas,height);
this.followers.forEach(thing => {
thing.draw(ctx);
});
this.things.forEach(things => {
thing.draw(ctx);
});
}
update (elapsed) {
this.things.forEach(thing => {
thing.update(elapsed);
});
this.followers.forEach(thing => {
thing.update(elapsed);
});
}
}
moduleScript.js
import Scene from './scene.js';
const ctx = canvas.getContext("2d");
const scene = new Scene(100, canvas);
let p;
function frame(ts) {
const elapsed = ts - p || 0;
scene.update(elapsed / 1000);
scene.draw(ctx);
p = ts;
requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
stylesheet.css
body {
background: #ffffff;
color: #d6d6d6;
font-family: monospace;
max-width: auto;
}
canvas {
background: #a1a1a1;
width: 100%;
}