script.js

/**
 * Created by Tomasz on 30.01.2016.
 */

$(document).ready(function(){

    var canvas = $('#canvas')[0];
    var cont = canvas.getContext("2d");
    var wid = $('#canvas').width(); // szerokosc canvasa
    var hei = $('#canvas').height(); // wysokos canvasa

    var cw = 10; // wielkosc pozywienia
    var d; // wcisniety guzik
    var food;  // obiekt jedzenie
    var snake_array; // tablica ze snakem
    var score;
    var game_loop; // domyslnie 100 tak jak tryb normal

    function init() {
        d = "right"; // odpalamy go w prawo automatycznie na starcie
        create_snake();
        create_food();

        score = 0;





        $('#gameSpeed').change(function(){
            var interval = parseFloat($(this).val());
            if( interval > 0){
                clearInterval(game_loop);
                game_loop = setInterval(painting,interval);
            }
            console.log(interval);
        });

    }
    //no bo w event listenerze na change pola select czyścisz już wyczyszczony interwał
    //i tworzysz nowy
    //za każdym razem tworzysz nowy
    //powinieneś go zapisać w jakiejś zmiennej, która będzie dostępna w scopie, do którego sięga funkcja kończąca grę - i dopiero w niej go czyścić
    //a na change czyścić go i ustawiać nowy
    init();

    function paint_cell(x,y) {  // funkcja do rysowania jedzenia

        cont.fillStyle = 'teal'; // wypelnienie
        cont.fillRect(x * cw, y * cw, cw, cw);
        cont.strokeStyle = "white"; // obrys
        cont.strokeRect(x * cw, y * cw, cw, cw);
    }

    function create_snake() {
        var length = 5;   //  rozpoczynamy go z poczatkowa dlugoscia 5
        snake_array = []; // snake tworzymy jako tablice

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

            snake_array.push({x: i, y: 0 });   // do snake dodajemy elementy, które są obiektami, o dwóch property, y = 0 żeby był w poziomie

        }
    }

    function create_food() {

        // jedzenie jako obiekt o dwóch property, x,y
        // przyklad pierwszego property:  (wid-cw/cw) = (400-10)/10 = 390/10 =
        // 39 *(0-0.999) < 39, property X miesci sie w zawsze planszy

        food = {
            x: Math.round(Math.random()*(wid-cw)/cw),

            y: Math.round(Math.random()*(hei-cw)/cw)
        };

    }

    $(document).keydown(function(move){  // sterowanie w dokumencie
        var key = move.which;
        if(key == "37" && d != "right") d = "left";
        else if(key == "38" && d != "down") d = "up";
        else if(key == "39" && d != "left") d = "right";
        else if(key == "40" && d != "up") d = "down";

    });

    function painting() {

        cont.fillStyle = "white";
        cont.fillRect(0, 0, wid, hei);
        cont.strokeStyle = "grey";
        cont.strokeRect(0, 0, wid, hei);


        var nx = snake_array[0].x;   // tworzymy zmienną, która zawiera propery X pierwszego elementu snaka
        var ny = snake_array[0].y;    // tworzymy zmienną, która zawiera propery Y pierwszego elementu snaka

        if (d == "right") nx++;  // property x zmienia się co 10px o 1 przy puszczeniu w prawo
        else if (d == "left") nx--;
        else if (d == "up") ny--;
        else if (d == "down") ny++;

        if (nx == -1 || nx == wid / cw || ny == -1 || ny == hei / cw || check_collision(nx, ny, snake_array)) { // warunek rozpoczecia od nowa

            init(); // odpal na nowo

            return;
        }

        if (nx == food.x && ny == food.y) {   // jak wjade w jedzenie to tail zwraca mi wspolrzedne tego jedzenia

            var tail = {x: nx, y: ny};
            score++;

            create_food();  // stworz kolejne jedzenie
        } else {

            tail = snake_array.pop();  //  Usuwa ostatni element i zwracam go, zmieniając również całą tablce
            tail.x = nx;
            tail.y = ny;
        }

        snake_array.unshift(tail); // jak wjade w jedzenie, to dodaje na koniec snaka element i zwracam dlugosc tablicy na nowo

        for (var i = 0; i < snake_array.length; i++) {
            var kw = snake_array[i];
            paint_cell(kw.x, kw.y); // koloruje snake

        }

        paint_cell(food.x, food.y);  // koloruje jedzenie
        var score_txt = "Your score: " + score;
        cont.fillText(score_txt, 5, hei - 5);

    }



    function check_collision(x,y, array) { // sprawdzam kolizje z obrysem canvasa

        for (var i = 0 ; i <array.length ; i++) {

            if(array[i].x == x && array[i].y == y) {
                clearInterval(game_loop);
                return true;
            }
        }
        return false;
    }


});

snake.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple snake game</title>

</head>
<body>

<canvas id="canvas" width="400" height="400"></canvas>
<select id="gameSpeed" class="select-list">
    <option>choose speed</option>
    <option value="100">normal</option>
    <option value="50">nightmare</option>
    <option value="30">hell</option>
</select>
 JAK KLIKKNE normmal, potem strace focus jest ok. Zmienie na nightmare, zmienie na hell ok, ale jak wroce juz
z powrotem na normal to on zasuwa jeszcze szybciej, ustalony czas intervalu sie zwieksza. W pliku js dalem komentarz z wykrzyknikami w tym miejscu kodu


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>