horiyouta/Machine-Learning-RPG
0
1<!DOCTYPE html>2<html lang="ja">3 4<head>5 <meta charset="UTF-8">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <title>Machine Learning RPG</title>8 <script src="https://cdn.tailwindcss.com"></script>9 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">10 <link rel="preconnect" href="https://fonts.googleapis.com">11 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>12 <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">13 <link rel="stylesheet" href="style.css">14</head>15 16<body class="text-white">17 <div class="background-grid"></div>18 <div class="background-glow"></div>19 20 <!-- ★★★ タイトル画面を追加 ★★★ -->21 <div id="title-screen" class="fixed inset-0 z-50 flex flex-col justify-center items-center">22 <div class="title-logo">23 <h1 class="text-7xl font-bold tracking-widest">MACHINE LEARNING</h1><br>24 <h2 class="text-8xl font-bold tracking-wider text-glow-yellow">RPG</h2>25 </div>26 <button id="start-game-btn" class="btn btn-primary mt-12 text-2xl px-12 py-4">ゲームを始める</button>27 <p class="mt-8 text-cyan-300/60 font-mono">ニューラルネットワークを構築・訓練し、MNISTモンスターを倒せ！</p>28 </div>29 30 <!-- ★★★ ゲームコンテナを追加 ★★★ -->31 <div id="game-container" class="container mx-auto p-4 h-screen flex-col hidden">32 <header class="text-center mb-4 flex-shrink-0">33 <h1 class="text-5xl font-bold tracking-widest text-glow">Machine Learning RPG</h1>34 <p class="text-cyan-300/80 font-mono tracking-wider">ニューラルネットワークを構築・訓練し、MNISTモンスターを倒せ！</p>35 </header>36 37 <div class="flex-grow flex gap-4 min-h-0">38 <!-- 左: モデル構築エリア -->39 <aside class="w-1/4 glass-pane flex flex-col">40 <h2 class="section-title"><i class="fas fa-microchip mr-3"></i>あなたのモデル</h2>41 <div id="player-model-layers" class="flex-grow bg-black/20 rounded-lg p-2 space-y-2 overflow-y-auto min-h-0 relative">42 <canvas id="layer-connections" class="absolute top-0 left-0 w-full h-full pointer-events-none"></canvas>43 <p class="text-gray-400 text-center p-4">インベントリからレイヤー（層）をここにドラッグ＆ドロップしてください。</p>44 </div>45 <div class="mt-4 text-center p-4">46 <button id="battle-btn" class="btn btn-primary w-full" disabled>47 <i class="fas fa-fist-raised"></i> バトル開始！48 </button>49 <button id="restart-btn" class="btn btn-secondary w-full mt-2 hidden">50 <i class="fas fa-redo"></i> タイトルへ戻る51 </button>52 </div>53 </aside>54 55 <!-- 中央: バトルエリア -->56 <main class="w-1/2 glass-pane p-4 flex flex-col items-center justify-between relative">57 <div class="w-full">58 <h2 class="character-name text-red-400">ENEMY: MNIST_MONSTER</h2>59 <div class="hp-bar-container">60 <div id="enemy-hp-bar" class="hp-bar" style="width: 100%">100%</div>61 </div>62 </div>63 <div id="enemy-area" class="text-center relative">64 <div class="enemy-scanline"></div>65 <div class="enemy-glitch-overlay"></div>66 <p id="enemy-message" class="text-lg text-cyan-200">挑戦者を待っている...</p>67 <img id="enemy-image" src="" alt="MNIST Monster" class="hidden w-48 h-48 rounded-lg mt-4 enemy-image-style">68 </div>69 <div class="w-full">70 <h2 class="character-name text-green-400">PLAYER: AI_AGENT</h2>71 <div class="hp-bar-container">72 <div id="player-hp-bar" class="hp-bar" style="width: 100%">100%</div>73 </div>74 </div>75 <div id="battle-log" class="absolute bottom-24 left-1/2 -translate-x-1/2 text-2xl font-bold text-center w-full text-glow-yellow"></div>76 </main>77 78 <!-- 右: アイテム（層）エリア -->79 <aside class="w-1/4 glass-pane flex flex-col">80 <h2 class="section-title"><i class="fas fa-cubes mr-3"></i>インベントリ</h2>81 <div id="layer-inventory" class="p-2 min-h-0 flex-grow overflow-y-auto"></div> 82 <div id="item-info-area" class="mt-4 h-64 glass-pane-inner flex-shrink-0 flex flex-col">83 <div id="layer-description" class="text-sm text-gray-300 h-16 overflow-y-auto mb-2 p-2">84 <p>アイテムをクリックまたはホバーすると、ここに説明が表示されます。</p>85 </div>86 <div id="preview-animation-area" class="flex-grow bg-black/30 rounded-lg relative overflow-hidden">87 <div class="idle-particles"></div>88 </div>89 </div>90 </aside>91 </div>92 93 <!-- 下: メッセージログエリア -->94 <footer id="message-log-area" class="flex-shrink-0 h-24 glass-pane mt-4 p-3 overflow-y-auto font-mono text-sm"></footer>95 </div>96 97 <!-- モーダル (変更なし) -->98 <div id="item-selection-modal" class="fixed inset-0 bg-black bg-opacity-80 backdrop-blur-sm flex-col justify-center items-center z-50 hidden">99 <h2 class="text-4xl font-bold mb-8 text-glow-yellow tracking-widest">報酬を選択せよ</h2>100 <div id="item-choices" class="flex gap-8"></div>101 <div id="choice-info-area" class="mt-8 w-3/4 h-64 glass-pane flex gap-4 p-4">102 <div id="choice-description" class="w-1/2 text-lg text-gray-300">103 <p>アイテムにカーソルを合わせるかタップすると、ここに説明が表示されます。</p>104 </div>105 <div id="choice-preview-area" class="w-1/2 bg-black/30 rounded-lg relative overflow-hidden">106 <div class="idle-particles"></div>107 </div>108 </div>109 <!-- ★★★ ここから追加 ★★★ -->110 <div id="choice-selection-footer" class="mt-4 text-center opacity-0 transition-opacity duration-300">111 <button id="confirm-choice-btn" class="btn btn-primary text-xl px-10 py-3" disabled>112 <i class="fas fa-check-circle mr-2"></i> このアイテムにする113 </button>114 <!-- 選択されたアイテムのIDを保持するための非表示要素 -->115 <input type="hidden" id="selected-choice-id">116 </div>117 </div>118 <div id="animation-modal" class="fixed inset-0 bg-gray-900 bg-opacity-90 backdrop-blur-sm flex justify-center items-center z-50 hidden">119 <div id="visualization-area" class="w-[95%] h-[90%] glass-pane relative p-4 overflow-hidden">120 <div id="labels-container" class="absolute inset-x-0 top-0 h-24 pointer-events-none flex items-center"></div>121 <div id="prediction-result" class="absolute text-2xl font-bold right-8 top-8 opacity-0 transition-opacity duration-500"></div>122 <button id="close-modal-btn" class="absolute top-4 left-4 text-3xl text-gray-400 hover:text-white transition-colors">×</button>123 </div>124 </div>125 126 <!-- eel.jsの読み込みを削除 -->127 <script type="text/javascript" src="script.js"></script>128</body>129 130</html>