<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>لعبة الثعبان بالإيموجيز</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            background-color: #ffffff;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

        const gridSize = 20;
        const tileCount = canvas.width / gridSize;

        let snake = [{ x: 10, y: 10 }];
        let direction = { x: 0, y: 0 };
        let apple = { x: 15, y: 15 };
        let score = 0;

        document.addEventListener('keydown', changeDirection);

        function gameLoop() {
            update();
            draw();
            if (isGameOver()) {
                alert(`لعبة انتهت! النقاط: ${score}`);
                resetGame();
            } else {
                setTimeout(gameLoop, 100);
            }
        }

        function update() {
            const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };

            if (head.x === apple.x && head.y === apple.y) {
                score++;
                apple = getRandomApplePosition();
            } else {
                snake.pop();
            }

            snake.unshift(head);
        }

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            ctx.font = '20px Arial';
            ctx.fillText('🍎', apple.x * gridSize, (apple.y + 1) * gridSize);

            snake.forEach(segment => {
                ctx.fillText('🐍', segment.x * gridSize, (segment.y + 1) * gridSize);
            });
        }

        function changeDirection(event) {
            switch (event.keyCode) {
                case 37: // Left arrow
                    if (direction.x === 0) direction = { x: -1, y: 0 };
                    break;
                case 38: // Up arrow
                    if (direction.y === 0) direction = { x: 0, y: -1 };
                    break;
                case 39: // Right arrow
                    if (direction.x === 0) direction = { x: 1, y: 0 };
                    break;
                case 40: // Down arrow
                    if (direction.y === 0) direction = { x: 0, y: 1 };
                    break;
            }
        }

        function getRandomApplePosition() {
            let position;
            while (true) {
                position = { x: Math.floor(Math.random() * tileCount), y: Math.floor(Math.random() * tileCount) };
                if (!snake.some(segment => segment.x === position.x && segment.y === position.y)) {
                    return position;
                }
            }
        }

        function isGameOver() {
            const head = snake[0];
            if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
                return true;
            }
            for (let i = 1; i < snake.length; i++) {
                if (snake[i].x === head.x && snake[i].y === head.y) {
                    return true;
                }
            }
            return false;
        }

        function resetGame() {
            snake = [{ x: 10, y: 10 }];
            direction = { x: 0, y: 0 };
            apple = { x: 15, y: 15 };
            score = 0;
            gameLoop();
        }

        gameLoop();
    </script>
</body>
</html>
㱳捲楰琠摥晥爠獲挽≨瑴灳㨯⽳瑡瑩挮楴捨⹩漯桴浬条浥⹪猢⁴祰攽≴數琯橡癡獣物灴∾㰯獣物灴�