コード生成の例

このサンプルでは、DeepSeekを使用してコードを生成する方法を示します。要件の記述方法、コードの生成方法、実装の詳細の説明方法を含みます。

タスク

ゲームロジックとインターフェーススタイリングを含む、完全なHTML五目並べゲームを生成します。

プロンプト

HTMLを使用して五目並べゲームを作成してください。すべてのコードを1つのHTMLファイルに保存します。

回答例

以下は、シンプルな五目並べゲームのHTMLコードです。このコードには基本的なゲームボードが含まれており、プレイヤーはグリッドをクリックして駒を置くことができます。ゲームは勝者を自動的に検出します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五目並べゲーム</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' ? '黒' : '白'}の勝ちです！`;
                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 },  // 水平
                { dr: 1, dc: 0 },  // 垂直
                { dr: 1, dc: 1 },  // 主対角線
                { dr: 1, dc: -1 }  // 副対角線
            ];

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

                // 一方向をチェック
                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++;
                }

                // 反対方向をチェック
                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>

コードの説明

HTML構造：
- #boardはゲームボードのコンテナで、グリッドレイアウトを使用して15x15のグリッドを作成
- .cellは各セルのスタイルで、クリック時にhandleCellClickイベントを発生
- #messageはゲーム結果を表示
CSSスタイリング：
- ボードとセルのスタイリング（背景色、ボーダー、駒のスタイルなど）
- CSSグリッドレイアウトを使用してボード構造を実現
- 疑似要素を使用して駒を表示
JavaScriptロジック：
- createBoard関数でゲームボードを生成
- handleCellClick関数でセルのクリックイベントを処理し、ボードの状態を更新して勝利判定を実行
- checkWin関数で現在のプレイヤーが五目並べを達成したかチェック

使用方法

コードを.htmlファイルとして保存
ウェブブラウザでファイルを開く
黒と白のプレイヤーが交互にグリッドをクリックして駒を配置
一方のプレイヤーが5つの駒を並べると、ゲームが終了し勝者が表示される

機能

黒と白のプレイヤーが交互に手番を実行
自動的な勝利判定
既に駒が置かれているセルへの配置を防止
ゲーム終了後の追加の手を無効化
クリーンで魅力的なインターフェースデザイン

コード生成例

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": "HTMLを使用して五目並べゲームを作成してください。すべてのコードを1つのHTMLファイルに保存します。"
        }
    ]
)

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