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 :) )

<!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});

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>

https://d3js.org/d3.v4.0.0-alpha.24.min.js