2603271026

.gitattributes

@@ -0,0 +1,36 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text
+*.mp3 filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,12 @@
+FROM python:3.10-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+EXPOSE 7860
+
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -0,0 +1,10 @@
+---
+title: Quad
+emoji: 🌖
+colorFrom: indigo
+colorTo: pink
+sdk: docker
+pinned: false
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,167 @@
+import os
+import random
+import uvicorn
+from fastapi import FastAPI
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse
+from pydantic import BaseModel
+from typing import List, Optional
+
+app = FastAPI()
+
+class GameState(BaseModel):
+    board: List[List[int]]
+    hand: List[Optional[List[List[int]]]]
+
+def rotate_cw(piece):
+    return [[piece[1][0], piece[0][0]], 
+            [piece[1][1], piece[0][1]]]
+
+def can_place(board, piece, r, c):
+    for ir in range(2):
+        for ic in range(2):
+            br, bc = r + ir, c + ic
+            if br < 0 or br >= 8 or bc < 0 or bc >= 8:
+                return False
+            if board[br][bc] >= 0:
+                return False
+    return True
+
+def get_connected_empty_spaces(board):
+    visited = [[False]*8 for _ in range(8)]
+    small_holes = 0
+    for r in range(8):
+        for c in range(8):
+            if board[r][c] == -1 and not visited[r][c]:
+                q = [(r, c)]
+                visited[r][c] = True
+                size = 1
+                while q:
+                    cr, cc = q.pop(0)
+                    for dr, dc in [(-1, 0), (1, 0), (0, -1), (0, 1)]:
+                        nr, nc = cr + dr, cc + dc
+                        if 0 <= nr < 8 and 0 <= nc < 8 and board[nr][nc] == -1 and not visited[nr][nc]:
+                            visited[nr][nc] = True
+                            q.append((nr, nc))
+                            size += 1
+                # 1〜2マスの孤立した空間は、ブロックが置けなくなる原因になるためカウント
+                if size <= 2:
+                    small_holes += 1
+    return small_holes
+
+def get_color_adjacency(board):
+    adj = 0
+    for r in range(8):
+        for c in range(8):
+            color = board[r][c]
+            if 0 <= color <= 3:
+                for dr, dc in [(1, 0), (0, 1)]:
+                    nr, nc = r + dr, c + dc
+                    if nr < 8 and nc < 8 and board[nr][nc] == color:
+                        adj += 1
+    return adj
+
+def simulate_move(board, piece, r, c):
+    temp_board = [row[:] for row in board]
+    for ir in range(2):
+        for ic in range(2):
+            temp_board[r + ir][c + ic] = piece[ir][ic]
+            
+    score = 0
+    combo = 0
+    
+    # 連鎖シミュレーション
+    while True:
+        visited = [[False]*8 for _ in range(8)]
+        to_remove = set()
+        
+        for br in range(8):
+            for bc in range(8):
+                color = temp_board[br][bc]
+                if 0 <= color <= 3 and not visited[br][bc]:
+                    q = [(br, bc)]
+                    visited[br][bc] = True
+                    group = [(br, bc)]
+                    while q:
+                        cr, cc = q.pop(0)
+                        for dr, dc in [(-1, 0), (1, 0), (0, -1), (0, 1)]:
+                            nr, nc = cr + dr, cc + dc
+                            if 0 <= nr < 8 and 0 <= nc < 8 and not visited[nr][nc] and temp_board[nr][nc] == color:
+                                visited[nr][nc] = True
+                                q.append((nr, nc))
+                                group.append((nr, nc))
+                    if len(group) >= 3:
+                        for gr, gc in group:
+                            to_remove.add((gr, gc))
+                            
+        if not to_remove:
+            break
+            
+        combo += 1
+        garbage = set()
+        for rr, cc in to_remove:
+            for dr, dc in [(-1, 0), (1, 0), (0, -1), (0, 1)]:
+                nr, nc = rr + dr, cc + dc
+                if 0 <= nr < 8 and 0 <= nc < 8 and temp_board[nr][nc] == 4:
+                    garbage.add((nr, nc))
+        to_remove.update(garbage)
+        
+        score += len(to_remove) * 10 * combo
+        
+        for rr, cc in to_remove:
+            temp_board[rr][cc] = -1
+
+    # 盤面評価（AIの賢さの要）
+    max_height = 0
+    for bc in range(8):
+        for br in range(8):
+            if temp_board[br][bc] != -1:
+                max_height = max(max_height, 8 - br)
+                break
+                
+    small_holes = get_connected_empty_spaces(temp_board)
+    adjacency = get_color_adjacency(temp_board)
+
+    # 評価値の計算
+    eval_score = score * 100               # スコアは最優先
+    eval_score -= (max_height ** 2) * 5    # 高く積むことに対するペナルティ（指数関数的）
+    eval_score -= small_holes * 30         # 孤立マスに対するペナルティ
+    eval_score += adjacency * 3            # 同色ブロックが隣接していることへのボーナス
+
+    return eval_score + random.random() * 0.1 # 同点時の微小なランダム性
+
+@app.post("/api/ai_move")
+def ai_move(state: GameState):
+    board = state.board
+    hand = state.hand
+    
+    best_score = -float('inf')
+    best_move = None
+    
+    for p_idx, original_piece in enumerate(hand):
+        if original_piece is None:
+            continue
+        piece = original_piece
+        for rot in range(4):
+            for r in range(7):
+                for c in range(7):
+                    if can_place(board, piece, r, c):
+                        score = simulate_move(board, piece, r, c)
+                        if score > best_score:
+                            best_score = score
+                            best_move = {"piece_idx": p_idx, "rotations": rot, "r": r, "c": c}
+            piece = rotate_cw(piece)
+            
+    if best_move is None:
+        best_move = {"piece_idx": 0, "rotations": 0, "r": 0, "c": 0}
+        
+    return best_move
+
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+@app.get("/")
+def serve_index():
+    return FileResponse("static/index.html")
+
+if __name__ == "__main__":
+    uvicorn.run(app, host="0.0.0.0", port=7860)

model.pth

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:25da11e1209b46a986242b31f8a88f2502ab2a872548b31ed834c47c5ee89482
+size 936893

requirements.txt

@@ -0,0 +1,5 @@
+fastapi
+uvicorn
+pydantic
+torch
+numpy

static/bgm.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f6f77ae3c5115367e2533d132bff4efa7cf8b7c0f872b6ca5dbb23d6605c55b9
+size 3582220

static/damage.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:32bba94263a7686b213ab1338546fddd5ce176f099dee8998b9f7bfb304979a0
+size 18447

static/gameover.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f1aabbc3d0088993b224d5682d56c14c711033135a79af0a86f33854ae3079a9
+size 21582

static/index.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Quad - VS AI Edition</title>
+  <link rel="stylesheet" href="static/style.css">
+</head>
+<body>
+
+  <!-- タイトル画面 -->
+  <div id="title-screen">
+    <div id="demo-container">
+      <div id="demo-area" class="game-area">
+        <div class="board-wrapper"><div class="board"></div></div>
+        <div class="hand-area"></div>
+      </div>
+    </div>
+    
+    <div id="title-overlay"></div>
+    
+    <div id="title-content">
+      <div id="title-logo">QUAD</div>
+      <div style="color:#aaa; margin-bottom: 40px; letter-spacing: 4px;">COLOR PUZZLE - AI BATTLE</div>
+      <button class="btn" id="btn-1p">1P MODE</button>
+      <button class="btn vs" id="btn-vs-real">VS AI (REALTIME)</button>
+      <button class="btn vs-turn" id="btn-vs-turn">VS AI (TURN)</button>
+    </div>
+  </div>
+
+  <button id="sound-toggle">🔇</button>
+
+  <!-- ゲーム画面 -->
+  <div id="main-wrapper">
+    <div id="turn-indicator">PLAYER'S TURN</div>
+    
+    <div id="game-boards-container">
+      <div id="p1-area" class="game-area">
+        <div class="player-label">PLAYER</div>
+        <div style="font-size: 20px;">Score: <span class="score-display">0</span></div>
+        <div class="board-wrapper">
+          <div class="garbage-ui"><div class="garbage-bar"></div><div class="garbage-text"></div></div>
+          <div class="board"></div>
+          <div class="message-pop"></div>
+        </div>
+        <div class="hand-area"></div>
+      </div>
+
+      <div id="p2-area" class="game-area" style="display: none;">
+        <div class="player-label" style="color: #ff6b6b;">AI CPU</div>
+        <div style="font-size: 20px;">Score: <span class="score-display">0</span></div>
+        <div class="board-wrapper">
+          <div class="garbage-ui"><div class="garbage-bar"></div><div class="garbage-text"></div></div>
+          <div class="board"></div>
+          <div class="message-pop"></div>
+        </div>
+        <div class="hand-area"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- リザルト画面 -->
+  <div id="game-over-overlay">
+    <h2 id="result-title" style="font-size: 50px; margin-bottom: 20px;">GAME OVER</h2>
+    <button class="btn" onclick="location.reload()">BACK TO TITLE</button>
+  </div>
+
+  <script src="static/script.js"></script>
+</body>
+</html>

static/match.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:abafcdeb8e83cfca385a150b99090fbe0eba298209d21c2d7988ca782bb3c64c
+size 29732

static/put.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9fd6f39a8fd80c73bfb53de6a24b5985e123081d2fe79fe7daa0cfa146573831
+size 15939

static/rotate.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9349ee0e4b8365d48f1002e9a07be3f38a801c3f4e7bac8a6cb0f063bc3b985c
+size 15939

static/script.js

@@ -0,0 +1,614 @@
+// ==== 音声管理 ====
+let soundEnabled = false;
+let titleBgm, bgm, sfxPut, sfxMatch, sfxGameover, sfxRotate, sfxWin, sfxDamage;
+let isPlayingGame = false;
+
+function createAudio(src) { const a = new Audio(src); a.preload = 'auto'; return a; }
+
+function ensureAudioCreated() {
+    if (!bgm) {
+        titleBgm = createAudio('static/title.mp3'); titleBgm.loop = true;
+        bgm = createAudio('static/bgm.mp3'); bgm.loop = true;
+        sfxPut = createAudio('static/put.mp3');
+        sfxMatch = createAudio('static/match.mp3');
+        sfxGameover = createAudio('static/gameover.mp3');
+        sfxRotate = createAudio('static/rotate.mp3');
+        sfxWin = createAudio('static/win.mp3');
+        sfxDamage = createAudio('static/damage.mp3');
+    }
+}
+
+function playSfx(audio, vol = 1.0) {
+    if (!soundEnabled || !audio) return;
+    const c = audio.cloneNode(); c.volume = vol; c.play().catch(() => { });
+}
+
+function bgmControl(state) {
+    if (!soundEnabled || !titleBgm || !bgm) return;
+    titleBgm.pause(); bgm.pause();
+    if (state === 'title') { titleBgm.currentTime = 0; titleBgm.volume = 0.4; titleBgm.play().catch(() => { }); }
+    else if (state === 'game') { bgm.currentTime = 0; bgm.volume = 0.4; bgm.play().catch(() => { }); }
+}
+
+document.getElementById('sound-toggle').addEventListener('click', () => {
+    ensureAudioCreated();
+    soundEnabled = !soundEnabled;
+    document.getElementById('sound-toggle').textContent = soundEnabled ? '🔊' : '🔇';
+    if (soundEnabled) {
+        if (isPlayingGame && (!p1 || !p1.isGameOver)) bgmControl('game');
+        else if (!isPlayingGame) bgmControl('title');
+    } else {
+        bgmControl('stop');
+    }
+});
+
+// ==== ゲーム設定 ====
+const COLS = 8, ROWS = 8, COLORS = 4, MIN_MATCH = 3;
+const tileImages = ['static/tile1.png', 'static/tile2.png', 'static/tile3.png', 'static/tile4.png', 'static/tile5.png'];
+const tileImg = (i) => { const img = document.createElement('img'); img.src = tileImages[i]; img.draggable = false; return img; };
+const sleep = ms => new Promise(r => setTimeout(r, ms));
+
+let p1, p2;
+let gameMode = '1p'; // '1p', 'vs-real', 'vs-turn'
+let currentTurn = 1; // 1: Player, 2: AI (ターン制用)
+let isDemoActive = true;
+
+class QuadGame {
+    constructor(rootEl, isAI, isDemo = false) {
+        this.root = rootEl; this.isAI = isAI; this.isDemo = isDemo;
+        this.boardEl = rootEl.querySelector('.board');
+        this.handEl = rootEl.querySelector('.hand-area');
+        this.scoreEl = rootEl.querySelector('.score-display');
+        this.msgEl = rootEl.querySelector('.message-pop');
+        this.garbageUi = rootEl.querySelector('.garbage-ui');
+        this.garbageBar = rootEl.querySelector('.garbage-bar');
+        this.garbageText = rootEl.querySelector('.garbage-text');
+
+        this.board = []; this.hand = [];
+        this.score = 0; this.combo = 0;
+        this.isProcessing = false; this.isGameOver = false; this.aiFetching = false;
+        this.opponent = null;
+
+        this.pendingGarbage = 0;
+        this.garbageTimerMax = 6000;
+        this.garbageTimer = 0;
+
+        this.dragging = null; this.dragEl = null; this.ghostCells = [];
+    }
+
+    init() {
+        this.board = Array.from({ length: ROWS }, () => Array(COLS).fill(-1));
+        this.hand = [this.genPiece(), this.genPiece(), this.genPiece()];
+        this.score = 0; this.combo = 0; this.pendingGarbage = 0;
+        this.isGameOver = false; this.isProcessing = false;
+
+        this.boardEl.innerHTML = '';
+        for (let i = 0; i < 64; i++) {
+            const c = document.createElement('div'); c.className = 'cell';
+            this.boardEl.appendChild(c);
+        }
+        this.updateHandUI();
+        if (this.scoreEl) this.scoreEl.textContent = '0';
+        if (this.garbageUi) this.garbageUi.style.display = 'none';
+    }
+
+    genPiece() {
+        let p;
+        while (true) {
+            p = [[Math.floor(Math.random() * COLORS), Math.floor(Math.random() * COLORS)],
+            [Math.floor(Math.random() * COLORS), Math.floor(Math.random() * COLORS)]];
+            if (!this.hasMatchSync(p)) return p;
+        }
+    }
+
+    hasMatchSync(p) {
+        for (let col = 0; col < COLORS; col++) {
+            let count = 0;
+            for (let r = 0; r < 2; r++) for (let c = 0; c < 2; c++) if (p[r][c] === col) count++;
+            if (count >= 3) return true;
+        }
+        return false;
+    }
+
+    getCellEl(r, c) { return this.boardEl.children[r * COLS + c]; }
+
+    renderBoard() {
+        for (let r = 0; r < ROWS; r++) for (let c = 0; c < COLS; c++) {
+            const cell = this.getCellEl(r, c);
+            const ex = cell.querySelector('.block'); if (ex) ex.remove();
+            if (this.board[r][c] >= 0) {
+                const blk = document.createElement('div'); blk.className = 'block';
+                blk.appendChild(tileImg(this.board[r][c]));
+                cell.appendChild(blk);
+            }
+        }
+    }
+
+    updateHandUI() {
+        this.handEl.innerHTML = '';
+        this.hand.forEach((p, idx) => {
+            const el = document.createElement('div');
+            el.className = 'hand-piece' + (!this.isAI ? ' interactive' : '');
+            if (!p) { el.style.visibility = 'hidden'; this.handEl.appendChild(el); return; }
+
+            [[0, 0], [0, 1], [1, 0], [1, 1]].forEach(([r, c]) => {
+                const w = document.createElement('div'); w.className = 'hand-cell-wrapper';
+                const cl = document.createElement('div'); cl.className = 'hand-cell';
+                cl.style.left = '0'; cl.style.top = '0';
+                cl.appendChild(tileImg(p[r][c])); w.appendChild(cl); el.appendChild(w);
+            });
+
+            if (!this.isAI) {
+                el.addEventListener('mousedown', e => this.onHandDown(e, idx));
+                el.addEventListener('touchstart', e => this.onHandDown(e, idx), { passive: false });
+            }
+            this.handEl.appendChild(el);
+        });
+        this.checkValidMoves();
+    }
+
+    rotateCW(idx) {
+        const p = this.hand[idx];
+        this.hand[idx] = [[p[1][0], p[0][0]], [p[1][1], p[0][1]]];
+    }
+
+    async animateRotation(idx) {
+        if (!this.isDemo) playSfx(sfxRotate, 0.4);
+        this.rotateCW(idx);
+        this.updateHandUI();
+    }
+
+    canPlace(piece, sr, sc) {
+        if (!piece) return false;
+        for (let r = 0; r < 2; r++) for (let c = 0; c < 2; c++) {
+            const br = sr + r, bc = sc + c;
+            if (br < 0 || br >= ROWS || bc < 0 || bc >= COLS || this.board[br][bc] >= 0) return false;
+        }
+        return true;
+    }
+
+    checkValidMoves() {
+        if (this.isGameOver) return;
+        let any = false;
+        const els = this.handEl.querySelectorAll('.hand-piece');
+
+        // ターン制での自分以外のターンの場合はすべて無効化
+        const isMyTurn = (gameMode !== 'vs-turn') || (this.isAI ? currentTurn === 2 : currentTurn === 1);
+
+        this.hand.forEach((p, i) => {
+            if (!p) return;
+            let ok = false;
+            if (isMyTurn) {
+                for (let r = 0; r < 7; r++) for (let c = 0; c < 7; c++) if (this.canPlace(p, r, c)) ok = true;
+            }
+            if (ok) any = true;
+            if (els[i]) els[i].classList.toggle('disabled', !ok);
+        });
+
+        // 置ける手がない（本当に盤面が埋まっているか手札がない）場合のゲームオーバー判定
+        let trueAny = false;
+        this.hand.forEach(p => {
+            if (!p) return;
+            for (let r = 0; r < 7; r++) for (let c = 0; c < 7; c++) if (this.canPlace(p, r, c)) trueAny = true;
+        });
+
+        if (!trueAny && this.hand.some(p => p !== null) && !this.isProcessing) {
+            this.triggerGameOver();
+        }
+    }
+
+    onHandDown(e, idx) {
+        if (this.isProcessing || this.isGameOver || this.isDemo) return;
+        if (gameMode === 'vs-turn' && currentTurn !== 1) return; // 自分のターン以外操作不可
+
+        const t = e.touches ? e.touches[0] : e;
+        let startX = t.clientX, startY = t.clientY, moved = false;
+
+        const onMove = ev => {
+            const tt = ev.touches ? ev.touches[0] : ev;
+            if (!moved && Math.hypot(tt.clientX - startX, tt.clientY - startY) > 8) {
+                moved = true;
+                this.boardRect = this.boardEl.getBoundingClientRect();
+                this.cellSize = this.boardRect.width / COLS;
+                this.beginDrag(idx, tt.clientX, tt.clientY);
+            }
+            if (moved) this.moveDrag(tt.clientX, tt.clientY);
+        };
+
+        const onUp = ev => {
+            document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp);
+            document.removeEventListener('touchmove', onMove); document.removeEventListener('touchend', onUp);
+            if (!moved) { this.animateRotation(idx); }
+            else { const tt = ev.changedTouches ? ev.changedTouches[0] : ev; this.finishDrag(tt.clientX, tt.clientY); }
+        };
+
+        document.addEventListener('mousemove', onMove); document.addEventListener('mouseup', onUp);
+        document.addEventListener('touchmove', onMove, { passive: false }); document.addEventListener('touchend', onUp);
+    }
+
+    beginDrag(idx, x, y) {
+        this.dragging = { idx, piece: this.hand[idx] };
+        this.dragEl = document.createElement('div'); this.dragEl.className = 'dragging-piece';
+        for (let r = 0; r < 2; r++) for (let c = 0; c < 2; c++) {
+            const cl = document.createElement('div'); cl.className = 'drag-cell'; cl.appendChild(tileImg(this.hand[idx][r][c])); this.dragEl.appendChild(cl);
+        }
+        document.body.appendChild(this.dragEl);
+        this.handEl.children[idx].style.opacity = '0.3';
+        this.moveDrag(x, y);
+    }
+
+    moveDrag(x, y) {
+        if (!this.dragEl) return;
+        this.dragEl.style.left = (x - 45) + 'px'; this.dragEl.style.top = (y - 45) + 'px';
+        const relX = x - this.boardRect.left, relY = y - this.boardRect.top;
+        const c = Math.round(relX / this.cellSize - 1), r = Math.round(relY / this.cellSize - 1);
+
+        this.ghostCells.forEach(el => { el.classList.remove('highlight'); const g = el.querySelector('.ghost'); if (g) g.remove(); });
+        this.ghostCells = [];
+        if (this.canPlace(this.dragging.piece, r, c)) {
+            for (let ir = 0; ir < 2; ir++) for (let ic = 0; ic < 2; ic++) {
+                const el = this.getCellEl(r + ir, c + ic); el.classList.add('highlight');
+                const g = document.createElement('div'); g.className = 'ghost'; g.appendChild(tileImg(this.dragging.piece[ir][ic]));
+                el.appendChild(g); this.ghostCells.push(el);
+            }
+        }
+    }
+
+    finishDrag(x, y) {
+        const relX = x - this.boardRect.left, relY = y - this.boardRect.top;
+        const c = Math.round(relX / this.cellSize - 1), r = Math.round(relY / this.cellSize - 1);
+        if (this.canPlace(this.dragging.piece, r, c)) {
+            this.placePiece(this.dragging.idx, r, c);
+        } else {
+            this.handEl.children[this.dragging.idx].style.opacity = '1';
+        }
+        this.ghostCells.forEach(el => { el.classList.remove('highlight'); const g = el.querySelector('.ghost'); if (g) g.remove(); });
+        this.ghostCells = [];
+        if (this.dragEl) { this.dragEl.remove(); this.dragEl = null; }
+        this.dragging = null;
+    }
+
+    placePiece(idx, r, c) {
+        if (!this.isDemo) playSfx(sfxPut, 0.6);
+        const p = this.hand[idx];
+        for (let ir = 0; ir < 2; ir++) for (let ic = 0; ic < 2; ic++) this.board[r + ir][c + ic] = p[ir][ic];
+        this.hand[idx] = this.genPiece();
+        this.combo = 0; this.isProcessing = true;
+        this.renderBoard(); this.updateHandUI();
+        setTimeout(() => this.processMatches(), 150);
+    }
+
+    processMatches() {
+        const vis = Array.from({ length: ROWS }, () => Array(COLS).fill(false));
+        const toRemove = new Set();
+
+        for (let r = 0; r < ROWS; r++) for (let c = 0; c < COLS; c++) {
+            if (this.board[r][c] >= 0 && this.board[r][c] <= 3 && !vis[r][c]) {
+                const color = this.board[r][c], grp = [], q = [[r, c]]; vis[r][c] = true;
+                while (q.length > 0) {
+                    const [cr, cc] = q.shift(); grp.push([cr, cc]);
+                    [[-1, 0], [1, 0], [0, -1], [0, 1]].forEach(([dr, dc]) => {
+                        const nr = cr + dr, nc = cc + dc;
+                        if (nr >= 0 && nr < ROWS && nc >= 0 && nc < COLS && !vis[nr][nc] && this.board[nr][nc] === color) {
+                            vis[nr][nc] = true; q.push([nr, nc]);
+                        }
+                    });
+                }
+                if (grp.length >= MIN_MATCH) grp.forEach(([gr, gc]) => toRemove.add(`${gr},${gc}`));
+            }
+        }
+
+        if (toRemove.size > 0) {
+            if (!this.isDemo) playSfx(sfxMatch, 0.7);
+            this.combo++;
+            const garbageSet = new Set();
+            toRemove.forEach(k => {
+                const [r, c] = k.split(',').map(Number);
+                [[-1, 0], [1, 0], [0, -1], [0, 1]].forEach(([dr, dc]) => {
+                    const nr = r + dr, nc = c + dc;
+                    if (nr >= 0 && nr < ROWS && nc >= 0 && nc < COLS && this.board[nr][nc] === 4) garbageSet.add(`${nr},${nc}`);
+                });
+            });
+            garbageSet.forEach(k => toRemove.add(k));
+
+            const count = toRemove.size;
+            this.score += count * 10 * this.combo;
+            if (this.scoreEl) this.scoreEl.textContent = this.score;
+            this.showPop(`${count} BLOCKS!` + (this.combo > 1 ? `<br>${this.combo} COMBO!` : ''));
+
+            if (this.opponent && (this.combo >= 2 || count >= 4)) {
+                const atk = Math.max(1, count - 3) + (this.combo - 1) * 2;
+                this.sendGarbage(atk);
+            }
+
+            toRemove.forEach(k => {
+                const [r, c] = k.split(',').map(Number);
+                const el = this.getCellEl(r, c).querySelector('.block');
+                if (el) el.classList.add('clearing');
+            });
+
+            setTimeout(() => {
+                toRemove.forEach(k => { const [r, c] = k.split(',').map(Number); this.board[r][c] = -1; });
+                this.renderBoard();
+                setTimeout(() => this.processMatches(), 200);
+            }, 400);
+
+        } else {
+            this.isProcessing = false;
+            this.checkValidMoves();
+
+            // 処理終了後のアクション
+            if (gameMode === 'vs-turn' && !this.isGameOver) {
+                // ターン切り替え
+                switchTurn();
+            } else if (this.isAI && !this.isGameOver && gameMode !== 'vs-turn') {
+                // リアルタイムAIの連続操作
+                setTimeout(() => requestAI(this), 300);
+            }
+        }
+    }
+
+    showPop(txt) {
+        if (!this.msgEl) return;
+        this.msgEl.innerHTML = txt;
+        this.msgEl.style.transition = 'none'; this.msgEl.style.opacity = '1'; this.msgEl.style.transform = 'translate(-50%,-50%) scale(0.5)';
+        requestAnimationFrame(() => {
+            this.msgEl.style.transition = 'transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275), opacity 0.5s';
+            this.msgEl.style.transform = 'translate(-50%,-50%) scale(1)';
+            setTimeout(() => this.msgEl.style.opacity = '0', 800);
+        });
+    }
+
+    sendGarbage(amount) {
+        if (this.pendingGarbage > 0) {
+            if (this.pendingGarbage >= amount) { this.pendingGarbage -= amount; amount = 0; }
+            else { amount -= this.pendingGarbage; this.pendingGarbage = 0; }
+            this.garbageTimer = this.garbageTimerMax;
+            this.updateGarbageUI();
+        }
+
+        if (amount > 0 && this.opponent) {
+            if (gameMode === 'vs-turn') {
+                // ターン制の場合は即時落下させるために相手側に保留させずそのまま落とす
+                this.opponent.receiveGarbageInstant(amount);
+            } else {
+                this.opponent.receiveGarbage(amount);
+            }
+        }
+    }
+
+    receiveGarbage(amount) {
+        this.pendingGarbage += amount;
+        this.garbageTimer = this.garbageTimerMax;
+        this.updateGarbageUI();
+    }
+
+    receiveGarbageInstant(amount) {
+        this.pendingGarbage += amount;
+        this.dropGarbage();
+    }
+
+    updateGarbageUI() {
+        if (!this.garbageUi) return;
+        if (gameMode === 'vs-turn') { this.garbageUi.style.display = 'none'; return; } // ターン制はUI不要
+
+        if (this.pendingGarbage > 0) {
+            this.garbageUi.style.display = 'block';
+            this.garbageText.textContent = `+${this.pendingGarbage}`;
+            this.garbageBar.style.transform = `scaleX(${Math.max(0, this.garbageTimer / this.garbageTimerMax)})`;
+        } else {
+            this.garbageUi.style.display = 'none';
+        }
+    }
+
+    tick(dt) {
+        if (this.isGameOver || this.isProcessing || gameMode === 'vs-turn') return;
+        if (this.pendingGarbage > 0) {
+            this.garbageTimer -= dt;
+            this.updateGarbageUI();
+            if (this.garbageTimer <= 0) {
+                this.dropGarbage();
+            }
+        }
+    }
+
+    dropGarbage() {
+        if (!this.isDemo) playSfx(sfxDamage, 0.8);
+        let empty = [];
+        for (let r = 0; r < ROWS; r++) for (let c = 0; c < COLS; c++) if (this.board[r][c] === -1) empty.push({ r, c });
+        for (let i = empty.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [empty[i], empty[j]] = [empty[j], empty[i]];
+        }
+        const drop = Math.min(this.pendingGarbage, empty.length);
+        for (let i = 0; i < drop; i++) this.board[empty[i].r][empty[i].c] = 4;
+
+        this.pendingGarbage -= drop;
+        if (this.pendingGarbage < 0) this.pendingGarbage = 0;
+        this.updateGarbageUI();
+        this.renderBoard();
+        this.checkValidMoves();
+    }
+
+    triggerGameOver() {
+        this.isGameOver = true;
+        if (this.isDemo) {
+            setTimeout(() => {
+                if (!isPlayingGame && isDemoActive) {
+                    this.init();
+                    requestAI(this);
+                }
+            }, 2000);
+            return;
+        }
+        checkGlobalGameOver();
+    }
+}
+
+// ==== グローバル制御 ====
+let lastTime = 0;
+let demoGame = null;
+
+window.onload = () => {
+    demoGame = new QuadGame(document.getElementById('demo-area'), true, true);
+    demoGame.init();
+    requestAI(demoGame); // デモ用AI起動
+};
+
+document.getElementById('btn-1p').onclick = () => startGame('1p');
+document.getElementById('btn-vs-real').onclick = () => startGame('vs-real');
+document.getElementById('btn-vs-turn').onclick = () => startGame('vs-turn');
+
+function startGame(mode) {
+    isDemoActive = false;
+    isPlayingGame = true;
+    gameMode = mode;
+    currentTurn = 1;
+
+    ensureAudioCreated();
+    bgmControl('game');
+
+    document.getElementById('title-screen').classList.add('hidden');
+    document.getElementById('main-wrapper').classList.add('show');
+
+    p1 = new QuadGame(document.getElementById('p1-area'), false);
+    p1.init();
+
+    const indicator = document.getElementById('turn-indicator');
+
+    if (mode === 'vs-real' || mode === 'vs-turn') {
+        document.getElementById('p2-area').style.display = 'flex';
+        p2 = new QuadGame(document.getElementById('p2-area'), true);
+        p2.init();
+        p1.opponent = p2; p2.opponent = p1;
+
+        if (mode === 'vs-turn') {
+            indicator.style.display = 'block';
+            updateTurnUI();
+        } else {
+            indicator.style.display = 'none';
+            setTimeout(() => requestAI(p2), 1000);
+        }
+    } else {
+        document.getElementById('p2-area').style.display = 'none';
+        indicator.style.display = 'none';
+    }
+
+    lastTime = performance.now();
+    requestAnimationFrame(gameLoop);
+}
+
+function gameLoop(time) {
+    const dt = time - lastTime; lastTime = time;
+    if (p1 && !p1.isGameOver) p1.tick(dt);
+    if (p2 && !p2.isGameOver) p2.tick(dt);
+    requestAnimationFrame(gameLoop);
+}
+
+function switchTurn() {
+    if (p1.isGameOver || p2.isGameOver) return;
+    currentTurn = currentTurn === 1 ? 2 : 1;
+    updateTurnUI();
+
+    // それぞれの手札の活性/非活性を更新
+    p1.checkValidMoves();
+    p2.checkValidMoves();
+
+    if (currentTurn === 2) {
+        setTimeout(() => requestAI(p2), 800); // ターン交代のゆとり
+    }
+}
+
+function updateTurnUI() {
+    const ind = document.getElementById('turn-indicator');
+    const p1a = document.getElementById('p1-area');
+    const p2a = document.getElementById('p2-area');
+
+    if (currentTurn === 1) {
+        ind.textContent = "PLAYER'S TURN";
+        ind.style.color = "#4d96ff";
+        p1a.classList.remove('waiting');
+        p2a.classList.add('waiting');
+    } else {
+        ind.textContent = "AI'S TURN";
+        ind.style.color = "#ff6b6b";
+        p1a.classList.add('waiting');
+        p2a.classList.remove('waiting');
+    }
+}
+
+function checkGlobalGameOver() {
+    if (gameMode !== '1p') {
+        if (p1.isGameOver || p2.isGameOver) {
+            bgmControl('stop');
+            if (p1.isGameOver) {
+                document.getElementById('result-title').textContent = "YOU LOSE...";
+                document.getElementById('result-title').style.color = "#ff6b6b";
+                playSfx(sfxGameover, 0.8);
+            } else {
+                document.getElementById('result-title').textContent = "YOU WIN!!";
+                document.getElementById('result-title').style.color = "#6bcb77";
+                playSfx(sfxWin, 0.8);
+            }
+            document.getElementById('game-over-overlay').classList.add('show');
+        }
+    } else {
+        if (p1.isGameOver) {
+            bgmControl('stop');
+            playSfx(sfxGameover, 0.8);
+            document.getElementById('game-over-overlay').classList.add('show');
+        }
+    }
+}
+
+async function requestAI(gameObj) {
+    if (gameObj.isGameOver || gameObj.isProcessing || gameObj.aiFetching) return;
+    if (!gameObj.hand.some(p => p !== null)) return;
+    if (gameObj.isDemo && !isDemoActive) return;
+
+    // 難易度（温度）設定
+    // 0: デモ用(最強)、 25: ターン制(少し手加減)、 35: リアルタイム(隙を見せる)
+    let temp = 0.0;
+    if (!gameObj.isDemo) {
+        temp = gameMode === 'vs-turn' ? 20.0 : 35.0;
+    }
+
+    gameObj.aiFetching = true;
+    try {
+        const res = await fetch('/api/ai_move', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                board: gameObj.board,
+                hand: gameObj.hand,
+                temperature: temp
+            })
+        });
+        const move = await res.json();
+        gameObj.aiFetching = false;
+
+        if (gameObj.isDemo && !isDemoActive) return;
+
+        if (move && move.piece_idx !== undefined && !gameObj.isGameOver && !gameObj.isProcessing) {
+
+            // 人間らしい遅延の設定
+            // リアルタイム対戦の場合、思考にわざと時間をかける
+            let thinkTime = gameObj.isDemo ? 300 : (gameMode === 'vs-real' ? 1200 + Math.random() * 800 : 600);
+            await sleep(thinkTime);
+
+            if (gameObj.isGameOver || gameObj.isProcessing || (gameObj.isDemo && !isDemoActive)) return;
+
+            for (let i = 0; i < move.rotations; i++) {
+                gameObj.animateRotation(move.piece_idx);
+                await sleep(gameObj.isDemo ? 100 : 250); // 回転のディレイ
+            }
+
+            if (gameObj.canPlace(gameObj.hand[move.piece_idx], move.r, move.c)) {
+                gameObj.placePiece(move.piece_idx, move.r, move.c);
+            }
+        }
+    } catch (e) {
+        gameObj.aiFetching = false;
+        setTimeout(() => { if (!gameObj.isGameOver && !gameObj.isProcessing && (!gameObj.isDemo || isDemoActive)) requestAI(gameObj); }, 2000);
+    }
+}

static/style.css

@@ -0,0 +1,134 @@
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body {
+  background: #0a0a1a; font-family: 'Segoe UI', sans-serif;
+  display: flex; justify-content: center; align-items: center;
+  min-height: 100vh; overflow: hidden; user-select: none; color: #fff;
+}
+
+#title-screen {
+  position: fixed; inset: 0; background: #0a0a1a;
+  display: flex; justify-content: center; align-items: center;
+  z-index: 500; transition: opacity 0.6s; overflow: hidden;
+}
+#title-screen.hidden { opacity: 0; pointer-events: none; }
+
+#demo-container {
+  position: absolute; transform: scale(1.3); opacity: 0.4;
+  pointer-events: none; z-index: 1; filter: blur(0.5px);
+}
+#title-overlay {
+  position: absolute; inset: 0; background: rgba(10, 10, 26, 0.1); z-index: 2;
+}
+#title-content {
+  position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center;
+}
+
+#title-logo {
+  font-size: 80px; font-weight: 900;
+  background: linear-gradient(135deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff);
+  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+  letter-spacing: 12px; margin-bottom: 16px; animation: titlePulse 3s ease-in-out infinite;
+}
+@keyframes titlePulse { 50% { transform: scale(1.04); filter: brightness(1.2); } }
+
+.btn {
+  padding: 16px 40px; margin: 10px; font-size: 18px; width: 260px;
+  background: linear-gradient(135deg, #4d96ff, #6bcb77);
+  color: #fff; border: none; border-radius: 30px; cursor: pointer;
+  font-weight: 700; letter-spacing: 2px; transition: transform 0.2s, box-shadow 0.2s;
+}
+.btn:hover { transform: scale(1.06); box-shadow: 0 0 30px rgba(77, 150, 255, 0.5); }
+.btn.vs { background: linear-gradient(135deg, #ff6b6b, #ffd93d); }
+.btn.vs:hover { box-shadow: 0 0 30px rgba(255, 107, 107, 0.5); }
+.btn.vs-turn { background: linear-gradient(135deg, #9b59b6, #e74c3c); }
+.btn.vs-turn:hover { box-shadow: 0 0 30px rgba(155, 89, 182, 0.5); }
+
+#sound-toggle {
+  position: fixed; top: 16px; right: 16px; width: 44px; height: 44px;
+  border-radius: 50%; background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; font-size: 20px;
+  cursor: pointer; display: flex; align-items: center; justify-content: center;
+  z-index: 600; transition: background 0.2s;
+}
+#sound-toggle:hover { background: rgba(255, 255, 255, 0.2); }
+
+#main-wrapper {
+  display: flex; flex-direction: column; align-items: center;
+  opacity: 0; transition: opacity 0.5s; position: relative; z-index: 100; gap: 20px;
+}
+#main-wrapper.show { opacity: 1; }
+
+#turn-indicator {
+  font-size: 28px; font-weight: bold; letter-spacing: 4px;
+  background: rgba(255,255,255,0.1); padding: 8px 30px; border-radius: 30px;
+  display: none; transition: 0.3s;
+}
+
+#game-boards-container { display: flex; gap: 40px; flex-wrap: wrap; justify-content: center; }
+.game-area { display: flex; flex-direction: column; align-items: center; gap: 15px; position: relative; transition: opacity 0.3s; }
+.game-area.waiting { opacity: 0.5; pointer-events: none; }
+
+.player-label { font-size: 24px; font-weight: bold; color: #aaa; letter-spacing: 2px; }
+
+.board-wrapper {
+  position: relative; padding: 8px; border-radius: 16px;
+  background: linear-gradient(135deg, #1a1a2e, #16213e);
+  box-shadow: 0 0 40px rgba(77, 150, 255, 0.1), inset 0 0 20px rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(77, 150, 255, 0.15);
+}
+.board { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); gap: 2px; width: 360px; height: 360px; }
+
+.cell {
+  width: 100%; height: 100%; border-radius: 6px; position: relative;
+  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.04);
+}
+.cell.highlight { background: rgba(255, 255, 255, 0.08); }
+.block, .ghost { position: absolute; inset: 0; border-radius: 6px; overflow: hidden; }
+.block img, .ghost img { width: 100%; height: 100%; display: block; }
+.ghost { opacity: 0.35; pointer-events: none; }
+.clearing { animation: clearAnim 0.4s ease-out forwards; }
+@keyframes clearAnim { 50% { transform: scale(1.3); opacity: 0.8; } 100% { transform: scale(0); opacity: 0; } }
+
+.hand-area {
+  display: flex; gap: 16px; padding: 12px; min-height: 110px;
+  background: linear-gradient(135deg, #1a1a2e, #16213e); border-radius: 16px;
+}
+.hand-piece {
+  display: grid; grid-template-columns: repeat(2, 40px); grid-template-rows: repeat(2, 40px); gap: 3px;
+  padding: 6px; border-radius: 12px; cursor: grab; transition: transform 0.2s; position: relative;
+}
+.hand-piece.interactive:hover { transform: scale(1.08); background: rgba(255,255,255,0.05); }
+.hand-piece.disabled { opacity: 0.25; cursor: not-allowed; pointer-events: none; filter: grayscale(1); }
+.hand-cell-wrapper { position: relative; width: 40px; height: 40px; }
+.hand-cell { position: absolute; width: 100%; height: 100%; border-radius: 6px; overflow: hidden; transition: 0.1s ease-in-out; }
+.hand-cell img { width: 100%; height: 100%; display: block; }
+
+.dragging-piece {
+  position: fixed; display: grid; grid-template-columns: repeat(2, 44px); grid-template-rows: repeat(2, 44px); gap: 3px;
+  pointer-events: none; z-index: 1000; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
+}
+.dragging-piece .drag-cell { border-radius: 6px; overflow: hidden; width: 100%; height: 100%; }
+.dragging-piece img { width: 100%; height: 100%; }
+
+.garbage-ui {
+  position: absolute; top: -30px; left: 0; right: 0;
+  height: 20px; background: rgba(255,0,0,0.2); border-radius: 10px; overflow: hidden; display: none;
+}
+.garbage-bar { height: 100%; background: #ff6b6b; width: 100%; transform-origin: left; transition: transform 0.1s linear; }
+.garbage-text {
+  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
+  font-size: 14px; font-weight: bold; color: #fff; line-height: 20px;
+}
+
+.message-pop {
+  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
+  font-size: 32px; font-weight: 900; color: #ffd93d; text-shadow: 0 0 20px rgba(255, 217, 61, 0.8);
+  opacity: 0; pointer-events: none; z-index: 100; text-align: center; white-space: nowrap;
+}
+
+#game-over-overlay {
+  position: fixed; inset: 0; background: rgba(0,0,0,0.85);
+  display: flex; flex-direction: column; justify-content: center; align-items: center;
+  z-index: 200; opacity: 0; pointer-events: none; transition: 0.5s;
+}
+#game-over-overlay.show { opacity: 1; pointer-events: all; }

static/title.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2888ea31b158ed7860def368a15524b02e0c0f1903a894b2ace75bda9822e50a
+size 5182442

static/win.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b9fc0032a7a664b325a6c905b307357a298038fc528aa9eaaefb1b0a9e745862
+size 30986

train.py

@@ -0,0 +1,191 @@
+import torch
+import torch.nn as nn
+import torch.optim as optim
+import random
+import numpy as np
+from collections import deque
+import copy
+
+class QuadEnv:
+    def __init__(self):
+        self.reset()
+        
+    def reset(self):
+        self.board = np.full((8, 8), -1, dtype=int)
+        self.hand = [self.generate_piece() for _ in range(3)]
+        return self.get_state()
+        
+    def generate_piece(self):
+        while True:
+            p = np.random.randint(0, 4, (2, 2)).tolist()
+            counts = [0] * 4
+            for r in range(2):
+                for c in range(2):
+                    counts[p[r][c]] += 1
+            if max(counts) < 3:
+                return p
+
+    def get_state(self):
+        return torch.FloatTensor(self.board.flatten()).unsqueeze(0)
+
+    def can_place(self, piece, r, c):
+        for ir in range(2):
+            for ic in range(2):
+                if r+ir >= 8 or c+ic >= 8 or self.board[r+ir][c+ic] != -1:
+                    return False
+        return True
+
+    def step(self, action_idx):
+        p_idx = action_idx // 196
+        rem = action_idx % 196
+        rot = rem // 49
+        rem2 = rem % 49
+        r = rem2 // 7
+        c = rem2 % 7
+        
+        piece = self.hand[p_idx]
+        if piece is None or not self.can_place(piece, r, c):
+            return self.get_state(), -50.0, True # 置けない場合は即終了ペナルティ
+            
+        for _ in range(rot):
+            piece = [[piece[1][0], piece[0][0]], [piece[1][1], piece[0][1]]]
+            
+        for ir in range(2):
+            for ic in range(2):
+                self.board[r+ir][c+ic] = piece[ir][ic]
+                
+        self.hand[p_idx] = self.generate_piece()
+        score, done = self.process_matches()
+        
+        # 通常の配置完了で微小な報酬、スコアで大きな報酬
+        reward = 1.0 + (score / 10.0)
+        return self.get_state(), float(reward), done
+
+    def process_matches(self):
+        score = 0
+        combo = 0
+        while True:
+            visited = [[False]*8 for _ in range(8)]
+            to_remove = set()
+            for r in range(8):
+                for c in range(8):
+                    color = self.board[r][c]
+                    if 0 <= color <= 3 and not visited[r][c]:
+                        q = [(r, c)]
+                        visited[r][c] = True
+                        group = [(r, c)]
+                        while q:
+                            cr, cc = q.pop(0)
+                            for dr, dc in [(-1,0), (1,0), (0,-1), (0,1)]:
+                                nr, nc = cr + dr, cc + dc
+                                if 0 <= nr < 8 and 0 <= nc < 8 and not visited[nr][nc] and self.board[nr][nc] == color:
+                                    visited[nr][nc] = True
+                                    q.append((nr, nc))
+                                    group.append((nr, nc))
+                        if len(group) >= 3:
+                            for gr, gc in group:
+                                to_remove.add((gr, gc))
+            if not to_remove:
+                break
+            combo += 1
+            score += len(to_remove) * 10 * combo
+            for rr, cc in to_remove:
+                self.board[rr][cc] = -1
+                
+        # 置ける場所があるかチェック
+        any_valid = False
+        for p in self.hand:
+            if p is not None:
+                for rr in range(7):
+                    for cc in range(7):
+                        if self.can_place(p, rr, cc):
+                            any_valid = True
+                            break
+                    if any_valid: break
+            if any_valid: break
+            
+        return score, not any_valid
+
+class DQN(nn.Module):
+    def __init__(self, input_size, output_size):
+        super(DQN, self).__init__()
+        self.fc = nn.Sequential(
+            nn.Linear(input_size, 256), nn.ReLU(),
+            nn.Linear(256, 256), nn.ReLU(),
+            nn.Linear(256, output_size)
+        )
+    def forward(self, x):
+        return self.fc(x)
+
+def train():
+    env = QuadEnv()
+    policy_net = DQN(64, 588)
+    target_net = copy.deepcopy(policy_net)
+    target_net.eval()
+    
+    optimizer = optim.Adam(policy_net.parameters(), lr=0.0005)
+    memory = deque(maxlen=20000)
+    
+    batch_size = 64
+    gamma = 0.95
+    epsilon = 1.0
+    epsilon_min = 0.05
+    epsilon_decay = 0.995
+    
+    epochs = 2000
+    for epoch in range(epochs):
+        state = env.reset()
+        done = False
+        total_reward = 0
+        step_count = 0
+        
+        while not done:
+            if random.random() < epsilon:
+                action_idx = random.randint(0, 587)
+            else:
+                with torch.no_grad():
+                    action_idx = policy_net(state).argmax().item()
+                    
+            next_state, reward, done = env.step(action_idx)
+            memory.append((state, action_idx, reward, next_state, done))
+            state = next_state
+            total_reward += reward
+            step_count += 1
+            
+            # 経験再生
+            if len(memory) > batch_size:
+                batch = random.sample(memory, batch_size)
+                states, actions, rewards, next_states, dones = zip(*batch)
+                
+                states = torch.cat(states)
+                actions = torch.tensor(actions).unsqueeze(1)
+                rewards = torch.tensor(rewards, dtype=torch.float32)
+                next_states = torch.cat(next_states)
+                dones = torch.tensor(dones, dtype=torch.float32)
+                
+                q_values = policy_net(states).gather(1, actions).squeeze(1)
+                with torch.no_grad():
+                    next_q_values = target_net(next_states).max(1)[0]
+                    target_q_values = rewards + gamma * next_q_values * (1 - dones)
+                
+                loss = nn.MSELoss()(q_values, target_q_values)
+                optimizer.zero_grad()
+                loss.backward()
+                optimizer.step()
+                
+            if done: break
+            
+        epsilon = max(epsilon_min, epsilon * epsilon_decay)
+        
+        # 定期的にターゲットネットワークを更新
+        if epoch % 10 == 0:
+            target_net.load_state_dict(policy_net.state_dict())
+            
+        if epoch % 10 == 0:
+            print(f"Epoch {epoch} | Total Reward: {total_reward:.1f} | Steps: {step_count} | Epsilon: {epsilon:.3f}")
+            
+    torch.save(policy_net.state_dict(), "model.pth")
+    print("Training Complete. Model saved as model.pth")
+
+if __name__ == "__main__":
+    train()