(function() { window.main = function() { var height, ot, ship, svg, width; width = 960; height = 500; svg = d3.select('body').append('svg').attr('width', width).attr('height', height); ship = { x: width / 2, y: height / 2, v: 0, a: 0, dir: 0, vdir: 0 }; svg.selectAll('.ship').data([ship]).enter().append('circle').attr('class', 'ship').attr('r', 16); d3.select('body').on('keydown', function(e) { if (d3.event.keyCode === 38) ship.a += 1; if (d3.event.keyCode === 40) ship.a -= 1; if (d3.event.keyCode === 39) ship.vdir += 1; if (d3.event.keyCode === 37) return ship.vdir -= 1; }); d3.select('body').on('keyup', function(e) { if (d3.event.keyCode === 38) ship.a -= 1; if (d3.event.keyCode === 40) ship.a += 1; if (d3.event.keyCode === 39) ship.vdir -= 1; if (d3.event.keyCode === 37) return ship.vdir += 1; }); ot = new Date().getTime(); return d3.timer(function() { var dt, t; t = new Date().getTime(); /* delta in seconds */ dt = (t - ot) / 1000.0; ot = t; ship.v += Math.min(ship.a * dt * 50, 100); ship.dir += ship.vdir * dt; ship.x += ship.v * dt * Math.cos(ship.dir); ship.y += ship.v * dt * Math.sin(ship.dir); svg.selectAll('.ship').attr('cx', function(d) { return d.x; }).attr('cy', function(d) { return d.y; }); return false; }); }; }).call(this);