Simple Boiler Plate for making Game with HTML5/JS targeting browser/ios/android

gistfile1.js

var GAMENAME =
{
    WIDTH: 320,
    HEIGHT: 480,

    scale: 1,
    offset: { top: 0, left: 0 },

    RATIO: null,
    currentWidth: null,
    currentHeight: null,
    canvas: null,
    ctx: null,

    init: function ()
    {
        GAMENAME.RATIO = GAMENAME.WIDTH / GAMENAME.HEIGHT;

        GAMENAME.currentWidth = GAMENAME.WIDTH;
        GAMENAME.currentHeight = GAMENAME.HEIGHT;

        GAMENAME.canvas = document.getElementById('mycanvs');

        GAMENAME.canvas.width = GAMENAME.WIDTH;
        GAMENAME.canvas.height = GAMENAME.HEIGHT;

        GAMENAME.ctx = GAMENAME.canvas.getContext("2d");

        GAMENAME.ua = navigator.userAgent.toLowerCase();
        GAMENAME.android = GAMENAME.ua.indexOf('android') > -1 ? true : false;
        GAMENAME.ios = (GAMENAME.ua.indexOf('iphone') > -1 || GAMENAME.ua.indexOf('ipad') > -1) ? true : false;


        GAMENAME.resize();


        GAMENAME.Input =
        {
            x: 0,
            y: 0,
            tapped: false,
            set: function (data)
            {
                this.x = (data.pageX - GAMENAME.offset.left) / GAMENAME.scale;
                this.y = (data.pageY - GAMENAME.offset.top) / GAMENAME.scale;
                this.tapped = true;
                // test for click is ok
                //GAMENAME.draw.circle(this.x, this.y, 10, "red");
            }
        }

        // listen for clicks

        window.addEventListener('click', function (e)
        {
            e.preventDefault();
            GAMENAME.Input.set(e);
        }, false);

        // listen for touches

        window.addEventListener('touchstart', function (e)
        {
            e.preventDefault();
            GAMENAME.Input.set(e.touches[0]);
        }, false);

        window.addEventListener('touchmove', function (e)
        {
            e.preventDefault();
        }, false);

        window.addEventListener('touchend', function (e)
        {
            e.preventDefault();
        }, false);
    },

    resize: function ()
    {
        GAMENAME.currentHeight = window.innerHeight;
        GAMENAME.currentWidth = GAMENAME.currentHeight * GAMENAME.RATIO;

        if (GAMENAME.android || GAMENAME.ios)
        {
            document.body.style.height = (window.innerHeight + 50) + 'px';
        }

        GAMENAME.canvas.style.width = GAMENAME.currentWidth + 'px';
        GAMENAME.canvas.style.height = GAMENAME.currentHeight + 'px';
        GAMENAME.scale = GAMENAME.currentWidth / GAMENAME.WIDTH;
        GAMENAME.offset.top = GAMENAME.canvas.offsetTop;
        GAMENAME.offset.left = GAMENAME.canvas.offsetLeft;

        window.setTimeout(function ()
        {
            window.scrollTo(0, 1);
        }, 1);
    }
};

GAMENAME.draw =
{
    clear: function ()
    {
        GAMENAME.ctx.clearRect(0, 0, GAMENAME.WIDTH, GAMENAME.HEIGHT);
    },

    rect: function (x, y, w, h, col)
    {
        GAMENAME.ctx.fillStyle = col;
        GAMENAME.ctx.fillRect(x, y, w, h);
    },

    circle: function (x, y, r, col)
    {
        GAMENAME.ctx.fillStyle = col;
        GAMENAME.ctx.beginPath();
        GAMENAME.ctx.arc(x + 5, y + 5, r, 0, Math.PI * 2, true);
        GAMENAME.ctx.closePath();
        GAMENAME.ctx.fill();
    },
    text: function (string, x, y, size, col)
    {
        GAMENAME.ctx.font = "bold " + size + 'px Monospace';
        GAMENAME.ctx.fillStyle = col;
        GAMENAME.ctx.fillText(string, x, y);
    }
}

window.addEventListener('load', GAMENAME.init, false);
window.addEventListener('resize', GAMENAME.resize, false);