Planez.io

14 Jan 2019 in Projects on Computer science

View this project on GitHub

Planez is a browser-based clicker game played by clicking on the screen to build increasingly more complex planes. Watch each plane you construct fly off the runway as you earn score towards unlocking the next plane.

Planez gameplay.

Implementation

Planez was built in pure vanilla JavaScript, and utilizes an HTML canvas element to animate sprite images on the screen. It makes use of JavaScript’s constructor functions to interface with the language like a loosely-typed object-oriented language. It uses these objects to keep track of individual plane sprites as they move across the screen.

The main game loop is implemented using the convenient window.requestAnimationFrame() method, which automatically enforces a framerate cap and drastically improves performance. It also uses custom event listeners and handlers to embrace the asynchronicity of the JavaScript language to its fullest.

Sample usage of JavaScript window.requestAnimationFrame() to create canvas animations

function animateRunway(timestamp) {
    looping = true;
    // draw plane sprites
    for(var i = 0; i < assets.runway_models.length; i++) {
        assets.runway_models[i].draw();
    };

    // ... calculate new sprite positions ... (suppressed)

    // request next animation frame (recursively) 
    if (assets.plane_models != 0) {
        window.requestAnimationFrame( animateRunway );
    } else { looping = false };
};

window.onload = init();

// launch animation
canvas.addEventListener("plane_models_change", function() {
    window.requestAnimationFrame( animateRunway );
});

Play the game online here!