코드 생성 예시

이 예시는 DeepSeek를 사용하여 코드를 생성하는 방법을 보여줍니다. 요구사항 설명, 코드 생성 및 구현 세부사항 설명 방법을 포함합니다.

작업

게임 로직과 인터페이스 스타일링을 포함한 완전한 HTML 오목 게임을 생성합니다.

프롬프트

HTML을 사용하여 오목 게임을 만들어주세요. 모든 코드를 하나의 HTML 파일에 저장합니다.

응답 예시

다음은 간단한 오목 게임의 HTML 코드입니다. 이 코드는 기본적인 게임 보드를 포함하고 있으며, 플레이어는 그리드를 클릭하여 돌을 놓을 수 있습니다. 게임은 승자를 자동으로 감지합니다.

<!DOCTYPE html>
<html lang="ko">
<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을 사용하여 오목 게임을 만들어주세요. 모든 코드를 하나의 HTML 파일에 저장합니다."
        }
    ]
)

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