var current_rotation = 100.0;                                           // Текущий угол поворота машинки
        var speed = 0.0;                                                        // Текущая скорость машинки
        var x = 135;                                                            // Положение машинки на карте
        var y = 300;
        document.onkeydown = checkKey;                                          // Устанавливаем обработчик
                                                                                // клавиатурных событий
        function checkKey(e) {
            var car = document.getElementById("car");                           // Получаем div с машинкой
            e = e || window.event;
            if (e.keyCode == '38') {                                    // Кнопка вверх
                speed += 1;                                                     // увеличиваем скорость
            }
            else if (e.keyCode == '40') {                                       // Кнопка вниз
                speed -= 1;                                                     // уменьшаем скорость
            }
            else if (e.keyCode == '37') {                                       // Кнопка влево
               current_rotation -= 2 * speed;                                   // уменьшаем угол пропорционально скорости
            }
            else if (e.keyCode == '39') {                                       // Кнопка вправо
               current_rotation += 2 * speed;                                   // увеличиваем угол пропорционально скорости
            }
            if (current_rotation < 0)                                           // Приводим угол к диапазону 0..360 градусов
                current_rotation = 360 - current_rotation;
            else if (current_rotation > 360)
                current_rotation -= 360;
            if (speed > 12)                                              // Приводим скорость к диапазону -1..12
               speed = 12;
            else if (speed < -1)
               speed = -1;
            car.style.transform = "rotate(" + current_rotation.toString() + "deg)"; // Поворачиваем картинку машинки
        }
        // Периодическое событие, каждые 100 миллисекунд
        var intervalId = setInterval(function() {
            // Вычисляем новые координаты. Ось Х направлена вниз, а картинка машинки изначально влево,
            // поэтому доворачиваем на 270 градусов
            x += Math.sin(degrees_to_radians(current_rotation + 270)) * speed;
            y -= Math.cos(degrees_to_radians(current_rotation + 270)) * speed;
            // Передвигаем машинку в новую позицию
            var car = document.getElementById("car");
            car.style.left = "" + x.toString() + "px";
            car.style.top = "" + y.toString() + "px";
            // Теперь надо узнать цвет пикселя под машинкой
            // Для этого рисуем трассу на виртуальный canvas
            var cvs = document.createElement('canvas'),
            img = document.getElementById("track")
            img.crossOrigin="anonymous";
            cvs.width = img.width; cvs.height = img.height
            var ctx = cvs.getContext("2d")
            ctx.drawImage(img,0,0,cvs.width,cvs.height)
            var x1 = x
            var y1 = y
            // Читаем цвет пикселя примерно под серединой машинки
            var data = ctx.getImageData(x1 + 30, y1 + 10, 1, 1).data;
            var red = data[0];
            var green = data[1];
            var blue = data[2];
            // Если пиксель "скорее желтый" (мы планируем делать разноцветные трассы)
            if ((red >= 128) && (green >= 128) && (blue < 80))
            {
                // То ограничиваем скорость на песке
                if (speed > 3) speed = 3;
            }
            // Если пиксель "скорее зеленый"
            else if ((red < 200) && (green >= 128) && (blue < 128))
                // То скорость быстро падает
                speed /= 2;
            // Если пиксель синий, или мы вылетели за границу трассы
            else if (((red < 80) && (green < 200) && (blue > 128)) ||
                 (x <= 0) || (y <= 0) || (x >= img.width) || (y >= img.height))
            {
                // То игра заканчивается
                document.getElementById("gameover").style.visibility = "visible";
                // Делаем видимой панельку Game Over
                document.getElementById("car").style.visibility = "hidden";
                // И через 2.5 секунды перезагружаем страницу
                setTimeout(function() {
                    window.location.reload();
                }, 2500);
            };
        }, 100);
        // Перевод градусов в радианы
        function degrees_to_radians(degrees)
        {
            var pi = Math.PI;
            return degrees * (pi/180);
        }