game.js

// http://paulirish.com/2011/requestanimationframe-for-smart-animating
// shim later with setTimeout fallback
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

// Namespace for the game
var game = {
    width: 320,
    height: 480,
    // These properties will get set in the init function
    ratio: null,
    currentWidth: null,
    currentHeight: null,
    canvas: null,
    ctx: null,
    entities: [],
    // The interval for which a new cookie gets spawned
    nextCookie: 60,

    init: function(){
        game.ratio = game.width / game.height;
        game.currentWidth = game.width;
        game.currentHeight = game.height;
        game.canvas = document.getElementById('the_canvas');
        //
        //console.log(document.getElementByTagName('canvas')[0]);
        // A canvas context to enable us to interact with the canvas API 

        game.ctx = game.canvas.getContext('2d');
        game.resize();
        
        // we need to sniff out Android and iOS
        // so that we can hide the address bar in
        // our resize function
        game.ua = navigator.userAgent.toLowerCase();
        game.android = game.ua.indexOf('android') > -1 ? true : false;
        game.ios = ( game.ua.indexOf('iphone') > -1 || game.ua.indexOf('ipad') > -1  ) ? true : false;

        // Listen to input events
        // listen for clicks
        window.addEventListener('click', function(e) {
            e.preventDefault();
            game.Input.set(e);
        }, false);

        // listen for touches
        window.addEventListener('touchstart', function(e) {
            e.preventDefault();
            // the event object has an array
            // named touches; we just want
            // the first touch
            game.Input.set(e.touches[0]);
        }, false);

        window.addEventListener('touchmove', function(e) {
            // prevent default behaviour such as scrolling
            e.preventDefault();
        }, false);

        window.addEventListener('touchend', function(e) {
            // as above
            e.preventDefault();
        }, false);
        
        game.loop();
    },
    update: function(){
        game.nextCookie -= 1;

        // If its about time throw in a new cookie into the scene and randomize the next insertion
        if(game.nextCookie < 0){
            game.entities.push(new game.Cookie());
            game.nextCookie = (Math.random() * 100) + 100;
        }

        var i;

        // Spawn a new instance of touch if the user has tapped the screen
        if(game.Input.tapped){
            game.entities.push(new game.Touch(game.Input.x, game.Input.y));
            game.Input.tapped = false;
        }
        

        // Cycle through all the entities and update them
        for(i = 0; i < game.entities.length; i++){
            game.entities[i].update();
            // Delete from array of remove flag is set to true
            if(game.entities[i].remove){
                game.entities.splice(i, 1);
            }
        }
    },
    render: function(){
        game.Draw.rect(0, 0, game.width, game.height, '#CCC');

        // cycle through all entities and render to canvas
        for (i = 0; i < game.entities.length; i += 1) {
            game.entities[i].render();
        }
    },
    // Request the animation frame
    // then proceed to updating
    // and last rendering
    loop: function(){
       requestAnimFrame(game.loop);
       game.update();
       game.render();
    },
    resize: function(){
       game.currentHeight = window.innerHeight;
       
       // Resize the width in proportion to the current height based on the ratio initially calculated
       game.currentWidth = game.currentHeight * game.ratio;
        
       // Hide the address bar
       if(game.android || game.ios){
           document.body.style.height = (window.innerHeight + 50) + 'px';
       }

       // Scale the canvas to the current width and height
       game.canvas.style.width = game.currentWidth + 'px';
       game.canvas.style.height = game.currentHeight + 'px';
    }
};

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

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

    circle: function(x, y, r, col) {
        game.ctx.fillStyle = col;
        game.ctx.beginPath();
        game.ctx.arc(x + 5, y + 5, r, 0,  Math.PI * 2, true);
        game.ctx.closePath();
        game.ctx.fill();
    },

    text: function(string, x, y, size, col) {
        game.ctx.font = 'bold '+size+'px Monospace';
        game.ctx.fillStyle = col;
        game.ctx.fillText(string, x, y);
    }
};

game.Input = {
    x: 0,
    y: 0,
    tapped:false,
    set: function(data){
        var offsetTop = game.canvas.offsetTop;
        var offsetLeft = game.canvas.offsetLeft;
        var scale = game.currentWidth / game.width;
        console.log(offsetTop);
        console.log(offsetLeft);
        this.x = (data.pageX - offsetLeft) / scale;
        this.y = (data.pageY - offsetTop) / scale;

        this.tapped = true;

        game.Draw.circle(this.x, this.y, 5, 'red');
    }
};

// Touch object
game.Touch = function(x, y){
    this.type ='touch';
    this.x = x;
    this.y = y;
    this.r = 5;
    this.opacity = 1;
    this.fade = 0.05;
    this.remove = false;

    this.update = function(){
        this.opacity -= this.fade;
        // Flag for deletion when opacity is lower than 0
        this.remove = (this.opacity < 0)?true: false; 
    };

    this.render = function(){
        game.Draw.circle(this.x, this.y, this.r, 'rgba(255,0,0,'+this.opacity+')');
    };
};

// Cookie object
game.Cookie = function(){
    this.type = 'cookie';
    this.x = Math.random() * (game.width-100);
    this.r = Math.random() * (25 - 10) + 10;
    this.y = -100;
    this.velocity = (Math.random() * 3) + 1;
    this.waveSize = (Math.random() * 5)+ this.r;
    this.xConstant = this.x;
    this.remove = false;
    
    // Move down the screen by 1px
    this.update = function(){
        var time = new Date().getTime() * 0.002;
        this.y += this.velocity;
        this.x = this.waveSize * Math.sin(time) + this.xConstant;
    };

    if(this.y > game.height){
        this.remove = true;
    }

    this.render = function(){
        game.Draw.circle(this.x, this.y, this.r, '#000');
    };
};
game.collides = function(a, b){
    // Square distance between two points
    var distance_squared = (((a.x - b.x) * (a.x - b.x)) + ((a.y - b.y) * (a.y -b.y)));
    var radii_squared = (a.r + b.r) * (a.r + b.r);
    
    if(distance_squared < radii_squared){
        return true;
    }
    else{
        return false;
    }
};

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

index.html

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">

<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" />

<style type="text/css">
body { margin: 0; padding: 0; background: #000;}
#the_canvas{ display: block; margin: 0 auto; background: #fff; }
</style>

</head>

<body>

<canvas id="the_canvas" width=320 height=480></canvas>
<script type="text/javascript" src="game.js"></script>
</body>
</html