Snake snake snake snake

snake.css

canvas{
    height:300px;
    width:300px;
}

snake.html

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

snake.js

// this is sme ooooold code
// http://jsfiddle.net/LAMZt/
// From question http://stackoverflow.com/questions/20913733/canvas-collision-javascript/20914181#20914181
// Merrr
window.onload = function() {
    var delta = 11;
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    var canvasWidth = window.innerWidth - 20;
    var canvasHeight = window.innerHeight - 20;
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;


    var up = down = left = false;
    var right = true;

    var Bit = function() {
        this.w = this.h = 10;
        this.x = this.y = 0;
        this.visible = false;
    }

    var snakeBody = [];
    growSnake();

    snakeBody[0].x = snakeBody[0].y = 20;
    snakeBody[0].visible = true;


    var food = {
        x: Math.floor(Math.random() * (canvasWidth - 50)),
        y: Math.floor(Math.random() * (canvasHeight - 50)),
        w: 10,
        h: 10
    };

    function moveUp() {
        snakeBody[0].ny = -delta;
        snakeBody[0].nx = 0;
    }

    function moveDown() {
        snakeBody[0].ny = delta;
        snakeBody[0].nx = 0;
    }

    function moveLeft() {
        snakeBody[0].nx = -delta;
        snakeBody[0].ny = 0;
    }

    function moveRight() {
        snakeBody[0].nx = delta;
        snakeBody[0].ny = 0;
    }

    function draw() {
        collision();
        update();

        context.clearRect(0, 0, canvasWidth, canvasHeight);
        context.fillStyle = "black";

        context.beginPath();

        for (var i = snakeBody.length - 1; i >= 0; i--) {

            if (!snakeBody[i].visible && !snakeBody[i - 1].visible) continue;
            snakeBody[i].visible = true;

            if (intersects(food.x, food.y, food.w, food.h, snakeBody[i].x, snakeBody[i].y, snakeBody[i].w, snakeBody[i].h)) {
                generateFood();
                growSnake();
            }

            if (i > 0) {
                snakeBody[i].x = snakeBody[i - 1].x;
                snakeBody[i].y = snakeBody[i - 1].y;
            } else {
                snakeBody[i].x += snakeBody[0].nx;
                snakeBody[i].y += snakeBody[0].ny;
            }



            if (i > 0 && intersects(snakeBody[0].x + snakeBody[0].nx, snakeBody[0].y + snakeBody[0].ny, snakeBody[0].w, snakeBody[0].h,
                    snakeBody[i].x, snakeBody[i].y, snakeBody[i].w, snakeBody[i].h)) {
                clearInterval(pulse);
            }
            context.rect(snakeBody[i].x - 1, snakeBody[i].y - 1, snakeBody[i].w + 2, snakeBody[i].h + 2);
        }
        context.stroke();
        context.strokeStyle = "red";
        context.rect(food.x, food.y, food.w, food.h);
        context.fill();

    }

    function growSnake() {
        for (i = 0; i < 5; i++) {
            snakeBody.push(new Bit());
        }
    }

    function generateFood() {
        food.x = Math.floor(Math.random() * (canvasWidth - 50));
        food.y = Math.floor(Math.random() * (canvasHeight - 50));
    }

    function intersects(x1, y1, w1, h1, x2, y2, w2, h2) {
        w2 += x2;
        w1 += x1;
        if (x2 > w1 || x1 > w2) return false;
        h2 += y2;
        h1 += y1;
        if (y2 > h1 || y1 > h2) return false;
        return true;
    }

    function update() {
        if (up) {
            moveUp();
        }
        if (down) {
            moveDown();
        }
        if (left) {
            moveLeft();
        }
        if (right) {
            moveRight();
        }
    }

    function gameOver() {
        alert('game over!');
    }

    function collision() {
        if (snakeBody[0].x > canvasWidth) {
            snakeBody[0].x = 0 + (snakeBody[0].x - canvasWidth);
        }
        if (snakeBody[0].x < 0) {
            snakeBody[0].x = canvasWidth + snakeBody[0].x;
        }
        if (snakeBody[0].y > canvasHeight) {
            snakeBody[0].y = 0 + (snakeBody[0].y - canvasHeight);
        }
        if (snakeBody[0].y < 0) {
            snakeBody[0].y = canvasHeight + snakeBody[0].y;
        }
    }

    document.onkeydown = function(e) {
        var event = window.event ? window.event : e;
        var keycode = event.keyCode;
        if (keycode === 37 && right === false) {
            left = true;
            right = up = down = false;
        }
        if (keycode === 38 && down === false) {
            up = true;
            down = left = right = false;
        }
        if (keycode === 39 && left === false) {
            right = true;
            left = up = down = false;
        }
        if (keycode === 40 && up === false) {
            down = true;
            up = left = right = false;
        }
    };

    var pulse = setInterval(draw, 50);

};

??? Look at the fiddle: http://jsfiddle.net/LAMZt/

You need a canvas tag in your html and it should work:

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