D3 Examples - Space Invaders

Space Invaders

Carefully designed to waste your time...

Open in full screen.. Use arrow for moving, 't' for firing. Hitting the moving square has some side-effects...

ooh.. a bit of a scenario there, to motivate players :

For decades , peace has reigned in the world of PROUT , ignoring recent events shaking the galaxy. Indeed, the infamous KLORBAN , after ravaging most of the planets of the universe, is preparing to make his next conquest of PROUT . The positronic radars just detected the KLORBAN mothership in the vicinity of Prout and now, SPROTCH Warrior bears the heavy task to stop KLORBAN ( frantically pressing the T key ) ( sorry for the bad writing :) )

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
    body {
        max-width: 960px;
        margin: 1px;
    }
​
    .player {
        border: 1px solid
    }
​
    div {
        width: 10px;
        height: 10px;
        margin: 1px 0 0 1px;
        float: left;
        background: #eee;
        display: inline-block;
        cursor: pointer;
    }
​
</style>
<body>
<script src="//d3js.org/d3.v4.0.0-alpha.24.min.js"></script>
<script>
​
​
var CONST = {
    FOE: 'FOE',
    YOU: 'YOU',
    BULLET: 'BULLET'
};
​
var timer = {
    FOE: 100,
    YOU: 200,
    BULLET: 30
};
​
var bulletTimer;
var n = 4002;
var bodyWidth = 960;
var width = 10 + 1; // width + margin
var elementPerLines = Math.round(bodyWidth/(10+1));
var numberOfLines = Math.floor(n/elementPerLines)+1;
​
var whiteblue = d3.interpolateRgb("#eee", "steelblue"),
        blueoraÅnge = d3.interpolateRgb("steelblue", "orange"),
        orangewhite = d3.interpolateRgb("orange", "#eee");
​
​
var bombColorScale = d3.scaleCategory10().domain([0, 1, 2, 3, 4]);
​
var difficultyScale = d3.scaleLinear().domain([0,10]).range([ "#eee" , "#777" ]);
var difficultyLevel = 0;
​
​
var score = 0;
​
var bombsArray = d3.range(n);
var player = 3840;
var enemy = 56;
​
var position = {
    FOE: enemy,
    YOU: player
};
​
var colors = {
    FOE: 'red',
    YOU: 'black',
    BULLET: 'blue'
};
​
​
var foeDelta = 1;
​
var grid = d3.select("body").selectAll("div")
        .data(bombsArray, function(d) { return d});
​
var gridUpdate = grid.enter().append("div").merge(grid)
        .style('background-color', function(d){
            if (d === player) {
                return 'black';
            }
            if (d === enemy) {
                return 'red'
            }
            return difficultyScale(difficultyLevel);
        }
);
​
d3.select("body").on("keydown", function() {
    if (d3.event.keyCode === 39) { moveFrom(CONST.YOU, 1) }
​
    if (d3.event.keyCode === 37) { moveFrom(CONST.YOU, -1) }
​
    if (d3.event.keyCode === 84) { fireBullet(); }
});
​
var timerFoe = d3.interval(function(){
    !moveFrom(CONST.FOE, foeDelta) && ( foeDelta = -foeDelta);
​
}, timer.FOE);
​
function moveFrom(whoToMove, delta){
    var currentObjectPosition = position[whoToMove];
    var retValue = true;
​
​
    if ( (currentObjectPosition  % elementPerLines) + delta === -1 || (currentObjectPosition % elementPerLines) + delta === elementPerLines) {
        if (whoToMove === CONST.YOU)
            return false;
        else {
            if ((currentObjectPosition % elementPerLines) + delta === -1) {
                (delta = elementPerLines);
            } else {
                delta = elementPerLines;
            }
            retValue = false;
        }
    }
​
    var node = gridUpdate.nodes()[currentObjectPosition];
    var _sel = d3.select(node);
​
    _sel.transition().duration(600).style('background-color', function(d,i) {
        return difficultyScale(difficultyLevel);
    });
    currentObjectPosition+= delta;
​
    position[whoToMove] = currentObjectPosition;
​
    node = gridUpdate.nodes()[currentObjectPosition];
    _sel = d3.select(node);
    _sel.transition().delay(10).duration(50).                                                style('background-color', function(d,i) {
        if (whoToMove === CONST.YOU) return 'black';
        return 'red';
    });
​
    if (position.FOE === position.YOU) {
        gameOver();
​
    }
​
    return retValue;
}
​
function success() {
​
    timerFoe.stop();
    timer.FOE = timer.FOE-10;
​
    timerFoe = d3.interval(function(){
        !moveFrom(CONST.FOE, foeDelta) && ( foeDelta = -foeDelta);
​
    }, timer.FOE);
​
    difficultyLevel++;
    gridUpdate.transition().duration(100)
            .style('background-color', function(d,i){
                return difficultyScale(difficultyLevel);
            });
​
    redisplayItems();
​
    score++;
}
​
function gameOver() {
​
    timer.FOE = 100;
    score = 0;
    difficultyLevel = 0;
    timerFoe.stop();
    timerFoe = d3.interval(function(){
        !moveFrom(CONST.FOE, foeDelta) && ( foeDelta = -foeDelta);
​
    }, timer.FOE);
​
    gridUpdate.transition().duration(100)
            .style('background-color', 'black')
            .transition().duration(100)
            .style('background-color', '#eee');
​
    position = {
        FOE: enemy,
        YOU: player
    };
​
}
​
function fireBullet() {
    var startPosition = position.YOU - elementPerLines;
    position.BULLET = startPosition;
    var currentObjectPosition = position.BULLET;
    var delta = -elementPerLines;
    var _bulletTimer = d3.interval(function(){
        var node = gridUpdate.nodes()[currentObjectPosition];
        var _sel = d3.select(node);
​
        _sel.transition().duration(100).style('background-color', function(d,i) {
            return difficultyScale(difficultyLevel);
        });
        currentObjectPosition+= delta;
​
        position.BULLET = currentObjectPosition;
​
        node = gridUpdate.nodes()[currentObjectPosition];
        _sel = d3.select(node);
        _sel.transition().delay(timer.BULLET).duration(30).style('background-color', function(d,i) {
            return colors.BULLET;
        });
        if (currentObjectPosition < 0) {
            _bulletTimer.stop();
        } else {
            if (position.BULLET === position.FOE) {
                success();
            }
        }
    }, 50);
}
​
function redisplayItems() {
    var node = gridUpdate.nodes()[position.FOE];
    var _sel = d3.select(node);
    _sel.transition().duration(100).style('background-color', function(d,i) {
        return colors.FOE;
    });
​
    node = gridUpdate.nodes()[position.YOU];
    _sel = d3.select(node);
​
    _sel.transition().duration(100).style('background-color', function(d,i) {
        return colors.YOU;
    });
}
</script>
    