Custom Class
Task
Create a new class derived from Imagesprite which moves in a circular motion around a center sprite.
Result
JavaScript
// Demo 16
const grayFrog = makeGrayFrogLibrary();
function start() {
// Load images and start demo when loading has finished
let ip = new grayFrog.ImagePreloader();
ip.preloadImages(
[
{ name: 'grid', source: 'images/grid.png' },
{ name: 'redStar', source: 'images/redStar.png' },
{ name: 'redBall', source: 'images/redBall.png' }
],
() => demo(ip.imageDictionary)
);
}
function demo(imageDictionary) {
// Initialize canvas, controller, and scene
let canvas = document.getElementById('demoCanvas');
let controller = new grayFrog.Controller(canvas, true);
let scene = controller.makeImageScene('main', imageDictionary.grid);
controller.scene = scene;
// 'Orbiter' class
class Orbiter extends grayFrog.ImageSprite {
constructor(name, image, radius, angleVelocity, angle = 0) {
super(name, 0, 0, image);
this._radius = radius;
this._angleVelocity = angleVelocity; // Degrees / s
this._angle = angle / 180 * Math.PI;
}
_customUpdate(elapsed) {
this.x = this.parent.midX + this._radius * Math.cos(this._angle);
this.y = this.parent.midY + this._radius * Math.sin(this._angle);
this._angle += this._angleVelocity * elapsed / 1000 / 180 * Math.PI;
}
}
// Create center sprite
let center = new grayFrog.ImageSprite(
'center', scene.midX, scene.midY, imageDictionary.redStar);
center.edgeBehaviour = grayFrog.EDGE_BEHAVIOUR.bounce;
scene.addChild(center);
// Create orbiter sprites
let mainOrbiter = new Orbiter(
'mainOrbiter', imageDictionary.redBall, 150, 60);
mainOrbiter.scale = 0.5;
center.addChild(mainOrbiter);
for (let i = 1; i <= 6; i++) {
let orbiter = new Orbiter(
'orbiter' + i, imageDictionary.redBall, 100, 120, i * 60);
orbiter.scale = 0.5;
mainOrbiter.addChild(orbiter);
}
// Start the game loop
controller.start();
}