Map / Graph

HTML

<script src="http://yandex.st/raphael/2.1.0/raphael.js"></script>
<script src="http://www.shapevent.com/scaleraphael/scale.raphael.js"></script>
<div id='playfield'></div>

JavaScript

window.requestAnimationFrame = (function() {
    return window.requestAnimationFrame || //Chromium 
    window.webkitRequestAnimationFrame || //Webkit
    window.mozRequestAnimationFrame || //Mozilla Geko
    window.oRequestAnimationFrame || //Opera Presto
    window.msRequestAnimationFrame || //IE Trident?
    function(callback, element) { //Fallback function
        window.setTimeout(callback, 1000 / 60);
    }

})();

var points = [[50, 40], [100, 40], [50, 80], [40, 40], [100, 100]];

var segments = [[0,1], [1,2], [2,3], [3,4], [4,0]];

var paper = Raphael(10, 10, 640, 480);
    
function init() {
    var i;
    
    for (i=0; i < points.length; i++) {
        paper.circle(points[i][0], points[i][1], 5).attr('fill', '#ccc');
        paper.circle(points[i][0], points[i][1], 5).attr('fill', '#uuu');
    }
                    
    for (i=1; i < segments.length; i++) {
        paper.path('M '+points[i-1][0]+' '+points[i-1][1]+' L '+points[i][0]+' '+points[i][1]);
    }

    player.init(paper);
    paper.setViewBox(10, 10, 320, 240);
}                


var player = {
    x: 50.0,
    y: 40.0,
    sourcePoint: 0,
    targetPoint: 1,
    route: [2, 3, 4],
    circle: undefined,
    speed: 5.0, // pixels per second
    wait: 0,
    init: function(paper) {
        this.circle = paper.circle(this.x, this.y, 2);
        this.circle.attr('fill', '#c00');
    },
    update: function(delta) {
        if (this.wait > 0) {
            this.wait = this.wait - delta;
        } else {
            var dx = 1.0 * points[this.targetPoint][0] - this.x;
            var dy = 1.0 * points[this.targetPoint][1] - this.y;
            
            var d = Math.sqrt(dx*dx + dy*dy);
            if (d > 0.1) {
                this.circle.attr('fill', '#0c0');
                var f = Math.min(1, this.speed / d);
        
                this.x += dx * f * delta / 1000.0;
                this.y += dy * f * delta / 1000.0;
                this.circle.attr({cx: this.x, cy: this.y});
           ...