| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Flappy Bird AI - SimpleTool Demo</title> |
| | <style> |
| | *{margin:0;padding:0;box-sizing:border-box} |
| | body{background:linear-gradient(180deg,#1a1a2e 0%,#16213e 100%);min-height:100vh;display:flex;align-items:center;justify-content:center;font-family:'Segoe UI',system-ui,sans-serif;color:#fff} |
| | .container{display:flex;gap:20px;align-items:flex-start} |
| | .game-wrapper{display:flex;flex-direction:column;align-items:center} |
| | .title{font-size:28px;font-weight:bold;margin-bottom:15px;background:linear-gradient(90deg,#ffd700,#ff6b6b);-webkit-background-clip:text;-webkit-text-fill-color:transparent} |
| | .stats-bar{display:flex;gap:20px;margin-bottom:10px;font-size:14px} |
| | .stat{padding:8px 16px;background:rgba(255,215,0,.1);border:1px solid #ffd700;border-radius:20px} |
| | .stat span{color:#ffd700;font-weight:bold} |
| | .game-area{position:relative} |
| | canvas{border:2px solid #ffd700;box-shadow:0 0 30px rgba(255,215,0,.3);border-radius:8px} |
| | .controls{margin-top:15px;display:flex;gap:10px} |
| | .btn{padding:10px 25px;font-size:14px;font-weight:bold;background:transparent;border:2px solid #ffd700;color:#ffd700;cursor:pointer;border-radius:6px;transition:all .2s} |
| | .btn:hover{background:#ffd700;color:#000} |
| | .btn.stop{border-color:#f44;color:#f44} |
| | .btn.stop:hover{background:#f44;color:#fff} |
| | .panel{width:320px;background:rgba(0,0,0,.8);border:1px solid #ffd700;border-radius:10px;padding:15px;font-size:12px} |
| | .panel h3{color:#ffd700;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #333} |
| | .config-row{display:flex;align-items:center;justify-content:space-between;margin:8px 0} |
| | .config-row label{color:#aaa} |
| | .config-row input{width:200px;padding:6px 10px;background:#111;border:1px solid #ffd700;color:#fff;border-radius:4px;font-size:12px} |
| | .config-row select{background:#111;border:1px solid #ffd700;color:#fff;padding:6px;border-radius:4px} |
| | .status-row{display:flex;align-items:center;gap:8px;margin:10px 0} |
| | .status-dot{width:10px;height:10px;border-radius:50%;background:#666} |
| | .status-dot.ok{background:#0f0;box-shadow:0 0 8px #0f0} |
| | .status-dot.err{background:#f44} |
| | .log-section{max-height:180px;overflow-y:auto;background:#050505;border-radius:6px;padding:10px;margin-top:10px} |
| | .log-entry{padding:4px 8px;margin:2px 0;background:rgba(255,215,0,.05);border-left:3px solid #ffd700;font-family:monospace;font-size:11px} |
| | .log-entry.flap{border-color:#0f0;background:rgba(0,255,0,.1)} |
| | .log-entry.wait{border-color:#888} |
| | .log-entry .action{font-weight:bold} |
| | .log-entry .ms{color:#f0f} |
| | .env-display{background:#111;padding:10px;border-radius:6px;font-family:monospace;font-size:10px;color:#888;margin-top:10px;white-space:pre-wrap;max-height:120px;overflow-y:auto} |
| | .overlay{position:absolute;inset:0;background:rgba(0,0,0,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px} |
| | .overlay.hidden{display:none} |
| | .overlay h2{font-size:36px;color:#ffd700;margin-bottom:10px} |
| | .overlay .score-display{font-size:24px;color:#0ff;margin:10px 0} |
| | .high-score{color:#f0f;font-size:14px;margin-top:5px} |
| | </style> |
| | </head> |
| | <body> |
| | <div class="container"> |
| | <div class="game-wrapper"> |
| | <div class="title">🐦 FLAPPY BIRD AI</div> |
| | <div class="stats-bar"> |
| | <div class="stat">Score: <span id="score">0</span></div> |
| | <div class="stat">Best: <span id="best">0</span></div> |
| | <div class="stat">Flaps: <span id="flaps">0</span></div> |
| | <div class="stat">Avg: <span id="avg-latency">--</span>ms</div> |
| | </div> |
| | <div class="game-area"> |
| | <canvas id="game" width="400" height="600"></canvas> |
| | <div class="overlay" id="overlay"> |
| | <h2 id="overlay-title">FLAPPY BIRD AI</h2> |
| | <div class="score-display" id="overlay-score"></div> |
| | <div class="high-score" id="overlay-best"></div> |
| | <button class="btn" id="start-btn">START</button> |
| | </div> |
| | </div> |
| | <div class="controls"> |
| | <button class="btn" id="restart-btn">RESTART</button> |
| | <button class="btn stop" id="stop-btn">STOP</button> |
| | </div> |
| | </div> |
| | <div class="panel"> |
| | <h3>⚙️ Configuration</h3> |
| | <div class="config-row"> |
| | <label>Server URL</label> |
| | </div> |
| | <div class="config-row"> |
| | <input type="text" id="server-url" value="http://localhost:8899"> |
| | </div> |
| | <div class="status-row"> |
| | <div class="status-dot" id="status-dot"></div> |
| | <span id="status-text">Click Start to connect</span> |
| | </div> |
| | <div class="config-row"> |
| | <label>Difficulty</label> |
| | <select id="difficulty"> |
| | <option value="easy">Easy (wide gaps)</option> |
| | <option value="normal" selected>Normal</option> |
| | <option value="hard">Hard (narrow gaps)</option> |
| | </select> |
| | </div> |
| | <div class="config-row"> |
| | <label>AI Decision Rate</label> |
| | <select id="decision-rate"> |
| | <option value="1">Every frame</option> |
| | <option value="3" selected>Every 3 frames</option> |
| | <option value="5">Every 5 frames</option> |
| | </select> |
| | </div> |
| | <h3>📊 AI Decision Log</h3> |
| | <div class="log-section" id="log-section"></div> |
| | <div class="env-display" id="env-display">Environment will show here...</div> |
| | </div> |
| | </div> |
| | <script> |
| | const $ = id => document.getElementById(id); |
| | |
| | |
| | const TOOLS = [{ |
| | type: "function", |
| | function: { |
| | name: "act", |
| | description: "Flappy bird action. Flap to gain height, wait to fall by gravity.", |
| | parameters: { |
| | type: "object", |
| | properties: { |
| | action: { |
| | type: "string", |
| | enum: ["flap", "wait"], |
| | description: "flap=jump up ~50px, wait=fall by gravity ~3px/frame" |
| | } |
| | }, |
| | required: ["action"] |
| | } |
| | } |
| | }]; |
| | |
| | class FCClient { |
| | constructor(url) { this.url = url.replace(/\/$/, ''); } |
| | async health() { |
| | try { |
| | const r = await fetch(`${this.url}/health`, { signal: AbortSignal.timeout(3000) }); |
| | const d = await r.json(); |
| | return { ok: d.loaded === true || d.status === 'ok' }; |
| | } catch(e) { return { ok: false }; } |
| | } |
| | async call(messages, env) { |
| | const t0 = performance.now(); |
| | try { |
| | const r = await fetch(`${this.url}/v1/function_call`, { |
| | method: 'POST', |
| | headers: { 'Content-Type': 'application/json' }, |
| | body: JSON.stringify({ messages, tools: TOOLS, environment: env }) |
| | }); |
| | const d = await r.json(); |
| | const ms = performance.now() - t0; |
| | let action = String(d.args?.action || d.heads?.arg1 || '').toLowerCase().trim(); |
| | if (!['flap','wait'].includes(action)) action = 'wait'; |
| | return { action, ms, raw: d }; |
| | } catch(e) { |
| | return { action: 'wait', ms: performance.now() - t0, error: e.message }; |
| | } |
| | } |
| | } |
| | |
| | class FlappyGame { |
| | constructor() { |
| | this.canvas = $('game'); |
| | this.ctx = this.canvas.getContext('2d'); |
| | this.W = this.canvas.width; |
| | this.H = this.canvas.height; |
| | this.client = null; |
| | this.running = false; |
| | this.bestScore = 0; |
| | this.latencies = []; |
| | this.reset(); |
| | } |
| | |
| | getDifficultyParams() { |
| | const d = $('difficulty').value; |
| | return { |
| | easy: { gapSize: 180, pipeSpeed: 2.5 }, |
| | normal: { gapSize: 150, pipeSpeed: 3 }, |
| | hard: { gapSize: 120, pipeSpeed: 4 } |
| | }[d]; |
| | } |
| | |
| | reset() { |
| | const params = this.getDifficultyParams(); |
| | this.bird = { x: 80, y: this.H / 2, vy: 0, radius: 15 }; |
| | this.gravity = 0.4; |
| | this.flapStrength = -7; |
| | this.pipes = []; |
| | this.pipeWidth = 60; |
| | this.gapSize = params.gapSize; |
| | this.pipeSpeed = params.pipeSpeed; |
| | this.pipeInterval = 100; |
| | this.frameCount = 0; |
| | this.score = 0; |
| | this.flapCount = 0; |
| | this.latencies = []; |
| | this.pendingDecision = null; |
| | this.decisionRate = parseInt($('decision-rate').value); |
| | this.spawnPipe(); |
| | this.updateStats(); |
| | this.render(); |
| | } |
| | |
| | spawnPipe() { |
| | const minY = 80; |
| | const maxY = this.H - this.gapSize - 80; |
| | const gapY = minY + Math.random() * (maxY - minY); |
| | this.pipes.push({ |
| | x: this.W + 50, |
| | gapY: gapY, |
| | passed: false |
| | }); |
| | } |
| | |
| | async start() { |
| | this.client = new FCClient($('server-url').value); |
| | const health = await this.client.health(); |
| | $('status-dot').className = 'status-dot ' + (health.ok ? 'ok' : 'err'); |
| | $('status-text').textContent = health.ok ? 'Connected' : 'Connection failed'; |
| | if (!health.ok) return; |
| | |
| | this.reset(); |
| | this.running = true; |
| | $('overlay').classList.add('hidden'); |
| | this.loop(); |
| | } |
| | |
| | stop() { |
| | this.running = false; |
| | } |
| | |
| | async loop() { |
| | if (!this.running) return; |
| | |
| | this.frameCount++; |
| | |
| | |
| | if (this.frameCount % this.decisionRate === 0) { |
| | await this.aiDecision(); |
| | } |
| | |
| | |
| | this.bird.vy += this.gravity; |
| | this.bird.y += this.bird.vy; |
| | |
| | |
| | for (const pipe of this.pipes) { |
| | pipe.x -= this.pipeSpeed; |
| | if (!pipe.passed && pipe.x + this.pipeWidth < this.bird.x) { |
| | pipe.passed = true; |
| | this.score++; |
| | } |
| | } |
| | |
| | |
| | this.pipes = this.pipes.filter(p => p.x > -this.pipeWidth); |
| | |
| | |
| | if (this.pipes.length === 0 || this.pipes[this.pipes.length - 1].x < this.W - this.pipeInterval) { |
| | this.spawnPipe(); |
| | } |
| | |
| | |
| | if (this.checkCollision()) { |
| | this.gameOver(); |
| | return; |
| | } |
| | |
| | this.updateStats(); |
| | this.render(); |
| | requestAnimationFrame(() => this.loop()); |
| | } |
| | |
| | async aiDecision() { |
| | const bird = this.bird; |
| | const nextPipe = this.pipes.find(p => p.x + this.pipeWidth > bird.x); |
| | |
| | if (!nextPipe) return; |
| | |
| | const pipeCenter = nextPipe.gapY + this.gapSize / 2; |
| | const birdToCenter = pipeCenter - bird.y; |
| | const distToPipe = nextPipe.x - bird.x; |
| | |
| | |
| | const futureY = bird.y + bird.vy * 5 + 0.5 * this.gravity * 25; |
| | const willBeAboveGap = futureY < nextPipe.gapY + 20; |
| | const willBeBelowGap = futureY > nextPipe.gapY + this.gapSize - 20; |
| | |
| | |
| | const env = [ |
| | `bird_y=${Math.round(bird.y)}`, |
| | `bird_vy=${bird.vy.toFixed(1)}`, |
| | `pipe_x=${Math.round(distToPipe)}`, |
| | `gap_top=${Math.round(nextPipe.gapY)}`, |
| | `gap_bottom=${Math.round(nextPipe.gapY + this.gapSize)}`, |
| | `gap_center=${Math.round(pipeCenter)}`, |
| | `bird_to_center=${Math.round(birdToCenter)}`, |
| | `predicted_y=${Math.round(futureY)}`, |
| | `ceiling=${0}`, |
| | `floor=${this.H}` |
| | ]; |
| | |
| | |
| | let instruction; |
| | if (bird.y < 30) { |
| | instruction = `DANGER: Too high! WAIT to fall.`; |
| | } else if (bird.y > this.H - 50) { |
| | instruction = `DANGER: Too low! FLAP now!`; |
| | } else if (distToPipe < 100) { |
| | |
| | if (bird.y > pipeCenter + 20) { |
| | instruction = `Approaching pipe, below center. FLAP to rise!`; |
| | } else if (bird.y < pipeCenter - 30) { |
| | instruction = `Approaching pipe, above center. WAIT to fall.`; |
| | } else { |
| | instruction = `Aligned with gap. ${bird.vy > 2 ? 'FLAP to slow descent.' : 'WAIT to maintain.'}`; |
| | } |
| | } else { |
| | |
| | if (birdToCenter > 40) { |
| | instruction = `Far from pipe. Below gap center by ${Math.round(birdToCenter)}px. FLAP!`; |
| | } else if (birdToCenter < -40) { |
| | instruction = `Far from pipe. Above gap center. WAIT.`; |
| | } else { |
| | instruction = `Good position. ${bird.vy > 3 ? 'FLAP to control speed.' : 'WAIT.'}`; |
| | } |
| | } |
| | |
| | const query = `Flappy bird. Screen ${this.W}x${this.H}. ${instruction} Call act(flap) or act(wait).`; |
| | $('env-display').textContent = `Query: ${query}\n\nEnv:\n${env.join('\n')}`; |
| | |
| | const result = await this.client.call([{ role: 'user', content: query }], env); |
| | this.latencies.push(result.ms); |
| | this.logDecision(result); |
| | |
| | if (result.action === 'flap') { |
| | this.bird.vy = this.flapStrength; |
| | this.flapCount++; |
| | } |
| | } |
| | |
| | checkCollision() { |
| | const b = this.bird; |
| | |
| | if (b.y - b.radius < 0 || b.y + b.radius > this.H) return true; |
| | |
| | |
| | for (const pipe of this.pipes) { |
| | if (b.x + b.radius > pipe.x && b.x - b.radius < pipe.x + this.pipeWidth) { |
| | if (b.y - b.radius < pipe.gapY || b.y + b.radius > pipe.gapY + this.gapSize) { |
| | return true; |
| | } |
| | } |
| | } |
| | return false; |
| | } |
| | |
| | gameOver() { |
| | this.running = false; |
| | if (this.score > this.bestScore) this.bestScore = this.score; |
| | $('overlay').classList.remove('hidden'); |
| | $('overlay-title').textContent = 'GAME OVER'; |
| | $('overlay-score').textContent = `Score: ${this.score}`; |
| | $('overlay-best').textContent = `Best: ${this.bestScore}`; |
| | $('best').textContent = this.bestScore; |
| | } |
| | |
| | updateStats() { |
| | $('score').textContent = this.score; |
| | $('flaps').textContent = this.flapCount; |
| | const avg = this.latencies.length ? Math.round(this.latencies.reduce((a,b)=>a+b,0)/this.latencies.length) : '--'; |
| | $('avg-latency').textContent = avg; |
| | } |
| | |
| | logDecision(result) { |
| | const entry = document.createElement('div'); |
| | entry.className = 'log-entry ' + result.action; |
| | entry.innerHTML = `<span class="action">${result.action.toUpperCase()}</span> <span class="ms">${Math.round(result.ms)}ms</span>`; |
| | $('log-section').insertBefore(entry, $('log-section').firstChild); |
| | while ($('log-section').children.length > 30) $('log-section').lastChild.remove(); |
| | } |
| | |
| | render() { |
| | const ctx = this.ctx; |
| | |
| | |
| | const grad = ctx.createLinearGradient(0, 0, 0, this.H); |
| | grad.addColorStop(0, '#1a1a2e'); |
| | grad.addColorStop(1, '#16213e'); |
| | ctx.fillStyle = grad; |
| | ctx.fillRect(0, 0, this.W, this.H); |
| | |
| | |
| | ctx.fillStyle = 'rgba(255,255,255,0.3)'; |
| | for (let i = 0; i < 30; i++) { |
| | const x = (i * 37 + this.frameCount * 0.2) % this.W; |
| | const y = (i * 23) % this.H; |
| | ctx.beginPath(); |
| | ctx.arc(x, y, 1, 0, Math.PI * 2); |
| | ctx.fill(); |
| | } |
| | |
| | |
| | for (const pipe of this.pipes) { |
| | |
| | const topGrad = ctx.createLinearGradient(pipe.x, 0, pipe.x + this.pipeWidth, 0); |
| | topGrad.addColorStop(0, '#0a5'); |
| | topGrad.addColorStop(0.5, '#0d8'); |
| | topGrad.addColorStop(1, '#0a5'); |
| | ctx.fillStyle = topGrad; |
| | ctx.fillRect(pipe.x, 0, this.pipeWidth, pipe.gapY); |
| | ctx.fillRect(pipe.x - 5, pipe.gapY - 20, this.pipeWidth + 10, 20); |
| | |
| | |
| | ctx.fillRect(pipe.x, pipe.gapY + this.gapSize, this.pipeWidth, this.H - pipe.gapY - this.gapSize); |
| | ctx.fillRect(pipe.x - 5, pipe.gapY + this.gapSize, this.pipeWidth + 10, 20); |
| | |
| | |
| | ctx.strokeStyle = '#0f0'; |
| | ctx.lineWidth = 2; |
| | ctx.shadowBlur = 10; |
| | ctx.shadowColor = '#0f0'; |
| | ctx.strokeRect(pipe.x, 0, this.pipeWidth, pipe.gapY); |
| | ctx.strokeRect(pipe.x, pipe.gapY + this.gapSize, this.pipeWidth, this.H - pipe.gapY - this.gapSize); |
| | } |
| | |
| | |
| | ctx.shadowBlur = 20; |
| | ctx.shadowColor = '#ffd700'; |
| | ctx.fillStyle = '#ffd700'; |
| | ctx.beginPath(); |
| | ctx.arc(this.bird.x, this.bird.y, this.bird.radius, 0, Math.PI * 2); |
| | ctx.fill(); |
| | |
| | |
| | ctx.shadowBlur = 0; |
| | ctx.fillStyle = '#fff'; |
| | ctx.beginPath(); |
| | ctx.arc(this.bird.x + 5, this.bird.y - 3, 5, 0, Math.PI * 2); |
| | ctx.fill(); |
| | ctx.fillStyle = '#000'; |
| | ctx.beginPath(); |
| | ctx.arc(this.bird.x + 7, this.bird.y - 3, 2, 0, Math.PI * 2); |
| | ctx.fill(); |
| | |
| | |
| | ctx.fillStyle = '#f44'; |
| | ctx.beginPath(); |
| | ctx.moveTo(this.bird.x + this.bird.radius, this.bird.y); |
| | ctx.lineTo(this.bird.x + this.bird.radius + 10, this.bird.y + 3); |
| | ctx.lineTo(this.bird.x + this.bird.radius, this.bird.y + 6); |
| | ctx.closePath(); |
| | ctx.fill(); |
| | |
| | |
| | ctx.fillStyle = '#e5c100'; |
| | ctx.save(); |
| | ctx.translate(this.bird.x - 5, this.bird.y); |
| | ctx.rotate(this.bird.vy * 0.05); |
| | ctx.fillRect(-10, -3, 10, 8); |
| | ctx.restore(); |
| | |
| | ctx.shadowBlur = 0; |
| | } |
| | } |
| | |
| | const game = new FlappyGame(); |
| | |
| | $('start-btn').onclick = () => game.start(); |
| | $('restart-btn').onclick = () => { game.stop(); game.start(); }; |
| | $('stop-btn').onclick = () => { game.stop(); $('overlay').classList.remove('hidden'); $('overlay-title').textContent = 'PAUSED'; }; |
| | |
| | game.render(); |
| | </script> |
| | </body> |
| | </html> |
| |
|
