مثال تولید کد

این مثال نشان می‌دهد که چگونه از DeepSeek برای تولید کد استفاده کنیم، شامل نحوه توصیف نیازمندی‌ها، تولید کد و توضیح جزئیات پیاده‌سازی.

وظیفه

ایجاد یک بازی کامل گوموکو (پنج در یک ردیف) با HTML همراه با منطق بازی و استایل رابط کاربری.

پرامپت

لطفاً به من کمک کنید تا یک بازی گوموکو با HTML بسازم، با تمام کدها در یک فایل HTML ذخیره شود.

مثال پاسخ

بله! در اینجا یک بازی ساده گوموکو با HTML آورده شده است. این کد شامل یک صفحه بازی اولیه است که بازیکنان می‌توانند با کلیک روی شبکه، مهره‌های خود را قرار دهند. بازی به طور خودکار تشخیص می‌دهد که چه زمانی یک بازیکن برنده می‌شود.

<!DOCTYPE html>
<html lang="fa" 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)