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();
}