مثال توليد الكود

يوضح هذا المثال كيفية استخدام DeepSeek لتوليد الكود، بما في ذلك كيفية وصف المتطلبات وتوليد الكود وشرح تفاصيل التنفيذ.

المهمة

إنشاء لعبة جومكو (خمسة في صف) كاملة باستخدام HTML مع منطق اللعبة وتصميم الواجهة.

صيغة السؤال

الرجاء مساعدتي في إنشاء لعبة جومكو باستخدام HTML، مع حفظ جميع الكود في ملف HTML واحد.

مثال الإجابة

حسناً! إليك كود HTML بسيط للعبة جومكو. يتضمن الكود لوحة لعب أساسية حيث يمكن للاعبين وضع قطعهم بالنقر على الشبكة. ستكتشف اللعبة تلقائياً عندما يفوز أحد اللاعبين.

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<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;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        #board {
            display: grid;
            grid-template-columns: repeat(15, 30px);
            grid-template-rows: repeat(15, 30px);
            gap: 1px;
            background-color: #d18b47;
            padding: 10px;
            border-radius: 5px;
        }
        .cell {
            width: 30px;
            height: 30px;
            background-color: #ffce9e;
            border: 1px solid #d18b47;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
        .cell.black::before, .cell.white::before {
            content: '';
            width: 20px;
            height: 20px;
            border-radius: 50%;
        }
        .cell.black::before {
            background-color: black;
        }
        .cell.white::before {
            background-color: white;
        }
        #message {
            margin-top: 20px;
            font-size: 24px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="board"></div>
    <div id="message"></div>

    <script>
        const boardSize = 15;
        let currentPlayer = 'black';
        let board = Array.from({ length: boardSize }, () => Array(boardSize).fill(null));

        function createBoard() {
            const boardElement = document.getElementById('board');
            for (let i = 0; i < boardSize; i++) {
                for (let j = 0; j < boardSize; j++) {
                    const cell = document.createElement('div');
                    cell.classList.add('cell');
                    cell.dataset.row = i;
                    cell.dataset.col = j;
                    cell.addEventListener('click', handleCellClick);
                    boardElement.appendChild(cell);
                }
            }
        }

        function handleCellClick(event) {
            const row = parseInt(event.target.dataset.row);
            const col = parseInt(event.target.dataset.col);

            if (board[row][col] !== null) return;

            board[row][col] = currentPlayer;
            event.target.classList.add(currentPlayer);

            if (checkWin(row, col, currentPlayer)) {
                document.getElementById('message').textContent = `${currentPlayer === 'black' ? 'الأسود' : 'الأبيض'} فاز!`;
                document.querySelectorAll('.cell').forEach(cell => cell.removeEventListener('click', handleCellClick));
                return;
            }

            currentPlayer = currentPlayer === 'black' ? 'white' : 'black';
        }

        function checkWin(row, col, player) {
            const directions = [
                { dr: 0, dc: 1 },  // أفقي
                { dr: 1, dc: 0 },  // عمودي
                { dr: 1, dc: 1 },  // قطري رئيسي
                { dr: 1, dc: -1 }  // قطري ثانوي
            ];

            for (const { dr, dc } of directions) {
                let count = 1;

                // فحص اتجاه واحد
                for (let i = 1; i < 5; i++) {
                    const r = row + dr * i;
                    const c = col + dc * i;
                    if (r < 0 || r >= boardSize || c < 0 || c >= boardSize || board[r][c] !== player) break;
                    count++;
                }

                // فحص الاتجاه المعاكس
                for (let i = 1; i < 5; i++) {
                    const r = row - dr * i;
                    const c = col - dc * i;
                    if (r < 0 || r >= boardSize || c < 0 || c >= boardSize || board[r][c] !== player) break;
                    count++;
                }

                if (count >= 5) return true;
            }

            return false;
        }

        createBoard();
    </script>
</body>
</html>

شرح الكود

هيكل HTML:
- #board هو الحاوية للوحة اللعب، يستخدم تخطيط الشبكة لإنشاء شبكة 15×15
- .cell يمثل نمط كل خلية، يطلق حدث handleCellClick عند النقر
- #message يعرض نتائج اللعبة
تنسيق CSS:
- تنسيق اللوحة والخلايا، بما في ذلك الألوان الخلفية والحدود وأنماط القطع
- يستخدم تخطيط CSS Grid لهيكل اللوحة
- يستخدم العناصر الزائفة لعرض قطع اللعب
منطق JavaScript:
- دالة createBoard تنشئ لوحة اللعب
- دالة handleCellClick تعالج أحداث النقر على الخلايا، تحدث حالة اللوحة وتتحقق من الفوز
- دالة checkWin تتحقق مما إذا كان اللاعب الحالي قد فاز بتوصيل خمس قطع

تعليمات الاستخدام

احفظ الكود كملف .html
افتح الملف في متصفح الويب
يتناوب اللاعبان الأسود والأبيض في النقر على الشبكة لوضع القطع
عندما يصل أحد اللاعبين إلى خمس قطع متصلة، تنتهي اللعبة وتعرض الفائز

الميزات

تناوب الأدوار بين اللاعبين الأسود والأبيض
كشف تلقائي للفوز
منع وضع القطع على الخلايا المشغولة
تعطيل الحركات الإضافية بعد انتهاء اللعبة
تصميم واجهة نظيف وجذاب

مثال توليد الكود

from openai import OpenAI

client = OpenAI(
    base_url="https://api.deepseek.com/",
    api_key="<YOUR_API_KEY>"
)

completion = client.chat.completions.create(
    model="deepseek-chat",
    messages=[
        {
            "role": "user",
            "content": "الرجاء مساعدتي في إنشاء لعبة جومكو باستخدام HTML، مع حفظ جميع الكود في ملف HTML واحد."
        }
    ]
)

print(completion.choices[0].message.content)