Code-Generierung Beispiel

Dieses Beispiel zeigt, wie man DeepSeek zur Code-Generierung verwendet, einschließlich der Beschreibung von Anforderungen, der Code-Generierung und der Erklärung von Implementierungsdetails.

Aufgabe

Generieren Sie ein vollständiges HTML Gomoku (Fünf in einer Reihe) Spiel mit Spiellogik und Interface-Styling.

Prompt

Bitte helfen Sie mir, ein Gomoku-Spiel mit HTML zu erstellen, wobei der gesamte Code in einer einzigen HTML-Datei gespeichert wird.

Beispielantwort

Hier ist ein einfaches Gomoku-Spiel in HTML. Der Code enthält ein grundlegendes Spielbrett, auf dem die Spieler durch Klicken auf das Raster ihre Steine platzieren können. Das Spiel erkennt automatisch, wenn ein Spieler gewinnt.

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gomoku Spiel</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' ? 'Schwarz' : 'Weiß'} gewinnt!`;
                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 },  // vertikal
                { dr: 1, dc: 1 },  // diagonal hauptrichtung
                { dr: 1, dc: -1 }  // diagonal nebenrichtung
            ];

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

                // Eine Richtung prüfen
                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++;
                }

                // Gegenrichtung prüfen
                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-Erklärung

HTML-Struktur:
- #board ist der Container für das Spielbrett, verwendet Grid-Layout für ein 15x15 Raster
- .cell repräsentiert den Stil jeder Zelle, löst bei Klick das handleCellClick-Event aus
- #message zeigt die Spielergebnisse an
CSS-Styling:
- Styling für Brett und Zellen, einschließlich Hintergrundfarben, Ränder und Steindesign
- Verwendet CSS Grid Layout für die Brettstruktur
- Nutzt Pseudo-Elemente zur Darstellung der Spielsteine
JavaScript-Logik:
- createBoard-Funktion generiert das Spielbrett
- handleCellClick-Funktion verarbeitet Zell-Klick-Events, aktualisiert den Brettzustand und prüft auf Gewinn
- checkWin-Funktion überprüft, ob der aktuelle Spieler durch Verbinden von fünf Steinen gewonnen hat

Verwendungsanleitung

Speichern Sie den Code als .html-Datei
Öffnen Sie die Datei im Webbrowser
Schwarze und weiße Spieler klicken abwechselnd auf das Raster, um Steine zu setzen
Wenn ein Spieler fünf Steine verbindet, endet das Spiel und zeigt den Gewinner an

Funktionen

Abwechselnde Züge zwischen schwarzen und weißen Spielern
Automatische Gewinnererkennung
Verhindert das Setzen von Steinen auf besetzten Feldern
Deaktiviert weitere Züge nach Spielende
Sauberes und attraktives Interface-Design

Code-Generierung Beispiel

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": "Bitte helfen Sie mir, ein Gomoku-Spiel mit HTML zu erstellen, wobei der gesamte Code in einer einzigen HTML-Datei gespeichert wird."
        }
    ]
)

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