Snake 30 lines

Snake game in 30 lines

by pz_godlin

HTML

<div id="main" class="main"></div>

CSS

.main .line {
    clear: left;
}
.main div.cell {
    width: 20px;
    height: 20px;
    float: left;
    margin: 1px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    transition: background-color .5s;
}
.main div.s {
    background-color: #bbb;
    transition: background-color .5s;
}
.main div.f {
    background-color: green;
    transition: background-color 2s;
}

JavaScript

var h_pos=f_pos=score=0, len=5, move=1, snake=[0], dx=15, dy=10, dxy=150;

function _$ (body) { return eval("(function (a, b) { return "+body+"; })"); }
elem = _$("document.getElementById (a)");
set_class = _$("elem('cell_'+a).className = 'cell'+ (b ? ' '+b : '')");
is_snake = _$("elem('cell_'+a).className.indexOf(' s') >= 0");
new_food = _$("is_snake (f_pos = Math.floor(Math.random() * a) + b) \
                        ? new_food(a,b) : f_pos");
new_cell = _$("'<div id=cell_'+a+' class=\"cell'+(a ? '': ' s')+'\"></div>'");
new_line = _$("a ? '<div class=line></div>' : ''");
line_change = _$("dx * (parseInt ((a + b%dx)/dx) - parseInt (a/dx))");

for (var i=0; i<dxy; ++i) 
    elem ("main").innerHTML += new_cell (i) +new_line(i%dx == dx-1);

document.body.onkeydown = function(e) { 
    move = ([-1, -dx, 1, dx])[e.keyCode-37]; 
};

set_class (new_food(dxy-2, 1), 'f');
var interval = setInterval (function () {
    h_pos = (h_pos +dxy + move - line_change (h_pos, move)) %dxy;
    if ( is_snake(h_pos) && !clearInterval(interval) )  
        alert('Game Over! Your score: ' + score);
    set_class (h_pos, 's');
    f_pos == h_pos && new_food(dxy-1, 0)>=0 
                   && ++len && ++score && set_class (f_pos, 'f');
    snake.push (h_pos);
    snake.length>=len && set_class (snake.shift());
}, 300);