Code Generation Example

This example demonstrates how to use DeepSeek to generate code, including how to describe requirements, generate code, and explain implementation details.

Task

Generate a complete HTML Gomoku (Five in a Row) game with game logic and interface styling.

Prompt

Please help me create a Gomoku game using HTML, with all code saved in a single HTML file.

Example Response

Here's a simple Gomoku game implemented in HTML. The code includes a basic game board where players can place their pieces by clicking on the grid. The game will detect when a player wins.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gomoku Game</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.charAt(0).toUpperCase() + currentPlayer.slice(1)} wins!`;
                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 },  // main diagonal
                { dr: 1, dc: -1 }  // anti-diagonal
            ];

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

                // Check one 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++;
                }

                // Check opposite 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++;
                }

                if (count >= 5) return true;
            }

            return false;
        }

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

Code Explanation

HTML Structure:
- #board is the container for the game board, using grid layout to create a 15x15 grid
- .cell represents each cell's style, triggering handleCellClick event when clicked
- #message displays game results
CSS Styling:
- Board and cell styling, including background colors, borders, and piece styles
- Uses CSS Grid layout for the board structure
- Uses pseudo-elements to display game pieces
JavaScript Logic:
- createBoard function generates the game board
- handleCellClick function handles cell click events, updates board state, and checks for wins
- checkWin function checks if the current player has won by connecting five pieces

Usage Instructions

Save the code as an .html file
Open the file in a web browser
Black and white players take turns clicking on the grid to place pieces
When one player connects five pieces, the game ends and displays the winner

Features

Alternating turns between black and white players
Automatic win detection
Prevents placing pieces on occupied cells
Disables further moves after game ends
Clean and attractive interface design

Code Generation Example

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": "Please help me create a Gomoku game using HTML, with all code saved in a single HTML file."
        }
    ]
)

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