jQuery: SpaceInvaders

more at: http://www.urbangap.com/urban12/gennaio

HTML

<div id="invader_game">
            <div id="invader_row_1">
                <img src="http://s23.postimg.org/efz3zzizb/invader_1.png" class="invader breakable" id="invader_top_1">
                <img src="http://s23.postimg.org/efz3zzizb/invader_1.png" class="invader breakable" id="invader_top_2">
                <img src="http://s23.postimg.org/efz3zzizb/invader_1.png" class="invader breakable" id="invader_top_3">
                <img src="http://s23.postimg.org/efz3zzizb/invader_1.png" class="invader breakable" id="invader_top_4">
                <img src="http://s23.postimg.org/efz3zzizb/invader_1.png" class="invader breakable" id="invader_top_5">
                <img src="http://s23.postimg.org/efz3zzizb/invader_1.png" class="invader breakable" id="invader_top_6">
                <img src="http://s23.postimg.org/efz3zzizb/invader_1.png" class="invader breakable" id="invader_top_7">
                <img src="http://s23.postimg.org/efz3zzizb/invader_1.png" class="invader breakable" id="invader_top_8">
                <img src="http://s23.postimg.org/efz3zzizb/invader_1.png" class="invader breakable" id="invader_top_9">
                <img src="http://s23.postimg.org/efz3zzizb/invader_1.png" class="invader breakable" id="invader_top_10">
                <img src="http://s23.postimg.org/efz3zzizb/invader_1.png" class="invader breakable" id="invader_top_11">
            </div>
            <div id="invader_row_2">
                <img src="http://s27.postimg.org/o9xl74xr3/invader_2.png"  style="margin-left:48px;" class="invader2">
                <img src="http://s27.postimg.org/o9xl74xr3/invader_2.png" class="invader2">
                <img src="http://s27.postimg.org/o9xl74xr3/invader_2.png" class="invader2">
                <img src="http://s27.postimg.org/o9xl74xr3/invader_2.png" class="invader2">
                <img src="http://s27.postimg.org/o9xl74xr3/invader_2.png" class="invader2">
                <img...

CSS

body {
    background: #000;
}

.invader {
    height:50px;
    margin-left: 50px;
}
.invader3 {
    height:40px;
    margin-left: 35px;
}
.invader2 {
    height:50px;
    margin-left: 35px;
}

#invader2 {
    height:50px;
    margin-left: 35px;
}

#invader_row_2 {
    width:1200px;
    text-align: center;
    padding-top: 50px;
    margin-left:auto;
    margin-right: auto;
}

#invader_row_1 {
    width:1200px;
    text-align: center;
    padding-top: 50px;
    margin-left:auto;
    margin-right: auto;
}

#invader_row_3 {
    width:1200px;
    text-align: center;
    padding-top: 50px;
    margin-left:auto;
    margin-right: auto;
}

#invader3 {
    height:40px;
    margin-left: 35px;
}

#invader_game {
    width:100%;
    height:100%;
}
.invadermove{
    animation:invadermove 10s infinite;
    -webkit-animation:invadermove 10s infinite; /* Safari and Chrome */
}

@keyframes invadermove
{
    0%   {padding-left:0px;}
    11%   {padding-left:0px;}
    12%   {padding-left:12px;}
    23%   {padding-left:12px;}
    24%   {padding-left:24px;}
    35%   {padding-left:24px;}
    36%   {padding-left:38px;}
    47%   {padding-left:38px;}
    48%   {padding-left:50px;}
    59%   {padding-left:50px;}
    60%   {padding-left:38px;}
    71%   {padding-left:38px;}
    72%   {padding-left:24px;}
    83%   {padding-left:24px;}
    84%   {padding-left:12px;}
    95%   {padding-left:12px;}
    96%   {padding-left:0px;}
    100%   {padding-left:0px;}
}

@-webkit-keyframes invadermove /* Safari and Chrome */
{
    0%   {padding-left:0px;}
    11%   {padding-left:0px;}
    12%   {padding-left:12px;}
    23%   {padding-left:12px;}
    24%   {padding-left:24px;}
    35%   {padding-left:24px;}
    36%   {padding-left:38px;}
    47%   {padding-left:38px;}
    48%   {padding-left:50px;}
    59%   {padding-left:50px;}
    60%   {padding-left:38px;}
    71%   {padding-left:38px;}
    72%   {padding-left:24px;}
    83%   {padding-left:24px;}
    84%   {padding-left:12px;}
    95%  ...

JavaScript

function startinvaders(){
    setTimeout( function() {
        $("#invader_row_1").addClass("invadermove");
    }, 5000);
    setTimeout( function() {
        $("#invader_row_2").addClass("invadermove");
    }, 2500);
    $("#invader_row_3").addClass("invadermove");
    $('body').mousemove(function(e){
        var x = e.pageX - this.offsetLeft;
        var x2 = x - 57;
        $('#ship').css({
            left: x2
        });
    });
    $( "body" ).click(function(e) {
        var currenthtml =  $("#bulletrow").html();
        var x = e.pageX - this.offsetLeft;
        $("#bulletrow").append('<div class="bullet ui-widget-content" id="bullet" style="left:' + x + 'px !important; position:absolute; animation:bulletup 5s; -webkit-animation:bulletup 5s;"></div>');
    });
}
startinvaders();