requestAnimationFrame()

Just playing around with requestAnimationFrame()

by sperske

HTML

<canvas id='field' height='200' width='320'></canvas>
<button id='walk'>Walk</button>

CSS

#field {
    border: thin black solid;
    width: 98%;
    background: #FFFFC7;
}

JavaScript

var time,
    field = document.getElementById('field'),
    context = field.getContext("2d"),
    player = {x: 10, y: 10},
    point = {x:100, y:100};

context.fillStyle = 'rgb(0, 0, 0)';

function draw() {
    var now = new Date().getTime(),
        dt = now - (time || now);

    time = now;
    if(dt
    context.fillRect(player.x, player.y, 1, 1);
    player.x += dt;
    if(player.x < point.x) {
        requestAnimationFrame(draw);
    } else {
        console.log('Done!');
    }
}

$('#walk').on('click', function() {
    draw();
});