main.js

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
    60,
    window.innerWidth / window.innerHeight,
    1,
    10000
);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xaaaaaa, 1);

const canvas = $('#canvascontainer').append(renderer.domElement);
let distance = 4;
let started = false;
let percent = 0;
camera.position.set(0, 5, distance);
camera.rotation.x -= 0.75;
let scoreSubmitted = false;
let level = 1;
let data;
let reqId;

$.getJSON('levels.json', d => {
    data = d;
    loadLevel(level);
    $('#play').show();
    $('#play').click(start);
    $('#next').show();
    $('#score').hide();
    $('#level').html('Level ' + level);
    reqId = requestAnimationFrame(render);
    console.clear();
    console.log(
        "If you're interested to look into the source code, it's avaliable here: https://github.com/gldanoob/webgl-rolling-sky"
    );
});

//start function
function start(e) {
    e.preventDefault();
    if (!started) {
        started = true;
        ball.speed.z = -0.15;
        $('#main').fadeOut(300);
        $('#name').hide();
        reset();
        world.forEach(v => {
            if (v instanceof Bouncer) {
                v.mesh.position.y = 0;
            }
        });
        $('#main').css('pointer-events', 'none');
    }
}
function reset() {
    ball.landed = true;
    ball.tmpZ = 0;
    camera.position.set(0, 5, distance);
    ball.mesh.position.set(0, 0.6, 0);
    ball.speed.y = 0;
    ball.count2Lose = 0;
}

function nextLevel() {
    percent = 0;
    while (
        (selectedObject = scene.getObjectByName('level component')) !== undefined
    ) {
        scene.remove(selectedObject);
    }
    world.length = 0;
    level++;
    loadLevel(level);
    reset();
    $('#score').hide();
    $('#level').show();
    $('#level').html('Level ' + level);
    $('#prev').show();
    $('#retry').hide();
    $('#play').show();
    if (level == data.length) {
        $('#next').hide();
    }
}

function prevLevel() {
    percent = 0;
    while (
        (selectedObject = scene.getObjectByName('level component')) != undefined
    ) {
        scene.remove(selectedObject);
    }
    world.length = 0;
    level--;
    loadLevel(level);
    reset();
    $('#score').hide();
    $('#level').show();
    $('#level').html('Level ' + level);
    $('#next').show();
    $('#retry').hide();
    $('#play').show();
    if (level == 1) {
        $('#prev').hide();
    }
}

const light = new THREE.HemisphereLight(0xeeeeee, 0x777777);
scene.add(light);
const world = [];
function loadLevel(level) {
    const index = level - 1;
    renderer.setClearColor(parseInt(data[index].background));
    ball.mesh.material.color.setHex(parseInt(data[index].ball));
    for (var i in data[index].data) {
        for (var j in data[index].data[i]) {
            switch (data[index].data[i][j]) {
                case 1:
                    world.push(new Mat(j - 2, -i, data[index].mat));
                    break;
                case 2:
                    world.push(new Bouncer(j - 2, -i, data[index].bouncer));
                    break;
                case 3:
                    world.push(new Mat(j - 2, -i, data[index].mat));
                    world.push(new Obstacle(j - 2, -i, data[index].obstacle));
            }
        }
    }
}

var ball = new Ball();

keystate = [];

time = 0;
function render(timestamp) {
    dt = timestamp - time;
    time = timestamp;

    renderer.render(scene, camera);
    ball.update(dt * 3 / 50);
    percent = Math.ceil(
        Math.abs(ball.mesh.position.z) / data[level - 1].data.length * 100
    );

    percent = percent > 100 ? 100 : percent;
    $('#percent').html(percent + '%');
    if (keystate[37]) ball.mesh.position.x -= 0.15;
    if (keystate[39]) ball.mesh.position.x += 0.15;
    reqId = requestAnimationFrame(render);
};

//controls

function gameover() {
    started = false;
    ball.speed.z = 0;
    $('#main').fadeIn(500);
    $('#retry').show();
    $('#retry').click(start);
    $('#level').hide();
    $('#score').show();
    $('#score').html($('#percent').html());
    $('#main').css('pointer-events', 'auto');
}