Gameloop Callbacks

Task

Create a landscape scene with parallax scrolling in which a helicopter is added at random times.

Result

JavaScript

// Demo 14

const grayFrog = makeGrayFrogLibrary();

function start() {
    // Load images and start demo when loading has finished    
    
    let ip = new grayFrog.ImagePreloader();
    ip.preloadImages(
        [
            { name: 'Sky', source: 'images/Sky.png' },
            { name: 'Sun', source: 'images/Sun.png' },
            { name: 'Cloud1', source: 'images/Cloud1.png' },
            { name: 'Cloud2', source: 'images/Cloud2.png' },
            { name: 'Cloud3', source: 'images/Cloud3.png' },
            { name: 'Cloud4', source: 'images/Cloud4.png' },
            { name: 'Cloud5', source: 'images/Cloud5.png' },
            { name: 'Cloud6', source: 'images/Cloud6.png' },
            { name: 'BackgroundHills', source: 'images/BackgroundHills.png' },
            { name: 'ForegroundHills', source: 'images/ForegroundHills.png' },
            { name: 'Street', source: 'images/Street.png' },
            { name: 'Helicopter', source: 'images/Helicopter.png' }
        ],
        () => demo(ip.imageDictionary)
    );
}

function demo(imageDictionary) {
    // Initialize canvas, controller, and scene
    let canvas = document.getElementById('demoCanvas');
    let controller = new grayFrog.Controller(canvas, true, (elapsed) => gameLoopCallback(elapsed));
    let scene = controller.makeDrawnScene('main');
    controller.scene = scene;

    // Game loop callback: add helicopter
    let timingInterval = 0; // Elapsed time since last helicopter
    let gameLoopCallback = function(elapsed) {
        timingInterval += elapsed;
        if (timingInterval > 10000 * (1 + Math.random())) {
            let helicopter = new grayFrog.ImageSprite(
                'Helicopter', 200, 200 - Math.floor(Math.random() * 150),
                imageDictionary.Helicopter);
            helicopter.scale = 0.7 - Math.random() * 0.4;
            helicopter.x = - helicopter.midX * helicopter.scale;
            helicopter.addAction(new grayFrog.Action(
                'x', scene.width + helicopter.midX, 8 - Math.random() * 3,
                grayFrog.EASING.linear,
                { atEndBehaviour: grayFrog.ACTION_AT_END_BEHAVIOUR.delete }));            
            scene.addChild(helicopter);   
            timingInterval = 0;
        }        
    };
   
    // Sky
    let sky = new grayFrog.ImageSprite('sky',
        scene.midX, scene.midY, imageDictionary.Sky );
    scene.addChild(sky);

    // Sun
    let sun = new grayFrog.ImageSprite('sun',
        600, 80, imageDictionary.Sun );
    scene.addChild(sun);
    
    // Cloud 1
    let cl1 = new grayFrog.ImageSprite('Cloud1',
        0, 10, imageDictionary.Cloud1 );
    cl1.angle = 0;
    cl1.speed = 50;
    cl1.positionAutoUpdate = true;
    cl1.edgeBehaviour = grayFrog.EDGE_BEHAVIOUR.wraparaound;
    scene.addChild(cl1);

    // Cloud 2
    let cl2 = new grayFrog.ImageSprite('Cloud2',
        100, 0, imageDictionary.Cloud2 );
    cl2.angle = 0;
    cl2.speed = 60;
    cl2.positionAutoUpdate = true;
    cl2.edgeBehaviour = grayFrog.EDGE_BEHAVIOUR.wraparaound;
    scene.addChild(cl2);

    // Cloud 3
    let cl3 = new grayFrog.ImageSprite('Cloud3',
        200, 60, imageDictionary.Cloud3 );
    cl3.angle = 0;
    cl3.speed = 45;
    cl3.positionAutoUpdate = true;
    cl3.edgeBehaviour = grayFrog.EDGE_BEHAVIOUR.wraparaound;
    scene.addChild(cl3);
    
    // Cloud 4
    let cl4 = new grayFrog.ImageSprite('Cloud4',
        0, 150, imageDictionary.Cloud4 );
    cl4.scale = 0.6;
    cl4.angle = 0;
    cl4.speed = 18;
    cl4.positionAutoUpdate = true;
    cl4.edgeBehaviour = grayFrog.EDGE_BEHAVIOUR.wraparaound;
    scene.addChild(cl4);
    
    // Cloud 5
    let cl5 = new grayFrog.ImageSprite('Cloud5',
        200, 180, imageDictionary.Cloud5 );
    cl5.scale = 0.5;
    cl5.angle = 0;
    cl5.speed = 15;
    cl5.positionAutoUpdate = true;
    cl5.edgeBehaviour = grayFrog.EDGE_BEHAVIOUR.wraparaound;
    scene.addChild(cl5);
    
    // Cloud 6
    let cl6 = new grayFrog.ImageSprite('Cloud6',
        300, 200, imageDictionary.Cloud6 );
    cl6.scale = 0.5;
    cl6.angle = 0;
    cl6.speed = 20;
    cl6.positionAutoUpdate = true;
    cl6.edgeBehaviour = grayFrog.EDGE_BEHAVIOUR.wraparaound;
    scene.addChild(cl6);

    // Background hills
    var bgh = new grayFrog.ImageSprite('BackgroundHills',
        scene.midX, 0, imageDictionary.BackgroundHills );
    bgh.y = scene.height - bgh.midY;
    bgh.angle = -180;
    bgh.speed = 60;
    bgh.positionAutoUpdate = true;
    bgh.edgeBehaviour = grayFrog.EDGE_BEHAVIOUR.wraparaound;
    scene.addChild(bgh);

    // Foreground hills
    var fgh = new grayFrog.ImageSprite('ForegroundHills',
        scene.midX, 0, imageDictionary.ForegroundHills );
    fgh.y = scene.height - fgh.midY;
    fgh.angle = -180;
    fgh.speed = 100;
    fgh.positionAutoUpdate = true;
    fgh.edgeBehaviour = grayFrog.EDGE_BEHAVIOUR.wraparaound;
    scene.addChild(fgh);
    
    // Street with posts
    var str = new grayFrog.ImageSprite('Street',
        scene.midX, 0, imageDictionary.Street );
    str.y = scene.height - str.midY;
    str.angle = -180;
    str.speed = 150;
    str.positionAutoUpdate = true;
    str.edgeBehaviour = grayFrog.EDGE_BEHAVIOUR.wraparaound;
    scene.addChild(str);
    
    // Start the game loop
    controller.start();
}