Snake

by someprimetime

HTML

<div id="yard">
    <span id="food"></span>
    <div id="snake">
        <span id="snakeHead"></span>
    </div>
</div>
<div class="shrub"></div>
<div id="output">
    <div style="float: left;">
    Snake X: <span id="snakeX"></span><br />
    Snake Y: <span id="snakeY"></span><br />
        Snake XOffset: <span id="snakeXOffset"></span><br />
    </div>
    <div style="float:right;">
    Food X: <span id="foodX"></span><br />
    Food Y: <span id="foodY"></span><br />
    </div>
</div>

CSS

#yard {
    background-color: #eee;
  border: 1px solid #eee;
  width: 300px;
  height: 300px;
  position: relative;
    overflow: hidden;
}
#output {
    width: 300px;
}

#food {
    visibility: hidden;
    background: #fff;
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
}
#snake {
    display: inline-block;
}
#snakeHead {
  background: #000;
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
}
.snakeAppendage {
  background: #000;
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
}


#azure_text {
    font-family: helvetica, arial, sans-serif;
    font-size: 32px;
    color: #a6ca52;
    position:relative;
    left:40px;
    top: 125px;
}

JavaScript

var b = {

};

b.snake = {
    init: function() {
        var $food = $('#food');
        var $snake = $('#snakeHead');
        var $shrub = $('.shrub');
        snakeWidth = $('#snakeHead').width();

        // our random location to position food
        var randomPosition = b.snake.randomPosition();
        b.snake.positionFood($food, randomPosition);

        // our random location to position the snake
        randomPosition = b.snake.randomPosition();
        b.snake.positionSnake($snake, randomPosition);

        // our function that allows us to move mr. snakey
        b.snake.moveSnake(snakeWidth);

    },
    /* end init */

    randomDimension: function() {
        var min = 0;
        var max = $('#yard').width();
        return Math.floor(Math.random() * (max - min + 1)) + min;
    },

    randomPosition: function() {
        var x = b.snake.randomDimension();
        var y = b.snake.randomDimension();
        return [x, y];
    },
    /* end random position */

    positionFood: function($food, randomPosition) {
        $food.css('top', randomPosition[0] - 10).css('left', randomPosition[1] - 10).css('visibility', 'visible');
    },
    /* end position food */

    positionSnake: function($snake, randomPosition) {
        $snake.css('top', randomPosition[0] - 10).css('left', randomPosition[1] - 10).css('visibility', 'visibile');
    },
    /* end position snake */

    moveSnake: function(snakeWidth) {
        $(document).keydown(function(e) {
            var snakePosition = $('#snakeHead').position();

            var snakeX = snakePosition.left;
            $('#snakeX').text(snakeX);

            var snakeY = snakePosition.top;
            $('#snakeY').text(snakeY);

            // see if mr. snakey ate his food :0
            var checkCollision = function(snakeX, snakeY, snakeWidth) {
                var snakeXOffset = snakeX + 10;
                var snakeYOffset = snakeY + 10;
                $('#snakeXOffset').text(snakeXOffset);
              ...