TensorFlow.jsを使ってDDQNスネークゲームを構築する

TensorFlow.jsの専門家として、最新のTensorFlow.js APIを使用したDeep Q-Network（DDQN）ベースのSnakeゲームを、単一のHTMLファイル内に構築します。 ```html DDQN Snake Game - TensorFlow.js body { font-family: 'Arial', sans-serif; display: flex; flex-direction: column; align-items: center; background: #1a1a2e; color: #e0e0e0; margin: 0; padding: 20px; } h1 { color: #00d4ff; text-shadow: 0 0 10px rgba(0, 212, 255, 0.5); } #game-container { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; } canvas { border: 2px solid #00d4ff; border-radius: 8px; background: #16213e; box-shadow: 0 0 20px rgba(0, 212, 255, 0.3); } #controls { background: #16213e; padding: 20px; border-radius: 8px; border: 1px solid #00d4ff; min-width: 250px; } button { background: #00d4ff; color: #1a1a2e; border: none; padding: 10px 20px; margin: 5px; border-radius: 5px; cursor: pointer; font-weight: bold; transition: all 0.3s; } button:hover { background: #00b4cc; transform: scale(1.05); } button:disabled { background: #555; cursor: not-allowed; } #stats { margin-top: 15px; padding: 10px; background: #0f3460; border-radius: 5px; } .stat-item { margin: 5px 0; } .stat-label { color: #00d4ff; font-weight: bold; } #status { margin-top: 10px; padding: 10px; border-radius: 5px; background: #0f3460; text-align: center; } .training { color: #ff6b6b; } .playing { color: #4ecdc4; } 🐍 DDQN Snake AI コントロール ▶ 学習開始 ⏸ 一時停止 🔄 リセット 🎮 手動操作 エピソード: 0 スコア: 0 最高スコア: 0 ε (探索率): 1.0 損失: 0 待機中... // ============================================ // 設定パラメータ // ============================================ const canvasWidth = 400; const canvasHeight = 400; const gridSize = 20; const cellSize = canvasWidth / gridSize; // DDQNハイパーパラメータ const BATCH_SIZE = 32; const GAMMA = 0.95; // 割引率 const INITIAL_EPSILON = 1.0; // 初期探索率 const FINAL_EPSILON = 0.01; // 最終探索率 const EPSILON_DECAY = 0.995; // 探索率減衰率 const LEARNING_RATE = 0.001; // 学習率 const TARGET_UPDATE_FREQ = 100; // ターゲットネットワーク更新頻度 const MEMORY_SIZE = 10000; // リプレイメモリサイズ // ============================================ // ゲーム状態管理 // ============================================ class SnakeGame { constructor() { this.reset(); } reset() { // スネークの初期位置（中央） this.snake = [ {x: 10, y: 10}, {x: 9, y: 10}, {x: 8, y: 10} ]; this.direction = {x: 1, y: 0}; // 右向き this.score = 0; this.gameOver = false; this.food = this.generateFood(); this.steps = 0; this.maxSteps = 100 + this.snake.length * 10; // ステップ制限 } generateFood() { // スネークと重ならない位置に食べ物を生成 let food; do { food = { x: Math.floor(Math.random() * gridSize), y: Math.floor(Math.random() * gridSize) }; } while (this.snake.some(s => s.x === food.x && s.y === food.y)); return food; } getState() { // 状態表現: 危険検知 + 方向 + 食べ物の相対位置 const head = this.snake[0]; // 危険検知（前方、左、右） const danger = this.checkDanger(); // 現在の方向 const dir = { up: this.direction.y === -1, down: this.direction.y === 1, left: this.direction.x === -1, right: this.direction.x === 1 }; // 食べ物の相対位置 const foodDir = { foodUp: this.food.y head.y, foodLeft: this.food.x head.x }; return [ danger.straight, danger.left, danger.right, dir.up, dir.down, dir.left, dir.right, foodDir.foodUp, foodDir.foodDown, foodDir.foodLeft, foodDir.foodRight ]; } checkDanger() { const head = this.snake[0]; // 前方の座標を計算 const straight = { x: head.x + this.direction.x, y: head.y + this.direction.y }; // 左方向（90度回転） const leftDir = { x: this.direction.y, y: -this.direction.x }; const left = { x: head.x + leftDir.x, y: head.y + leftDir.y }; // 右方向（-90度回転） const rightDir = { x: -this.direction.y, y: this.direction.x }; const right = { x: head.x + rightDir.x, y: head.y + rightDir.y }; return { straight: this.isCollision(straight), left: this.isCollision(left), right: this.isCollision(right) }; } isCollision(pos) { // 壁との衝突 if (pos.x = gridSize || pos.y = gridSize) { return true; } // 自分自身との衝突（頭以外） return this.snake.some((s, i) => i > 0 && s.x === pos.x && s.y === pos.y); } step(action) { // アクション: 0=直進, 1=左, 2=右 if (action === 1) { // 左回転 const temp = this.direction.x; this.direction.x = this.direction.y; this.direction.y = -temp; } else if (action === 2) { // 右回転 const temp = this.direction.x; this.direction.x = -this.direction.y; this.direction.y = temp; } // 新しい頭の位置 const newHead = { x: this.snake[0].x + this.direction.x, y: this.snake[0].y + this.direction.y }; // 衝突チェック if (this.isCollision(newHead)) { this.gameOver = true; return -10; // 衝突ペナルティ } // スネークを移動 this.snake.unshift(newHead); // 食べ物を食べたかチェック let reward = 0; if (newHead.x === this.food.x && newHead.y === this.food.y) { this.score++; this.food = this.generateFood(); reward = 10; // 食べ物報酬 this.maxSteps = 100 + this.snake.length * 10; } else { this.snake.pop(); reward = 0.1; // 生存報酬（小さな正の報酬） } this.steps++; // ステップ制限超過 if (this.steps >= this.maxSteps) { this.gameOver = true; reward = -5; // 時間切れペナルティ } return reward; } } // ============================================ // DDQNエージェント // ============================================ class DDQNAgent { constructor() { this.model = this.createModel(); this.targetModel = this.createModel(); this.updateTargetModel(); this.memory = []; this.epsilon = INITIAL_EPSILON; this.episode = 0; this.bestScore = 0; this.loss = 0; } createModel() { // ニューラルネットワークモデル構築 const model = tf.sequential(); // 入力層: 11個の状態特徴量 model.add(tf.layers.dense({ units: 64, activation: 'relu', inputShape: [11] })); // 隠れ層 model.add(tf.layers.dense({ units: 64, activation: 'relu' })); model.add(tf.layers.dense({ units: 32, activation: 'relu' })); // 出力層: 3つのアクション（直進、左、右） model.add(tf.layers.dense({ units: 3, activation: 'linear' })); // モデルコンパイル model.compile({ optimizer: tf.train.adam(LEARNING_RATE), loss: 'meanSquaredError' }); return model; } updateTargetModel() { // ターゲットネットワークをメインネットワークの重みで更新 const weights = this.model.getWeights(); this.targetModel.setWeights(weights); } remember(state, action, reward, nextState, done) { // リプレイメモリに保存 this.memory.push({ state, action, reward, nextState, done }); // メモリサイズ制限 if (this.memory.length > MEMORY_SIZE) { this.memory.shift(); } } act(state) { // ε-greedy戦略でアクション選択 if (Math.random() < this.epsilon) { return Math.floor(Math.random() * 3); // ランダムアクション } // モデルによる予測 const stateTensor = tf.tensor2d([state]); const qValues = this.model.predict(stateTensor); const action = qValues.argMax(-1).dataSync()[0]; // テンソル解放 stateTensor.dispose(); qValues.dispose(); return action; } async replay() { if (this.memory.length s.state); const actions = batch.map(s => s.action); const rewards = batch.map(s => s.reward); const nextStates = batch.map(s => s.nextState); const dones = batch.map(s => s.done); const statesTensor = tf.tensor2d(states); const nextStatesTensor = tf.tensor2d(nextStates); // 現在のQ値と次のQ値を計算 const qValues = this.model.predict(statesTensor); const nextQValues = this.model.predict(nextStatesTensor); const nextQValuesTarget = this.targetModel.predict(nextStatesTensor); // DDQN: メインネットワークでアクション選択、ターゲットネットワークで評価 const nextActions = nextQValues.argMax(-1); const nextQValuesSelected = tf.gather(nextQValuesTarget, nextActions, 1); // ターゲットQ値の計算 const targets = tf.tidy(() => { const targetQValues = qValues.clone(); const batchIndices = tf.range(0, BATCH_SIZE).expandDims(1); const actionIndices = tf.tensor1d(actions, 'int32').expandDims(1); const indices = tf.concat([batchIndices, actionIndices], 1); const targetValues = tf.tensor1d(rewards).add( tf.tensor1d(dones).mul(tf.scalar(0)).add( tf.tensor1d(dones).mul(tf.scalar(1)).sub(tf.scalar(1)).mul(tf.scalar(-1)) ).mul(tf.scalar(GAMMA)).mul(nextQValuesSelected.squeeze()) ); return targetQValues.bufferSync(); }); // ターゲット値で更新 const targetTensor = tf.tensor2d(targets.values); // モデル学習 const history = await this.model.fit(statesTensor, targetTensor, { epochs: 1, batchSize: BATCH_SIZE, verbose: 0 }); this.loss = history.history.loss[0]; // テンソル解放 statesTensor.dispose(); nextStatesTensor.dispose(); qValues.dispose(); nextQValues.dispose(); nextQValuesTarget.dispose(); nextActions.dispose(); nextQValuesSelected.dispose(); targetTensor.dispose(); } decayEpsilon() { // 探索率を減衰 this.epsilon = Math.max(FINAL_EPSILON, this.epsilon * EPSILON_DECAY); } } // ============================================ // ゲーム描画クラス // ============================================ class GameRenderer { constructor(canvas) { this.canvas = canvas; this.ctx = canvas.getContext('2d'); } draw(game) { // 背景 this.ctx.fillStyle = '#16213e'; this.ctx.fillRect(0, 0, canvasWidth, canvasHeight); // グリッド線 this.ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)'; this.ctx.lineWidth = 1; for (let i = 0; i <= gridSize; i++) { this.ctx.beginPath(); this.ctx.moveTo(i * cellSize, 0); this.ctx.lineTo(i * cellSize, canvasHeight); this.ctx.stroke(); this.ctx.beginPath(); this.ctx.moveTo(0, i * cellSize); this.ctx.lineTo(canvasWidth, i * cellSize); this.ctx.stroke(); } // 食べ物 this.ctx.fillStyle = '#ff6b6b'; this.ctx.shadowColor = '#ff6b6b'; this.ctx.shadowBlur = 10; this.ctx.fillRect( game.food.x * cellSize + 2, game.food.y * cellSize + 2, cellSize - 4, cellSize - 4 ); this.ctx.shadowBlur = 0; // スネーク game.snake.forEach((segment, index) => { if (index === 0) { // 頭 this.ctx.fillStyle = '#00d4ff'; this.ctx.shadowColor = '#00d4ff'; this.ctx.shadowBlur = 15; } else { // 体 const alpha = 1 - (index / game.snake.length) * 0.5; this.ctx.fillStyle = `rgba(0, 212, 255, ${alpha})`; this.ctx.shadowBlur = 0; } this.ctx.fillRect( segment.x * cellSize + 1, segment.y * cellSize + 1, cellSize - 2, cellSize - 2 ); }); this.ctx.shadowBlur = 0; // ゲームオーバー表示 if (game.gameOver) { this.ctx.fillStyle = 'rgba(0, 0, 0, 0.7)'; this.ctx.fillRect(0, 0, canvasWidth, canvasHeight); this.ctx.fillStyle = '#ff6b6b'; this.ctx.font = 'bold 30px Arial'; this.ctx.textAlign = 'center'; this.ctx.fillText('GAME OVER', canvasWidth / 2, canvasHeight / 2); } } } // ============================================ // メイン制御 // ============================================ class GameController { constructor() { this.canvas = document.getElementById('gameCanvas'); this.renderer = new GameRenderer(this.canvas); this.game = new SnakeGame(); this.agent = new DDQNAgent(); this.isTraining = false; this.isPaused = false; this.isManual = false; this.manualDirection = {x: 1, y: 0}; this.setupControls(); this.setupKeyboard(); this.updateUI(); this.renderer.draw(this.game); } setupControls() { document.getElementById('startBtn').addEventListener('click', () => { this.startTraining(); }); document.getElementById('pauseBtn').addEventListener('click', () => { this.isPaused = !this.isPaused; document.getElementById('pauseBtn').textContent = this.isPaused ? '▶ 再開' : '⏸ 一時停止'; }); document.getElementById('resetBtn').addEventListener('click', () => { this.resetGame(); }); document.getElementById('manualBtn').addEventListener('click', () => { this.isManual = !this.isManual; this.isTraining = false; document.getElementById('manualBtn').textContent = this.isManual ? '🤖 AIモード' : '🎮 手動操作'; document.getElementById('startBtn').disabled = this.isManual; document.getElementById('pauseBtn').disabled = this.isManual; document.getElementById('status').textContent = this.isManual ? '手動操作モード' : '待機中...'; document.getElementById('status').className = this.isManual ? 'playing' : ''; }); } setupKeyboard() { document.addEventListener('keydown', (e) => { if (!this.isManual) return; switch(e.key) { case 'ArrowUp': if (this.manualDirection.y !== 1) { this.manualDirection = {x: 0, y: -1}; } break; case 'ArrowDown': if (this.manualDirection.y !== -1) { this.manualDirection = {x: 0, y: 1}; } break; case 'ArrowLeft': if (this.manualDirection.x !== 1) { this.manualDirection = {x: -1, y: 0}; } break; case 'ArrowRight': if (this.manualDirection.x !== -1) { this.manualDirection = {x: 1, y: 0}; } break; } }); } startTraining() { this.isTraining = true; this.isManual = false; document.getElementById('startBtn').disabled = true; document.getElementById('pauseBtn').disabled = false; document.getElementById('manualBtn').textContent = '🎮 手動操作'; document.getElementById('status').textContent = '学習中...'; document.getElementById('status').className = 'training'; this.trainLoop(); } resetGame() { this.game.reset(); this.renderer.draw(this.game); this.updateUI(); } async trainLoop() { if (!this.isTraining || this.isPaused) { requestAnimationFrame(() => this.trainLoop()); return; } // 現在の状態を取得 const state = this.game.getState(); // アクション選択 let action; if (this.isManual) { // 手動操作 const head = this.game.snake[0]; const newHead = { x: head.x + this.manualDirection.x, y: head.y + this.manualDirection.y }; if (this.manualDirection.x === this.game.direction.x && this.manualDirection.y === this.game.direction.y) { action = 0; // 直進 } else if (this.manualDirection.x === -this.game.direction.y && this.manualDirection.y === this.game.direction.x) { action = 1; // 左 } else { action = 2; // 右 } } else { action = this.agent.act(state); } // アクション実行 const reward = this.game.step(action); const nextState = this.game.getState(); const done = this.game.gameOver; // メモリ保存（AIモードのみ） if (!this.isManual) { this.agent.remember(state, action, reward, nextState, done); } // 学習（AIモードのみ） if (!this.isManual && this.isTraining) { await this.agent.replay(); } // ゲームオーバー処理 if (done) { if (!this.isManual) { this.agent.episode++; this.agent.decayEpsilon(); if (this.game.score > this.agent.bestScore) { this.agent.bestScore = this.game.score; } // ターゲットネットワーク更新 if (this.agent.episode % TARGET_UPDATE_FREQ === 0) { this.agent.updateTargetModel(); } } this.game.reset(); } // 描画とUI更新 this.renderer.draw(this.game); this.updateUI(); // 次のフレームをスケジュール requestAnimationFrame(() => this.trainLoop()); } updateUI() { document.getElementById('episode').textContent = this.agent.episode; document.getElementById('score').textContent = this.game.score; document.getElementById('bestScore').textContent = this.agent.bestScore; document.getElementById('epsilon').textContent = this.agent.epsilon.toFixed(3); document.getElementById('loss').textContent = this.agent.loss.toFixed(6); } } // ============================================ // アプリケーション起動 // ============================================ window.addEventListener('DOMContentLoaded', () => { new GameController(); }); ``` この実装の主要な特徴： 1. **DDQNアーキテクチャ**: - メインネットワークとターゲットネットワークを分離 - ターゲットネットワークは一定間隔で更新 - リプレイメモリによる経験再生 2. **ゲームロジック**: - 11次元の状態表現（危険検知、方向、食べ物の相対位置） - 3つのアクション（直進、左回転、右回転） - 報酬設計（衝突-10、食べ物+10、生存+0.1） 3. **TensorFlow.js最新API**: - `tf.layers.dense` によるニューラルネットワーク構築 - `model.compile` と `model.fit` による学習 - テンソル管理とメモリ解放 4. **ユーザーインターフェース**: - 学習開始・一時停止・リセット機能 - 手動操作モード（矢印キー） - リアルタイム統計表示 このコードはブラウザで直接実行でき、AIがSnakeゲームを学習する様子を観察できます。学習が進むにつれて、スネークが効率的に食べ物を探すようになります。

TensorFlow.jsを使ってDDQNスネークゲームを構築する

プロンプト内容保存

使い方

参考資料

ノート