Drawing Test

by whelkaholism

HTML

<button id="start">Start</button> :: 
<button id="stop">Stop</button>
<hr/>
<canvas width="400" height="200" id="c"></canvas>
<hr/>
Messages: <div id="msg"></div>
<hr/>
Actor messages: <div id="amsg"></div>

JavaScript

"use strict";
if(typeof(cFront) === 'undefined') var cFront = {};
if(typeof(cFront.Drawing) === 'undefined') cFront.Drawing = {};

cFront.Drawing.World = function(c, options)
{
    var _this = this;
    var _frame;
    var _start;
    var _delta;
    var _animid;
    var _running = false;
    var _actors = [];

    this.options = options || {};    
    this.options.clearEveryFrame = this.options.clearEveryFrame !== false;
    
    this.canvas = c;
    this.ctx = c.getContext("2d");    
    
    this.init = function()
    {
    };
    
    this.run = function()
    {
        _running = true;
        
        _start = new Date().getTime();
        _delta = 0;
        _frame = 0;     
        
        for(var i = 0; i < _actors.length; i++)
            actors[i].init();            
        
        _animid = requestAnimationFrame(_drawFrame);
    };
    
    this.end = function()
    {
        _running = false;
        _animid && cancelAnimationFrame(_animid);
    };
    
    this.addActor = function(actor)
    {
        _actors.push(actor);
        
        if(_running)
            actor.init();
    };
    
    this.width = function()
    {
        return this.canvas.width;
    }

    this.height = function()
    {
        return this.canvas.height;
    }
    
    var _drawFrame = function()
    {        
        if(!_running)
            return;              
        
        var w = _this.canvas.width;
        var h = _this.canvas.height;
        
        if(_this.options.clearEveryFrame)
            _this.ctx.clearRect(0, 0, w, h);
        
        _frame++;
        _delta = new Date().getTime() - _start;
        
        _this.options.onDrawing && _this.options.onDrawing.call(_this, _frame, _delta);
        
        for(var i = 0; i < _actors.length; i++)
        {
            if(_running && !_actors[i].expired())
                _actors[i].draw(_this.ctx, _delta, w, h, _this);
            else if(!_running)
                break;
        }
                
   ...