let canvas, ctx, box;

init();
render();

function init() {
    // Initialize canvas
    canvas = document.getElementById('canvas');
    document.body.style.margin = '0px';
    onWindowResize();
    ctx = canvas.getContext('2d');

    // Initialize listeners
    window.addEventListener('resize', onWindowResize);
    document.addEventListener('touchstart', () => box.jump());

    // Initialize game
    box = new Box();
}

function render() {
    // Manage physics
    box.update();

    // Do rendering
    // canvas.width = canvas.width
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.fillStyle = 'rgb(255, 0, 0)';
    ctx.rect(0, 0, canvas.width, canvas.height);
    ctx.fill();

    box.drawOn(canvas);
    requestAnimationFrame(render);
}

function onWindowResize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}