Exemple de Génération de Code

Cet exemple montre comment utiliser DeepSeek pour générer du code, y compris comment décrire les exigences, générer du code et expliquer les détails d'implémentation.

Tâche

Générer un jeu complet de Gomoku (Cinq en ligne) en HTML avec la logique du jeu et le style de l'interface.

Prompt

Aidez-moi à créer un jeu de Gomoku en utilisant HTML, avec tout le code sauvegardé dans un seul fichier HTML.

Exemple de Réponse

Voici un jeu simple de Gomoku en HTML ! Le code inclut un plateau de jeu basique où les joueurs peuvent placer leurs pièces en cliquant sur la grille. Le jeu détectera automatiquement quand un joueur gagne.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jeu de Gomoku</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 = `Les ${currentPlayer === 'black' ? 'Noirs' : 'Blancs'} gagnent !`;
                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 },  // horizontal
                { dr: 1, dc: 0 },  // vertical
                { dr: 1, dc: 1 },  // diagonale principale
                { dr: 1, dc: -1 }  // diagonale secondaire
            ];

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

                // Vérifier une direction
                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++;
                }

                // Vérifier la direction opposée
                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>

Explication du Code

Structure HTML :
- #board est le conteneur du plateau de jeu, utilisant une disposition en grille pour créer une grille 15x15
- .cell représente le style de chaque cellule, déclenchant l'événement handleCellClick au clic
- #message affiche les résultats du jeu
Style CSS :
- Style du plateau et des cellules, incluant les couleurs de fond, les bordures et le design des pièces
- Utilise la disposition CSS Grid pour la structure du plateau
- Utilise des pseudo-éléments pour afficher les pièces du jeu
Logique JavaScript :
- La fonction createBoard génère le plateau de jeu
- La fonction handleCellClick gère les événements de clic sur les cellules, met à jour l'état du plateau et vérifie s'il y a un gagnant
- La fonction checkWin vérifie si le joueur actuel a gagné en connectant cinq pièces

Instructions d'Utilisation

Sauvegardez le code comme fichier .html
Ouvrez le fichier dans un navigateur web
Les joueurs noir et blanc alternent en cliquant sur la grille pour placer les pièces
Quand un joueur connecte cinq pièces, le jeu se termine et affiche le gagnant

Fonctionnalités

Tours alternés entre les joueurs noir et blanc
Détection automatique de la victoire
Empêche de placer des pièces sur des cellules occupées
Désactive les mouvements supplémentaires après la fin du jeu
Design d'interface propre et attractif

Exemple de Génération de Code

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": "Aidez-moi à créer un jeu de Gomoku en utilisant HTML, avec tout le code sauvegardé dans un seul fichier HTML."
        }
    ]
)

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