Crafty Odometer

Canvas odometer by Mark Crossley adaptation for Crafty.js

by Dmitry Slesarenko

HTML

<script src="https://github.com/craftyjs/Crafty/releases/download/0.7.1/crafty-min.js"></script>

JavaScript

Crafty.init();

Crafty.c("Odometer", {
  ready: true,

  init: function() {
    this.requires("2D, Canvas");
    this.h = 40;

    this.digits = 3;
    this.decimals = 0;
    this.colorDigits = '#F8F8F8';
    this.colorDigitsBack = '#050505';
    this.colorDecimals = '#010101';
    this.colorDecimalsBack = '#F0F0F0';
    this.fontName = 'sans-serif';
    this.fontSize = Math.floor(this.h * 0.85);
    this.wobbleFactor = 0.07;
    this.value = 0;
    this.toValue = 999;
    this.step = 1;
    this.enableChangeRate = true;
    this.changeRate = 10;

    this._doc = document;


    this._digitHeight = this.fontSize;
    this._stdFont = '600 ' + this.fontSize + 'px ' + this.fontName;
    this._digitWidth = Math.floor(this.h * 0.68);
    this.w = this._digitWidth * (this.digits + this.decimals);
    this._columnHeight = this._digitHeight * 11;
    this._verticalSpace = this._columnHeight / 12;
    this._zeroOffset = this._verticalSpace * 0.85;

    this._wobble = [];

    // Create buffers
    this._backgroundBuffer = this._createBuffer(this.w, this.h);
    this._backgroundContext = this._backgroundBuffer.getContext('2d');

    this._foregroundBuffer = this._createBuffer(this.w, this.h);
    this._foregroundContext = this._foregroundBuffer.getContext('2d');

    this._digitBuffer = this._createBuffer(this._digitWidth, this._columnHeight * 1.1);
    this._digitContext = this._digitBuffer.getContext('2d');

    this._decimalBuffer = this._createBuffer(this._digitWidth, this._columnHeight * 1.1);
    this._decimalContext = this._decimalBuffer.getContext('2d');

    this._initialized = false;

    this.bind('Draw', this._draw);
    this.bind('EnterFrame', this._frameCb);
    this.bind('Change', this._changeCb);
  },

  _changeCb: function(e) {
    for (var key in e) {
      this[key] = e[key];
    }

    this.h = Math.floor(this.fontSize * 1.15);
    this._digitHeight = this.fontSize;
    this._stdFont = '600 ' + this._digitHeight + 'px ' + this.fontName;
   ...