Snake

by Ronny

HTML

<div id="player"></div>
<output></output>

CSS

#player {width: 10px; height: 10px; border-radius: 50%; background: #666; position: absolute; top: 50px; left: 200px;}

JavaScript

var w = $(window),
    d = $(document),
    p = $('#player'),
    direction = 'down',
    stepPixels = 1,
    stepDuration = 0,
    tickDuration = 20;

(function() {

    w.bind('changeDirection.snake', function(ev, newDirection) {
        direction = newDirection;
    });

    var key = {
        press: function(ev) {
            switch (ev.which) {
            case 119:
            case 87:
                ev.preventDefault();
                w.trigger('changeDirection.snake', 'up');
                break;
            case 97:
            case 65:
                ev.preventDefault();
                w.trigger('changeDirection.snake', 'left');
                break;
            case 115:
            case 83:
                ev.preventDefault();
                w.trigger('changeDirection.snake', 'down');
                break;
            case 100:
            case 68:
                ev.preventDefault();
                w.trigger('changeDirection.snake', 'right');
                break;
            }
        }
    };

    w.keypress(key.press);
    
    function tick(){
        var step;
        if(direction === 'up')
            step = {top: p.position().top - stepPixels};
        
        if(direction === 'down')
            step = {top: p.position().top + stepPixels};
        
        if(direction === 'left')
            step = {left: p.position().left - stepPixels};
        
        if(direction === 'right')
            step = {left: p.position().left + stepPixels};
        
        p.animate(step, stepDuration);
    }
    
    setInterval(tick, tickDuration);
})()