Starfighter by nitaku

index.js

(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);

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Starfighter</title>
        <link type="text/css" href="index.css" rel="stylesheet"/>
        <script src="//d3js.org/d3.v3.min.js"></script>
        <script src="index.js"></script>
    </head>
    <body onload="main()"></body>
</html>

index.coffee

window.main = () ->
    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', (e) ->
        if d3.event.keyCode is 38
            ship.a += 1
        if d3.event.keyCode is 40
            ship.a -= 1
        if d3.event.keyCode is 39
            ship.vdir += 1
        if d3.event.keyCode is 37
            ship.vdir -= 1
        
    d3.select('body').on 'keyup', (e) ->
        if d3.event.keyCode is 38
            ship.a -= 1
        if d3.event.keyCode is 40
            ship.a += 1
        if d3.event.keyCode is 39
            ship.vdir -= 1
        if d3.event.keyCode is 37
            ship.vdir += 1
        
    ot = new Date().getTime()
    
    d3.timer () ->
        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', (d) -> d.x)
            .attr('cy', (d) -> d.y)
            
        return false

index.css

.ship {
  fill: green;
}

index.sass

.ship
    fill: green