script.js

const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
const scoreElement = document.getElementById("score");
const highScoreElement = document.getElementById("highScore");
const restartBtn = document.getElementById("restartBtn");

// متغيرات اللعبة الأساسية
let score = 0;
// استرجاع أعلى نتيجة محفوظة سابقاً في المتصفح، أو البدء بـ 0 لو كانت أول مرة
let highScore = localStorage.getItem("carGameHighScore") || 0;
highScoreElement.textContent = highScore;

let gameOver = false;
let roadOffset = 0;
let enemies = [];
let enemySpeed = 4;
let spawnTimer = 0;

// سيارة اللاعب
const player = {
    x: canvas.width / 2 - 20,
    y: canvas.height - 100,
    width: 40,
    height: 70,
    speed: 6,
    dx: 0,
    color: "#ef4444" // أحمر
};

// متابعة أسهم الكيبورد
document.addEventListener("keydown", (e) => {
    if (e.key === "ArrowLeft" || e.key === "a") player.dx = -player.speed;
    if (e.key === "ArrowRight" || e.key === "d") player.dx = player.speed;
});

document.addEventListener("keyup", (e) => {
    if (e.key === "ArrowLeft" || e.key === "a" || e.key === "ArrowRight" || e.key === "d") {
        player.dx = 0;
    }
});

restartBtn.addEventListener("click", resetGame);

// رسم سيارة
function drawCar(x, y, width, height, color) {
    ctx.fillStyle = color;
    ctx.fillRect(x, y, width, height);

    ctx.fillStyle = "#1e293b";
    ctx.fillRect(x + 5, y + 15, width - 10, 12);

    ctx.fillStyle = "#000000";
    ctx.fillRect(x - 4, y + 8, 4, 15);
    ctx.fillRect(x + width, y + 8, 4, 15);
    ctx.fillRect(x - 4, y + height - 23, 4, 15);
    ctx.fillRect(x + width, y + height - 23, 4, 15);
}

// رسم خطوط الطريق المتنقلة
function drawRoad() {
    ctx.strokeStyle = "#ffffff";
    ctx.lineWidth = 6;
    ctx.setLineDash([30, 20]);
    ctx.lineDashOffset = -roadOffset;

    ctx.beginPath();
    ctx.moveTo(canvas.width / 2, 0);
    ctx.lineTo(canvas.width / 2, canvas.height);
    ctx.stroke();

    ctx.setLineDash([]);
    ctx.lineWidth = 8;
    ctx.strokeStyle = "#f59e0b";
    ctx.strokeRect(0, 0, canvas.width, canvas.height);
}

// توليد سيارات الأعداء
function spawnEnemy() {
    spawnTimer++;
    if (spawnTimer % 60 === 0) {
        const lanes = [20, 105, 190, 275];
        const randomLane = lanes[Math.floor(Math.random() * lanes.length)];
        const colors = ["#3b82f6", "#10b981", "#8b5cf6", "#f59e0b"];
        const randomColor = colors[Math.floor(Math.random() * colors.length)];

        enemies.push({
            x: randomLane,
            y: -80,
            width: 40,
            height: 70,
            color: randomColor
        });
    }
}

// كشف التصادم
function checkCollision(rect1, rect2) {
    return (
        rect1.x < rect2.x + rect2.width &&
        rect1.x + rect1.width > rect2.x &&
        rect1.y < rect2.y + rect2.height &&
        rect1.y + rect1.height > rect2.y
    );
}

// الدالة الرئيسية للتحديث والرسم (Game Loop)
function update() {
    if (gameOver) return;

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    roadOffset += enemySpeed;

    player.x += player.dx;
    if (player.x < 10) player.x = 10;
    if (player.x + player.width > canvas.width - 10) player.x = canvas.width - player.width - 10;

    drawRoad();
    drawCar(player.x, player.y, player.width, player.height, player.color);

    spawnEnemy();
    for (let i = 0; i < enemies.length; i++) {
        enemies[i].y += enemySpeed;
        drawCar(enemies[i].x, enemies[i].y, enemies[i].width, enemies[i].height, enemies[i].color);

        if (checkCollision(player, enemies[i])) {
            endGame();
        }

        if (enemies[i].y > canvas.height) {
            enemies.splice(i, 1);
            score += 10;
            scoreElement.textContent = score;

            // تحديث أعلى نتيجة فوراً أثناء اللعب إذا تجاوزتها
            if (score > highScore) {
                highScore = score;
                highScoreElement.textContent = highScore;
                localStorage.setItem("carGameHighScore", highScore); // حفظ في المتصفح
            }

            if (score % 50 === 0) {
                enemySpeed += 0.5;
            }
            i--;
        }
    }

    requestAnimationFrame(update);
}

function endGame() {
    gameOver = true;

    // التأكد من حفظ أعلى نتيجة عند نهاية اللعبة
    if (score > highScore) {
        highScore = score;
        highScoreElement.textContent = highScore;
        localStorage.setItem("carGameHighScore", highScore);
    }

    ctx.fillStyle = "rgba(0, 0, 0, 0.75)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.fillStyle = "#ef4444";
    ctx.font = "30px Arial";
    ctx.textAlign = "center";
    ctx.fillText("انتهت اللعبة! 💥", canvas.width / 2, canvas.height / 2 - 40);

    ctx.fillStyle = "#ffffff";
    ctx.font = "20px Arial";
    ctx.fillText(`النقاط: ${score}`, canvas.width / 2, canvas.height / 2);
    
    ctx.fillStyle = "#f59e0b";
    ctx.fillText(`👑 أعلى نتيجة: ${highScore}`, canvas.width / 2, canvas.height / 2 + 35);

    restartBtn.style.display = "block";
}

function resetGame() {
    score = 0;
    enemySpeed = 4;
    enemies = [];
    gameOver = false;
    player.x = canvas.width / 2 - 20;
    scoreElement.textContent = score;
    restartBtn.style.display = "none";
    update();
}

// بدء اللعبة
update();