<!DOCTYPE html>
<html lang="az">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VAZ 2107 Aftoş & Vites Oyunu</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #222;
            color: #fff;
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            overflow: hidden;
        }

        #game-container {
            position: relative;
            width: 400px;
            height: 600px;
            background-color: #555;
            border: 4px solid #fff;
            overflow: hidden;
            box-shadow: 0 0 20px rgba(0,0,0,0.8);
        }

        /* Yol xətləri */
        .road-line {
            position: absolute;
            left: 195px;
            width: 10px;
            height: 80px;
            background-color: #fff;
        }

        /* VAZ 2107 Avtomobili */
        #car {
            position: absolute;
            bottom: 30px;
            left: 160px;
            width: 80px;
            height: 140px;
            background-color: #d00000; /* Qırmızı 07 */
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.5);
            transition: transform 0.1s ease;
        }

        /* VAZ 2107 Detalları */
        /* Ön şüşə */
        #car::before {
            content: '';
            position: absolute;
            top: 35px;
            left: 8px;
            width: 64px;
            height: 30px;
            background-color: #111;
            border-radius: 3px;
        }

        /* Arxa şüşə */
        #car::after {
            content: '';
            position: absolute;
            bottom: 20px;
            left: 8px;
            width: 64px;
            height: 25px;
            background-color: #111;
            border-radius: 3px;
        }

        /* Kapot və Bamper xətləri */
        .hood {
            position: absolute;
            top: 0;
            left: 5px;
            width: 70px;
            height: 30px;
            border-bottom: 2px solid #880000;
        }

        /* Panel və Vites Göstəricisi */
        #dashboard {
            margin-top: 15px;
            display: flex;
            gap: 20px;
            font-size: 18px;
            font-weight: bold;
            background: #111;
            padding: 10px 20px;
            border-radius: 8px;
            border: 2px solid #444;
        }

        .stat-box {
            text-align: center;
        }

        .stat-value {
            color: #ffcc00;
            font-size: 22px;
        }

        #controls-hint {
            margin-top: 10px;
            font-size: 13px;
            color: #aaa;
            text-align: center;
        }
    </style>
</head>
<body>

    <h2 style="margin: 5px;">VAZ 2107 AFTOŞ ŞOU</h2>

    <div id="game-container">
        <div class="road-line" style="top: -100px;"></div>
        <div class="road-line" style="top: 100px;"></div>
        <div class="road-line" style="top: 300px;"></div>
        <div class="road-line" style="top: 500px;"></div>

        <div id="car">
            <div class="hood"></div>
        </div>
    </div>

    <div id="dashboard">
        <div class="stat-box">
            SÜRƏT
            <div id="speed" class="stat-value">0 km/h</div>
        </div>
        <div class="stat-box">
            VİTES (ÖTÜRÜCÜ)
            <div id="gear" class="stat-value">N (Boş)</div>
        </div>
        <div class="stat-box">
            DÖVR (RPM)
            <div id="rpm" class="stat-value">800</div>
        </div>
    </div>

    <div id="controls-hint">
        <b>İdarəetmə:</b><br>
        <b>Qaz:</b> Yuxarı Ox (↑) | <b>Əyləc:</b> Aşağı Ox (↓)<br>
        <b>Sürəti Qaldır:</b> "A" Klavişi | <b>Sürəti Azalt:</b> "Z" Klavişi<br>
        <b>Rul (Aftoş/İki təkər):</b> Sol (←) və Sağ (→) Oxlar
    </div>

    <script>
        const car = document.getElementById('car');
        const speedEl = document.getElementById('speed');
        const gearEl = document.getElementById('gear');
        const rpmEl = document.getElementById('rpm');
        const roadLines = document.querySelectorAll('.road-line');

        // Oyunda istifadə olunan dəyişənlər
        let speed = 0;
        let gear = 0; // 0 = N (Boş), 1-5 = Viteslər
        let rpm = 800;
        let posX = 160;
        let angle = 0;

        // Vites maksimal sürətləri və nisbətləri
        const maxSpeedPerGear = [0, 40, 70, 110, 150, 200];
        const minSpeedPerGear = [0, 0, 20, 40, 60, 90];

        // Düymələrin vəziyyəti
        const keys = {
            ArrowUp: false,
            ArrowDown: false,
            ArrowLeft: false,
            ArrowRight: false
        };

        // Klaviaturanı dinləmək
        window.addEventListener('keydown', (e) => {
            if (e.key in keys) keys[e.key] = true;

            // Vites Dəyişdirmə
            if (e.key.toLowerCase() === 'a') { // Sürəti artır
                if (gear < 5) gear++;
                updateGearDisplay();
            }
            if (e.key.toLowerCase() === 'z') { // Sürəti azalt
                if (gear > 0) gear--;
                updateGearDisplay();
            }
        });

        window.addEventListener('keyup', (e) => {
            if (e.key in keys) keys[e.key] = false;
        });

        function updateGearDisplay() {
            gearEl.innerText = gear === 0 ? "N (Boş)" : gear;
        }

        // Əsas Oyun Dövrü (Game Loop)
        function gameLoop() {
            // Qaz verildikdə
            if (keys.ArrowUp) {
                if (gear > 0) {
                    if (speed < maxSpeedPerGear[gear]) {
                        speed += 0.3 * (6 - gear) * 0.5; // Aşağı vitesdə daha tez sürətlənir
                    }
                }
                // Boşda (N) qaz verildikdə RPM artır
                if (gear === 0 && rpm < 7000) {
                    rpm += 100;
                }
            } else {
                // Qaz buraxıldıqda sürət azalır
                if (speed > 0) speed -= 0.15;
                if (gear === 0 && rpm > 800) rpm -= 50;
            }

            // Əyləc (Brake)
            if (keys.ArrowDown && speed > 0) {
                speed -= 0.6;
            }

            if (speed < 0) speed = 0;

            // RPM Hesablanması (Vitesdə olarkən)
            if (gear > 0) {
                let speedRatio = speed / maxSpeedPerGear[gear];
                rpm = Math.floor(800 + speedRatio * 6200);
                
                // Aşağı vitesdə yüksək sürət yığdıqda mühərrik boğulur
                if (speed < minSpeedPerGear[gear] && speed > 5) {
                    rpm = 600; // Boğulma effekti
                }
            }

            // Sükan və "Aftoş" Qaldırma effekti (Təkərə qaldırmaq/Meyillənmək)
            if (keys.ArrowLeft) {
                if (posX > 10) posX -= 4;
                if (angle > -15) angle -= 2; // Maşın sola əyilir
            } else if (keys.ArrowRight) {
                if (posX < 310) posX += 4;
                if (angle < 15) angle += 2; // Maşın sağa əyilir
            } else {
                // Sükan düzəlir
                if (angle > 0) angle -= 1;
                if (angle < 0) angle += 1;
            }

            // Vizual Yenilənmələr
            car.style.left = posX + 'px';
            car.style.transform = `rotate(${angle}deg)`;

            // Yolun hərəkət etməsi (Sürət hissi)
            roadLines.forEach(line => {
                let top = parseFloat(line.style.top);
                top += speed * 0.2;
                if (top > 600) top = -100;
                line.style.top = top + 'px';
            });

            // Paneli Yenilə
            speedEl.innerText = Math.floor(speed) + " km/h";
            rpmEl.innerText = Math.min(Math.max(rpm, 800), 7500);

            requestAnimationFrame(gameLoop);
        }

        // Oyunu Başlat
        gameLoop();
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="az">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VAZ 2107 Aftoş & Vites Oyunu</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #222;
            color: #fff;
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            overflow: hidden;
        }

        #game-container {
            position: relative;
            width: 400px;
            height: 600px;
            background-color: #555;
            border: 4px solid #fff;
            overflow: hidden;
            box-shadow: 0 0 20px rgba(0,0,0,0.8);
        }

        /* Yol xətləri */
        .road-line {
            position: absolute;
            left: 195px;
            width: 10px;
            height: 80px;
            background-color: #fff;
        }

        /* VAZ 2107 Avtomobili */
        #car {
            position: absolute;
            bottom: 30px;
            left: 160px;
            width: 80px;
            height: 140px;
            background-color: #d00000; /* Qırmızı 07 */
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.5);
            transition: transform 0.1s ease;
        }

        /* VAZ 2107 Detalları */
        /* Ön şüşə */
        #car::before {
            content: '';
            position: absolute;
            top: 35px;
            left: 8px;
            width: 64px;
            height: 30px;
            background-color: #111;
            border-radius: 3px;
        }

        /* Arxa şüşə */
        #car::after {
            content: '';
            position: absolute;
            bottom: 20px;
            left: 8px;
            width: 64px;
            height: 25px;
            background-color: #111;
            border-radius: 3px;
        }

        /* Kapot və Bamper xətləri */
        .hood {
            position: absolute;
            top: 0;
            left: 5px;
            width: 70px;
            height: 30px;
            border-bottom: 2px solid #880000;
        }

        /* Panel və Vites Göstəricisi */
        #dashboard {
            margin-top: 15px;
            display: flex;
            gap: 20px;
            font-size: 18px;
            font-weight: bold;
            background: #111;
            padding: 10px 20px;
            border-radius: 8px;
            border: 2px solid #444;
        }

        .stat-box {
            text-align: center;
        }

        .stat-value {
            color: #ffcc00;
            font-size: 22px;
        }

        #controls-hint {
            margin-top: 10px;
            font-size: 13px;
            color: #aaa;
            text-align: center;
        }
    </style>
</head>
<body>

    <h2 style="margin: 5px;">VAZ 2107 AFTOŞ ŞOU</h2>

    <div id="game-container">
        <div class="road-line" style="top: -100px;"></div>
        <div class="road-line" style="top: 100px;"></div>
        <div class="road-line" style="top: 300px;"></div>
        <div class="road-line" style="top: 500px;"></div>

        <div id="car">
            <div class="hood"></div>
        </div>
    </div>

    <div id="dashboard">
        <div class="stat-box">
            SÜRƏT
            <div id="speed" class="stat-value">0 km/h</div>
        </div>
        <div class="stat-box">
            VİTES (ÖTÜRÜCÜ)
            <div id="gear" class="stat-value">N (Boş)</div>
        </div>
        <div class="stat-box">
            DÖVR (RPM)
            <div id="rpm" class="stat-value">800</div>
        </div>
    </div>

    <div id="controls-hint">
        <b>İdarəetmə:</b><br>
        <b>Qaz:</b> Yuxarı Ox (↑) | <b>Əyləc:</b> Aşağı Ox (↓)<br>
        <b>Sürəti Qaldır:</b> "A" Klavişi | <b>Sürəti Azalt:</b> "Z" Klavişi<br>
        <b>Rul (Aftoş/İki təkər):</b> Sol (←) və Sağ (→) Oxlar
    </div>

    <script>
        const car = document.getElementById('car');
        const speedEl = document.getElementById('speed');
        const gearEl = document.getElementById('gear');
        const rpmEl = document.getElementById('rpm');
        const roadLines = document.querySelectorAll('.road-line');

        // Oyunda istifadə olunan dəyişənlər
        let speed = 0;
        let gear = 0; // 0 = N (Boş), 1-5 = Viteslər
        let rpm = 800;
        let posX = 160;
        let angle = 0;

        // Vites maksimal sürətləri və nisbətləri
        const maxSpeedPerGear = [0, 40, 70, 110, 150, 200];
        const minSpeedPerGear = [0, 0, 20, 40, 60, 90];

        // Düymələrin vəziyyəti
        const keys = {
            ArrowUp: false,
            ArrowDown: false,
            ArrowLeft: false,
            ArrowRight: false
        };

        // Klaviaturanı dinləmək
        window.addEventListener('keydown', (e) => {
            if (e.key in keys) keys[e.key] = true;

            // Vites Dəyişdirmə
            if (e.key.toLowerCase() === 'a') { // Sürəti artır
                if (gear < 5) gear++;
                updateGearDisplay();
            }
            if (e.key.toLowerCase() === 'z') { // Sürəti azalt
                if (gear > 0) gear--;
                updateGearDisplay();
            }
        });

        window.addEventListener('keyup', (e) => {
            if (e.key in keys) keys[e.key] = false;
        });

        function updateGearDisplay() {
            gearEl.innerText = gear === 0 ? "N (Boş)" : gear;
        }

        // Əsas Oyun Dövrü (Game Loop)
        function gameLoop() {
            // Qaz verildikdə
            if (keys.ArrowUp) {
                if (gear > 0) {
                    if (speed < maxSpeedPerGear[gear]) {
                        speed += 0.3 * (6 - gear) * 0.5; // Aşağı vitesdə daha tez sürətlənir
                    }
                }
                // Boşda (N) qaz verildikdə RPM artır
                if (gear === 0 && rpm < 7000) {
                    rpm += 100;
                }
            } else {
                // Qaz buraxıldıqda sürət azalır
                if (speed > 0) speed -= 0.15;
                if (gear === 0 && rpm > 800) rpm -= 50;
            }

            // Əyləc (Brake)
            if (keys.ArrowDown && speed > 0) {
                speed -= 0.6;
            }

            if (speed < 0) speed = 0;

            // RPM Hesablanması (Vitesdə olarkən)
            if (gear > 0) {
                let speedRatio = speed / maxSpeedPerGear[gear];
                rpm = Math.floor(800 + speedRatio * 6200);
                
                // Aşağı vitesdə yüksək sürət yığdıqda mühərrik boğulur
                if (speed < minSpeedPerGear[gear] && speed > 5) {
                    rpm = 600; // Boğulma effekti
                }
            }

            // Sükan və "Aftoş" Qaldırma effekti (Təkərə qaldırmaq/Meyillənmək)
            if (keys.ArrowLeft) {
                if (posX > 10) posX -= 4;
                if (angle > -15) angle -= 2; // Maşın sola əyilir
            } else if (keys.ArrowRight) {
                if (posX < 310) posX += 4;
                if (angle < 15) angle += 2; // Maşın sağa əyilir
            } else {
                // Sükan düzəlir
                if (angle > 0) angle -= 1;
                if (angle < 0) angle += 1;
            }

            // Vizual Yenilənmələr
            car.style.left = posX + 'px';
            car.style.transform = `rotate(${angle}deg)`;

            // Yolun hərəkət etməsi (Sürət hissi)
            roadLines.forEach(line => {
                let top = parseFloat(line.style.top);
                top += speed * 0.2;
                if (top > 600) top = -100;
                line.style.top = top + 'px';
            });

            // Paneli Yenilə
            speedEl.innerText = Math.floor(speed) + " km/h";
            rpmEl.innerText = Math.min(Math.max(rpm, 800), 7500);

            requestAnimationFrame(gameLoop);
        }

        // Oyunu Başlat
        gameLoop();
    </script>
</body>
</html>
