Skip to content

Instantly share code, notes, and snippets.

@nitaku

nitaku/README.md

Last active December 27, 2015 06:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nitaku/7280839 to your computer and use it in GitHub Desktop.
Save nitaku/7280839 to your computer and use it in GitHub Desktop.
Download ZIP
Starfighter
Raw
README.md

SVG starfighter test.

Raw
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
Raw
index.css
.ship {
fill: green;
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Starfighter</title>
<link type="text/css" href="index.css" rel="stylesheet"/>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="index.js"></script>
</head>
<body onload="main()"></body>
</html>
Raw
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);
Raw
index.sass
.ship
fill: green
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment