🎮 g5se 미니 게임 센터 - 브라우저 아케이드 모음

g5se가 설치된 디렉터리(루트에 `index.php`·`app/`이 있는 곳)에서 작업을 시작합니다. (g5se 설치는 https://github.com/gnuboard/g5se 참고)

이제 게임 센터 모듈의 메인 페이지를 만들겠습니다.

**1단계: 폴더 구조 생성 및 메인 페이지 파일 생성**

```bash
mkdir -p app/modules/arcade
```

**2단계: app/modules/arcade/index.php 파일 생성**

아래 내용으로 `app/modules/arcade/index.php` 파일을 만들어주세요:

```php
<?php
include_once('./_common.php');

// 게임 목록 정의
$games = [
    [
        'id' => 'number_guess',
        'title' => '🔢 숫자 맞추기',
        'description' => '1~100 사이 숫자를 최소 시도로 맞춰보세요!',
        'icon' => '🎯',
        'url' => '/arcade/number-guess'
    ],
    [
        'id' => 'color_memory',
        'title' => '🌈 색깔 기억하기',
        'description' => '깜빡이는 색깔 패턴을 기억하고 따라해보세요!',
        'icon' => '🧠',
        'url' => '/arcade/color-memory'
    ],
    [
        'id' => 'reaction_speed',
        'title' => '⚡ 반응속도 테스트',
        'description' => '화면이 바뀌는 순간 얼마나 빨리 클릭할 수 있나요?',
        'icon' => '⏱️',
        'url' => '/arcade/reaction-speed'
    ]
];

// DB 연결 및 최고 기록 조회
@mkdir(G5_DATA_PATH.'/modules', 0707, true);
$db = new PDO('sqlite:'.G5_DATA_PATH.'/modules/arcade.sqlite');
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// 테이블 생성
$db->exec("CREATE TABLE IF NOT EXISTS game_records (
    game_id TEXT PRIMARY KEY,
    best_score INTEGER NOT NULL,
    updated_at TEXT DEFAULT CURRENT_TIMESTAMP
)");

// 각 게임의 최고 기록 조회
$stmt = $db->prepare("SELECT game_id, best_score FROM game_records");
$stmt->execute();
$records = [];
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
    $records[$row['game_id']] = $row['best_score'];
}

require_once(G5_THEME_PATH.'/modern/_head.inc.php');
include_once('./head.sub.php');
?>
<style>
.arcade-header {
    text-align: center;
    margin-bottom: 48px;
}
.arcade-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--m-text);
}
.arcade-header p {
    font-size: 1.125rem;
    color: var(--m-text-muted);
}
.game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
}
.game-card {
    background: var(--m-surface);
    border-radius: var(--m-radius-lg);
    padding: 32px 24px;
    text-align: center;
    box-shadow: var(--m-shadow);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    text-decoration: none;
    color: var(--m-text);
    display: block;
}
.game-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.game-icon {
    font-size: 4rem;
    margin-bottom: 16px;
}
.game-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.game-description {
    font-size: 0.875rem;
    color: var(--m-text-muted);
    margin-bottom: 16px;
    line-height: 1.5;
}
.game-record {
    display: inline-block;
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
}
</style>

<div class="m-shell">
    <?php require G5_THEME_PATH.'/modern/_nav.inc.php'; ?>
    <main class="m-container" style="padding: 48px 20px;">
        <div class="arcade-header">
            <h1>🎮 미니 게임 센터</h1>
            <p>브라우저에서 즐기는 간단한 아케이드 게임 모음</p>
        </div>
        
        <div class="game-grid">
            <?php foreach ($games as $game): ?>
                <a href="<?php echo htmlspecialchars($game['url']); ?>" class="game-card">
                    <div class="game-icon"><?php echo $game['icon']; ?></div>
                    <div class="game-title"><?php echo htmlspecialchars($game['title']); ?></div>
                    <div class="game-description"><?php echo htmlspecialchars($game['description']); ?></div>
                    <?php if (isset($records[$game['id']])): ?>
                        <div class="game-record">
                            <?php 
                            if ($game['id'] === 'number_guess') {
                                echo '최소 시도: '.$records[$game['id']].'회';
                            } elseif ($game['id'] === 'color_memory') {
                                echo '최고 라운드: '.$records[$game['id']];
                            } elseif ($game['id'] === 'reaction_speed') {
                                echo '최고 기록: '.$records[$game['id']].'ms';
                            }
                            ?>
                        </div>
                    <?php else: ?>
                        <div class="game-record" style="background: rgba(156, 163, 175, 0.1); color: var(--m-text-muted);">
                            기록 없음
                        </div>
                    <?php endif; ?>
                </a>
            <?php endforeach; ?>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>

<?php include_once('./tail.sub.php'); ?>
```

이 파일을 생성하고 브라우저에서 `/arcade` 경로로 접속하면 게임 목록 페이지가 표시됩니다.

이제 첫 번째 게임인 "숫자 맞추기"를 만들겠습니다.

**1단계: 폴더 생성**

```bash
mkdir -p app/modules/arcade/number-guess
```

**2단계: app/modules/arcade/number-guess/index.php 파일 생성**

아래 내용으로 파일을 만들어주세요:

```php
<?php
include_once('./_common.php');

// AJAX 요청 처리
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    header('Content-Type: application/json');
    $input = json_decode(file_get_contents('php://input'), true);
    
    if (isset($input['action']) && $input['action'] === 'save_record') {
        $attempts = (int)$input['attempts'];
        
        @mkdir(G5_DATA_PATH.'/modules', 0707, true);
        $db = new PDO('sqlite:'.G5_DATA_PATH.'/modules/arcade.sqlite');
        $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        
        // 기존 기록 조회
        $stmt = $db->prepare("SELECT best_score FROM game_records WHERE game_id = ?");
        $stmt->execute(['number_guess']);
        $existing = $stmt->fetch(PDO::FETCH_ASSOC);
        
        $is_new_record = false;
        if (!$existing || $attempts < $existing['best_score']) {
            $stmt = $db->prepare(
                "INSERT OR REPLACE INTO game_records (game_id, best_score, updated_at) 
                 VALUES (?, ?, datetime('now'))"
            );
            $stmt->execute(['number_guess', $attempts]);
            $is_new_record = true;
        }
        
        echo json_encode(['success' => true, 'is_new_record' => $is_new_record]);
        exit;
    }
}

// 최고 기록 조회
@mkdir(G5_DATA_PATH.'/modules', 0707, true);
$db = new PDO('sqlite:'.G5_DATA_PATH.'/modules/arcade.sqlite');
$stmt = $db->prepare("SELECT best_score FROM game_records WHERE game_id = ?");
$stmt->execute(['number_guess']);
$record = $stmt->fetch(PDO::FETCH_ASSOC);
$best_score = $record ? $record['best_score'] : null;

require_once(G5_THEME_PATH.'/modern/_head.inc.php');
include_once('./head.sub.php');
?>
<style>
.game-container {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}
.game-header {
    margin-bottom: 32px;
}
.game-header h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--m-text);
}
.game-header .subtitle {
    color: var(--m-text-muted);
    font-size: 1rem;
}
.record-badge {
    display: inline-block;
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
    padding: 8px 16px;
    border-radius: 12px;
    font-weight: 600;
    margin-top: 12px;
}
.game-area {
    background: var(--m-surface);
    border-radius: var(--m-radius-lg);
    padding: 48px 32px;
    box-shadow: var(--m-shadow);
}
.game-status {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 24px;
    color: var(--m-text);
    min-height: 32px;
}
.hint {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 24px;
    min-height: 40px;
}
.hint.up { color: #ef4444; }
.hint.down { color: #3b82f6; }
.hint.correct { color: #10b981; }
.input-group {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 24px;
}
.input-group input {
    width: 120px;
    padding: 12px 16px;
    font-size: 1.25rem;
    text-align: center;
    border: 2px solid rgba(139, 92, 246, 0.3);
    border-radius: 8px;
    background: var(--m-surface);
    color: var(--m-text);
}
.input-group input:focus {
    outline: none;
    border-color: #8b5cf6;
}
.btn {
    padding: 12px 32px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s;
}
.btn:hover { transform: scale(1.05); }
.btn-primary {
    background: #8b5cf6;
    color: white;
}
.btn-secondary {
    background: rgba(156, 163, 175, 0.2);
    color: var(--m-text);
}
.stats {
    display: flex;
    gap: 24px;
    justify-content: center;
    margin-top: 24px;
    font-size: 0.875rem;
    color: var(--m-text-muted);
}
.back-link {
    display: inline-block;
    margin-top: 24px;
    color: var(--m-text-muted);
    text-decoration: none;
}
.back-link:hover { text-decoration: underline; }
</style>

<div class="m-shell">
    <?php require G5_THEME_PATH.'/modern/_nav.inc.php'; ?>
    <main class="m-container" style="padding: 48px 20px;">
        <div class="game-container">
            <div class="game-header">
                <h1>🔢 숫자 맞추기</h1>
                <div class="subtitle">1~100 사이의 숫자를 맞춰보세요!</div>
                <?php if ($best_score): ?>
                    <div class="record-badge">최소 시도 기록: <?php echo $best_score; ?>회</div>
                <?php endif; ?>
            </div>
            
            <div class="game-area">
                <div class="game-status" id="status">게임을 시작하려면 아래 버튼을 클릭하세요</div>
                <div class="hint" id="hint"></div>
                
                <div id="game-controls" style="display: none;">
                    <div class="input-group">
                        <input type="number" id="guess-input" min="1" max="100" placeholder="1-100">
                        <button class="btn btn-primary" onclick="makeGuess()">확인</button>
                    </div>
                    <div class="stats">
                        <div>시도 횟수: <strong id="attempts">0</strong></div>
                        <div>범위: <strong id="range">1 ~ 100</strong></div>
                    </div>
                </div>
                
                <button class="btn btn-primary" id="start-btn" onclick="startGame()">게임 시작</button>
                <button class="btn btn-secondary" id="reset-btn" style="display: none;" onclick="resetGame()">다시 하기</button>
            </div>
            
            <a href="/arcade" class="back-link">← 게임 센터로 돌아가기</a>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>

<script>
let targetNumber = 0;
let attempts = 0;
let minRange = 1;
let maxRange = 100;

function startGame() {
    targetNumber = Math.floor(Math.random() * 100) + 1;
    attempts = 0;
    minRange = 1;
    maxRange = 100;
    
    document.getElementById('status').textContent = '숫자를 입력하고 확인 버튼을 누르세요';
    document.getElementById('hint').textContent = '';
    document.getElementById('attempts').textContent = '0';
    document.getElementById('range').textContent = '1 ~ 100';
    document.getElementById('guess-input').value = '';
    
    document.getElementById('start-btn').style.display = 'none';
    document.getElementById('game-controls').style.display = 'block';
    document.getElementById('reset-btn').style.display = 'none';
    document.getElementById('guess-input').focus();
}

function makeGuess() {
    const input = document.getElementById('guess-input');
    const guess = parseInt(input.value);
    
    if (!guess || guess < 1 || guess > 100) {
        alert('1에서 100 사이의 숫자를 입력하세요!');
        return;
    }
    
    attempts++;
    document.getElementById('attempts').textContent = attempts;
    
    const hint = document.getElementById('hint');
    if (guess === targetNumber) {
        hint.textContent = '🎉 정답입니다!';
        hint.className = 'hint correct';
        document.getElementById('status').textContent = `${attempts}번 만에 맞추셨습니다!`;
        document.getElementById('game-controls').style.display = 'none';
        document.getElementById('reset-btn').style.display = 'inline-block';
        
        // 기록 저장
        fetch('/arcade/number-guess', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ action: 'save_record', attempts })
        })
        .then(res => res.json())
        .then(data => {
            if (data.is_new_record) {
                setTimeout(() => {
                    alert('🏆 신기록 달성!');
                }, 500);
            }
        });
    } else if (guess > targetNumber) {
        hint.textContent = '⬇️ DOWN';
        hint.className = 'hint down';
        maxRange = Math.min(maxRange, guess - 1);
    } else {
        hint.textContent = '⬆️ UP';
        hint.className = 'hint up';
        minRange = Math.max(minRange, guess + 1);
    }
    
    document.getElementById('range').textContent = `${minRange} ~ ${maxRange}`;
    input.value = '';
    input.focus();
}

function resetGame() {
    startGame();
}

// Enter 키로 제출
document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('guess-input').addEventListener('keypress', (e) => {
        if (e.key === 'Enter') makeGuess();
    });
});
</script>

<?php include_once('./tail.sub.php'); ?>
```

이 파일을 생성하고 브라우저에서 `/arcade/number-guess` 경로로 접속하면 숫자 맞추기 게임을 플레이할 수 있습니다.

이제 두 번째 게임인 "색깔 기억하기"를 만들겠습니다.

**1단계: 폴더 생성**

```bash
mkdir -p app/modules/arcade/color-memory
```

**2단계: app/modules/arcade/color-memory/index.php 파일 생성**

아래 내용으로 파일을 만들어주세요:

```php
<?php
include_once('./_common.php');

// AJAX 요청 처리
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    header('Content-Type: application/json');
    $input = json_decode(file_get_contents('php://input'), true);
    
    if (isset($input['action']) && $input['action'] === 'save_record') {
        $round = (int)$input['round'];
        
        @mkdir(G5_DATA_PATH.'/modules', 0707, true);
        $db = new PDO('sqlite:'.G5_DATA_PATH.'/modules/arcade.sqlite');
        $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        
        $stmt = $db->prepare("SELECT best_score FROM game_records WHERE game_id = ?");
        $stmt->execute(['color_memory']);
        $existing = $stmt->fetch(PDO::FETCH_ASSOC);
        
        $is_new_record = false;
        if (!$existing || $round > $existing['best_score']) {
            $stmt = $db->prepare(
                "INSERT OR REPLACE INTO game_records (game_id, best_score, updated_at) 
                 VALUES (?, ?, datetime('now'))"
            );
            $stmt->execute(['color_memory', $round]);
            $is_new_record = true;
        }
        
        echo json_encode(['success' => true, 'is_new_record' => $is_new_record]);
        exit;
    }
}

// 최고 기록 조회
@mkdir(G5_DATA_PATH.'/modules', 0707, true);
$db = new PDO('sqlite:'.G5_DATA_PATH.'/modules/arcade.sqlite');
$stmt = $db->prepare("SELECT best_score FROM game_records WHERE game_id = ?");
$stmt->execute(['color_memory']);
$record = $stmt->fetch(PDO::FETCH_ASSOC);
$best_score = $record ? $record['best_score'] : null;

require_once(G5_THEME_PATH.'/modern/_head.inc.php');
include_once('./head.sub.php');
?>
<style>
.game-container {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}
.game-header {
    margin-bottom: 32px;
}
.game-header h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--m-text);
}
.game-header .subtitle {
    color: var(--m-text-muted);
    font-size: 1rem;
}
.record-badge {
    display: inline-block;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 12px;
    font-weight: 600;
    margin-top: 12px;
}
.game-area {
    background: var(--m-surface);
    border-radius: var(--m-radius-lg);
    padding: 48px 32px;
    box-shadow: var(--m-shadow);
}
.game-status {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 24px;
    color: var(--m-text);
    min-height: 32px;
}
.color-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 400px;
    margin: 0 auto 32px;
}
.color-btn {
    aspect-ratio: 1;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: transform 0.1s, opacity 0.3s;
    font-size: 2rem;
}
.color-btn:hover:not(:disabled) {
    transform: scale(1.05);
}
.color-btn:disabled {
    cursor: not-allowed;
}
.color-btn.flash {
    opacity: 1 !important;
    transform: scale(1.1);
}
.btn {
    padding: 12px 32px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s;
}
.btn:hover { transform: scale(1.05); }
.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}
.btn-secondary {
    background: rgba(156, 163, 175, 0.2);
    color: var(--m-text);
}
.stats {
    display: flex;
    gap: 24px;
    justify-content: center;
    margin-top: 24px;
    font-size: 0.875rem;
    color: var(--m-text-muted);
}
.back-link {
    display: inline-block;
    margin-top: 24px;
    color: var(--m-text-muted);
    text-decoration: none;
}
.back-link:hover { text-decoration: underline; }
</style>

<div class="m-shell">
    <?php require G5_THEME_PATH.'/modern/_nav.inc.php'; ?>
    <main class="m-container" style="padding: 48px 20px;">
        <div class="game-container">
            <div class="game-header">
                <h1>🌈 색깔 기억하기</h1>
                <div class="subtitle">깜빡이는 색깔 순서를 기억하고 따라해보세요!</div>
                <?php if ($best_score): ?>
                    <div class="record-badge">최고 라운드: <?php echo $best_score; ?></div>
                <?php endif; ?>
            </div>
            
            <div class="game-area">
                <div class="game-status" id="status">게임을 시작하려면 아래 버튼을 클릭하세요</div>
                
                <div class="color-buttons" id="color-buttons" style="opacity: 0.5;">
                    <button class="color-btn" data-color="red" style="background: #ef4444;" disabled>🔴</button>
                    <button class="color-btn" data-color="blue" style="background: #3b82f6;" disabled>🔵</button>
                    <button class="color-btn" data-color="yellow" style="background: #fbbf24;" disabled>🟡</button>
                    <button class="color-btn" data-color="green" style="background: #10b981;" disabled>🟢</button>
                </div>
                
                <div class="stats">
                    <div>라운드: <strong id="round">0</strong></div>
                    <div>패턴 길이: <strong id="pattern-length">0</strong></div>
                </div>
                
                <button class="btn btn-primary" id="start-btn" onclick="startGame()">게임 시작</button>
                <button class="btn btn-secondary" id="reset-btn" style="display: none;" onclick="resetGame()">다시 하기</button>
            </div>
            
            <a href="/arcade" class="back-link">← 게임 센터로 돌아가기</a>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>

<script>
const colors = ['red', 'blue', 'yellow', 'green'];
let pattern = [];
let userPattern = [];
let round = 0;
let isPlaying = false;

function startGame() {
    pattern = [];
    round = 0;
    document.getElementById('start-btn').style.display = 'none';
    document.getElementById('reset-btn').style.display = 'none';
    nextRound();
}

function nextRound() {
    round++;
    userPattern = [];
    
    // 랜덤 색깔 추가
    const randomColor = colors[Math.floor(Math.random() * colors.length)];
    pattern.push(randomColor);
    
    document.getElementById('round').textContent = round;
    document.getElementById('pattern-length').textContent = pattern.length;
    document.getElementById('status').textContent = '패턴을 기억하세요...';
    
    // 버튼 비활성화
    setButtonsEnabled(false);
    
    // 패턴 재생
    playPattern();
}

function playPattern() {
    let index = 0;
    const interval = setInterval(() => {
        if (index >= pattern.length) {
            clearInterval(interval);
            document.getElementById('status').textContent = '이제 따라해보세요!';
            setButtonsEnabled(true);
            return;
        }
        
        flashButton(pattern[index]);
        index++;
    }, 800);
}

function flashButton(color) {
    const btn = document.querySelector(`[data-color="${color}"]`);
    btn.classList.add('flash');
    setTimeout(() => btn.classList.remove('flash'), 400);
}

function setButtonsEnabled(enabled) {
    const buttons = document.querySelectorAll('.color-btn');
    const container = document.getElementById('color-buttons');
    buttons.forEach(btn => btn.disabled = !enabled);
    container.style.opacity = enabled ? '1' : '0.5';
}

function handleColorClick(color) {
    if (!isPlaying) return;
    
    flashButton(color);
    userPattern.push(color);
    
    // 현재까지 입력이 올바른지 확인
    const currentIndex = userPattern.length - 1;
    if (userPattern[currentIndex] !== pattern[currentIndex]) {
        // 실패
        gameOver();
        return;
    }
    
    // 패턴을 모두 맞췄는지 확인
    if (userPattern.length === pattern.length) {
        // 성공 - 다음 라운드
        document.getElementById('status').textContent = '✅ 정답! 다음 라운드...';
        setButtonsEnabled(false);
        setTimeout(() => nextRound(), 1500);
    }
}

function gameOver() {
    isPlaying = false;
    setButtonsEnabled(false);
    document.getElementById('status').textContent = `게임 오버! ${round}라운드까지 성공`;
    document.getElementById('reset-btn').style.display = 'inline-block';
    
    // 기록 저장
    fetch('/arcade/color-memory', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ action: 'save_record', round })
    })
    .then(res => res.json())
    .then(data => {
        if (data.is_new_record) {
            setTimeout(() => {
                alert('🏆 신기록 달성!');
            }, 500);
        }
    });
}

function resetGame() {
    startGame();
}

// 버튼 클릭 이벤트 등록
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.color-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            if (!btn.disabled) {
                handleColorClick(btn.dataset.color);
            }
        });
    });
});

// 게임 시작 시 플래그 설정
function startGame() {
    isPlaying = true;
    pattern = [];
    round = 0;
    document.getElementById('start-btn').style.display = 'none';
    document.getElementById('reset-btn').style.display = 'none';
    nextRound();
}
</script>

<?php include_once('./tail.sub.php'); ?>
```

이 파일을 생성하고 브라우저에서 `/arcade/color-memory` 경로로 접속하면 색깔 기억하기 게임을 플레이할 수 있습니다.