Pure sidescroller

by Konstantin Cryman

HTML

<canvas id="MyCan"></canvas>

CSS

#MyCan{
  margin: 40px auto;
  width: 500 ;
  height: 500;
}


canvas {
    image-rendering: optimizeSpeed;             /* Older versions of FF          */
    image-rendering: -moz-crisp-edges;          /* FF 6.0+                       */
    image-rendering: -webkit-optimize-contrast; /* Safari                        */
    image-rendering: -o-crisp-edges;            /* OS X & Windows Opera (12.02+) */
    image-rendering: pixelated;                 /* Awesome future-browsers       */
    -ms-interpolation-mode: nearest-neighbor;   /* IE                            */
}

JavaScript

var Processor = function( width, height ){

		var self = this;

 		this.distance = function(X1,Y1,X2,Y2){ 
      return Math.sqrt( Math.abs( Math.pow( X2 - X1, 2 ) ) + Math.abs( Math.pow( Y2 - Y1, 2 ) ) ); 
    };

    this.canvas = document.getElementById('MyCan');
    this.canvas.width = width;
    this.canvas.height = height;
    this.context = this.canvas.getContext('2d');
    
    this.canvas.addEventListener( 'mousedown', function( event ){
    		self.worldClick( event );
    }, false );
    
    this.worldClickEvents = [];
    
    this.worldClick = function( event ){
        var X =  event.offsetX; 
        var Y =  event.offsetY; 
      	this.worldEach( function( obj ){ 
          		if( self.distance( X, Y, obj.x, obj.y ) <= obj.size*6 ){
              		if( obj.click ) obj.click( event );
              }
        });
    };
    
		this.frame = 0;

		this.world = {};
		
    this.worldAdd = function( name, obj ){ 
    			this.world[ name ] = obj;
    };
  
  	this.worldEach = function( callback ){
    		for( var key in this.world ){
        		callback( this.world[key], key );
        }
    };
    
    this.worldRemove = function( name ){
    		delete this.world[name];
    }

		this.worldUpdate = function(){
    		this.worldEach( function( obj ){ 
        			if(obj.update) obj.update();
        });
    };

		this.update = function(){
    
    		self.frame++;
    		if(!self.paused){
        		self.runFuncs();
            self.worldUpdate();
            self.canvasUpdate();
        }
        
        requestAnimationFrame( self.update );
    };
    
    this.paused = false;
    
    this.runFuncs = function(){
    	for( var i = 0; i < this.funcs.length; i++ ){
      	this.funcs[i]();
      }
    };

		this.funcs = [];
    
    this.addFunc = function( func ){
    		this.funcs.push( func );
    }

    this.canvasUpdate = function(){
    		this.context.clearRect( 0, 0, this.canvas.width, this.canvas.height );
        this.worldEach(function( obj ){
         ...