config/JavaScript/GameLoop/game.js

'use strict';

// Main variables
let DEBUG = true;
let canvas;
let context;
let cW;
let cH;

// FPS
let secondsPassed;
let oldTimeStamp;
let fps;

let dragging = false;

function mMove(e) {
    if (dragging) {
        point.pX = e.offsetX * cW / canvas.clientWidth | 0;
        point.pY = e.offsetY * cH / canvas.clientHeight | 0;
    };
}

function mDown(e) {
    dragging = true;
}

function mUp(e) {
    dragging = false;
}

function clearContext() {
    context.fillStyle = '#b27e56';
    context.fillRect(0, 0, cW, cH);
}

// Init
window.onload = function() {
    canvas = document.getElementById('game');
    context = canvas.getContext('2d');
    cW = canvas.width;
    cH = canvas.height;

    canvas.style.height = window.innerHeight + "px";
    if (DEBUG) {
        console.log('Canvas set size to ' + window.innerHeight + 'px');
        console.log(canvas.getBoundingClientRect());
    };

    canvas.addEventListener('mousedown', mDown, false);
    canvas.addEventListener('mouseup', mUp, false);
    canvas.addEventListener('mousemove', mMove, false);

    canvas.addEventListener('touchstart', mDown, false);
    canvas.addEventListener('touchend', mUp, false);
    canvas.addEventListener('touchmove', mMove, false);

    window.requestAnimationFrame(gameLoop);
};

window.addEventListener('resize', function() {
    let canvas = document.getElementById('game');
    canvas.style.height = window.innerHeight + "px";

    if (DEBUG) {
        console.log('Canvas resized to ' + window.innerHeight + 'px');
        console.log(canvas.getBoundingClientRect());
    };
}, true);

// GameLoop
function gameLoop(timeStamp) {
    // fps counter
    secondsPassed = (timeStamp - oldTimeStamp) / 1000;
    oldTimeStamp = timeStamp;
    fps = Math.round(1 / secondsPassed);
    // end fps counter

    update();
    draw();

    if (DEBUG) {
        context.font = '15px Arial';
        context.fillStyle = '#101024';
        context.fillText('FPS: ' + fps, 10, 20);
    };

    window.requestAnimationFrame(gameLoop);
}

function update() {

}

function draw() {
    clearContext();
}