Ejemplo de Generación de Código

Este ejemplo demuestra cómo usar DeepSeek para generar código, incluyendo cómo describir requisitos, generar código y explicar detalles de implementación.

Tarea

Generar un juego completo de Gomoku (Cinco en Línea) en HTML con lógica de juego y estilo de interfaz.

Prompt

Por favor, ayúdame a crear un juego de Gomoku usando HTML, con todo el código guardado en un solo archivo HTML.

Ejemplo de Respuesta

¡Aquí tienes un juego simple de Gomoku en HTML! El código incluye un tablero de juego básico donde los jugadores pueden colocar sus piezas haciendo clic en la cuadrícula. El juego detectará automáticamente cuando un jugador gane.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Juego 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 = `¡${currentPlayer === 'black' ? 'Negras' : 'Blancas'} ganan!`;
                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 },  // diagonal principal
                { dr: 1, dc: -1 }  // diagonal secundaria
            ];

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

                // Verificar una dirección
                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++;
                }

                // Verificar dirección opuesta
                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>

Explicación del Código

Estructura HTML:
- #board es el contenedor del tablero de juego, usando diseño grid para crear una cuadrícula de 15x15
- .cell representa el estilo de cada celda, activando el evento handleCellClick al hacer clic
- #message muestra los resultados del juego
Estilos CSS:
- Estilo del tablero y celdas, incluyendo colores de fondo, bordes y diseño de piezas
- Usa diseño CSS Grid para la estructura del tablero
- Utiliza pseudo-elementos para mostrar las piezas del juego
Lógica JavaScript:
- La función createBoard genera el tablero de juego
- La función handleCellClick maneja los eventos de clic en las celdas, actualiza el estado del tablero y verifica si hay ganador
- La función checkWin verifica si el jugador actual ha ganado conectando cinco piezas

Instrucciones de Uso

Guarda el código como archivo .html
Abre el archivo en un navegador web
Los jugadores negro y blanco se turnan haciendo clic en la cuadrícula para colocar piezas
Cuando un jugador conecta cinco piezas, el juego termina y muestra al ganador

Características

Turnos alternados entre jugadores negro y blanco
Detección automática de victoria
Previene colocar piezas en celdas ocupadas
Deshabilita movimientos adicionales después de terminar el juego
Diseño de interfaz limpio y atractivo

Ejemplo de Generación de Código

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": "Por favor, ayúdame a crear un juego de Gomoku usando HTML, con todo el código guardado en un solo archivo HTML."
        }
    ]
)

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