SNAKE

by Alexander Shpak

HTML

<canvas id="snake"></canvas>

CSS

#snake {
    background: #696;
    width: 480px;
    heigth: 320px;
}

JavaScript

(function (canvasId) {
    var cvs = document.getElementById(canvasId), ctx = cvs.getContext('2d'), snake = [{'x': 5, 'y': 3}, {'x': 4, 'y': 3}, {'x': 3, 'y': 3}], dir = {'x': 1, 'y': 0}, apple = {'x': Math.random() * 15 | 0, 'y': Math.random() * 9 | 0}, pix = {'w': cvs.width/15, 'h': cvs.height/10}, scores = 0;
    setInterval(function () {
		ctx.clearRect(0, 0, cvs.width, cvs.height);
        var eaten = false, prev = snake[0], current  = {'x': snake[0].x+dir.x, 'y': snake[0].y+dir.y};
        if (current.x === 15) current.x =  0;
        if (current.x === -1) current.x = 14;
        if (current.y === 10) current.y =  0;
        if (current.y === -1) current.y =  9;
        snake[0] = current;
        if (snake[0].x===apple.x && snake[0].y===apple.y) eaten = true;
        for (var i = 1, len = snake.length; i < len; i++)
            if (snake[0].x===snake[i].x && snake[0].y===snake[i].y) scores=0, snake.splice(i,snake.length-i);
        for (var i = 1, len = snake.length; i < len; i++) {
            current	= snake[i], snake[i] = prev, prev = current; }
        if (eaten) snake.push(current), scores++, apple = {'x': Math.random()*15|0, 'y': apple.y=Math.random()*9|0}
        ctx.fillStyle = '#363', ctx.fillText('AwesomeSnake4habrahabr.ru | Your scores: '+scores, 4, 12);
        for (var i = 0, len = snake.length; i < len; i++)
            ctx.fillStyle = (i === 0) ? '#333' : '#555', ctx.fillRect(snake[i].x * pix.w, snake[i].y * pix.h, pix.w, pix.h);
            ctx.fillStyle = '#933', ctx.fillRect(apple.x * pix.w, apple.y * pix.h, pix.w, pix.h); }, 1000/8);
	document.onkeydown=function(evt) {
        if (evt.keyCode===37 && dir.x!==1) dir={'x':-1,'y':0};
        if (evt.keyCode===38 && dir.y!==1) dir={'x':0,'y':-1};
        if (evt.keyCode===39 && dir.x!==-1) dir={'x':1,'y':0};
        if (evt.keyCode===40 && dir.y!==-1) dir={'x':0,'y':1};
    };
}('snake'));