Mobile Game

A web game designed for mobile devices.

by Taylor Lopez

HTML

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

<canvas></canvas>

CSS

body
{
    margin: 0;
    padding: 0;
    background: #000;
}
canvas
{
    display: block;
    margin: 0 auto;
    background: #fff;
}

JavaScript

var POP =
{
    WIDTH: 320,
    HEIGHT: 480,
    RATIO: null,
    currentWidth: null,
    currentHeight: null,
    canvas: null,
    ctx: null,
    
    init: function()
    {
        alert("init'ing!");
        POP.RATIO = POP.WIDTH / POP.HEIGHT;
        POP.currentWidth = POP.WIDTH;
        POP.currentHeight = POP.HEIGHT;
        POP.canvas = document.getElementsByTagName('canvas')[0];
        POP.canvas.width = POP.WIDTH;
        POP.canvas.height = POP.HEIGHT;
        POP.ctx = POP.canvas.getContext('2d');
        
        POP.resize();
    },
    
    resize: function()
    {
        alert("resizing!");
        POP.currentHeight = window.innerHeight;
        POP.currentWidth = POP.currentHeight * POP.RATIO;
        
        if (POP.ndroid || POP.ios)
            document.body.style.height = (window.innerHeight + 50) + 'px';
        
        POP.canvas.style.width = POP.currentWidth + 'px';
        POP.canvas.style.height = POP.currentHeight + 'px';
        
        window.setTimeout(function()
        {
           window.scrollTo(0, 1);
        }, 1);
    }
};

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