Esempio di Generazione del Codice

Questo esempio mostra come utilizzare DeepSeek per generare codice, incluso come descrivere i requisiti, generare codice e spiegare i dettagli dell'implementazione.

Compito

Generare un gioco completo di Gomoku (Cinque in Fila) in HTML con logica di gioco e stile dell'interfaccia.

Prompt

Per favore, aiutami a creare un gioco di Gomoku usando HTML, con tutto il codice salvato in un singolo file HTML.

Esempio di Risposta

Ecco un semplice gioco di Gomoku in HTML! Il codice include una scacchiera di base dove i giocatori possono posizionare i loro pezzi cliccando sulla griglia. Il gioco rileverà automaticamente quando un giocatore vince.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gioco di 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 = `Il ${currentPlayer === 'black' ? 'Nero' : 'Bianco'} vince!`;
                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 },  // orizzontale
                { dr: 1, dc: 0 },  // verticale
                { dr: 1, dc: 1 },  // diagonale principale
                { dr: 1, dc: -1 }  // diagonale secondaria
            ];

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

                // Controlla una direzione
                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++;
                }

                // Controlla la direzione opposta
                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>

Spiegazione del Codice

Struttura HTML:
- #board è il contenitore della scacchiera, utilizzando il layout grid per creare una griglia 15x15
- .cell rappresenta lo stile di ogni cella, attivando l'evento handleCellClick al click
- #message visualizza i risultati del gioco
Stile CSS:
- Stile della scacchiera e delle celle, inclusi colori di sfondo, bordi e design dei pezzi
- Utilizza il layout CSS Grid per la struttura della scacchiera
- Utilizza pseudo-elementi per visualizzare i pezzi del gioco
Logica JavaScript:
- La funzione createBoard genera la scacchiera
- La funzione handleCellClick gestisce gli eventi di click sulle celle, aggiorna lo stato della scacchiera e verifica se c'è un vincitore
- La funzione checkWin verifica se il giocatore corrente ha vinto collegando cinque pezzi

Istruzioni per l'Uso

Salvare il codice come file .html
Aprire il file in un browser web
I giocatori nero e bianco si alternano cliccando sulla griglia per posizionare i pezzi
Quando un giocatore collega cinque pezzi, il gioco termina e mostra il vincitore

Caratteristiche

Turni alternati tra giocatori nero e bianco
Rilevamento automatico della vittoria
Impedisce di posizionare pezzi su celle occupate
Disabilita le mosse aggiuntive dopo la fine del gioco
Design dell'interfaccia pulito e attraente

Esempio di Generazione del Codice

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": "Per favore, aiutami a creare un gioco di Gomoku usando HTML, con tutto il codice salvato in un singolo file HTML."
        }
    ]
)

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