HTML5 CODE

Prompt

<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"> <title>Weapon Evolution - Age Craft Runner</title> <style> *{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none} html,body{width:100%;height:100%;overflow:hidden;background:#080D1A;font-family:system-ui,sans-serif;touch-action:none} canvas{display:block;width:100%;height:100%} </style> </head> <body> <canvas id="gameCanvas"></canvas> <script> const canvas = document.getElementById('gameCanvas'), ctx = canvas.getContext('2d'); let width = window.innerWidth, height = window.innerHeight; let isMuted = false, isPaused = false, animationFrameId = null, audioCtx = null; function initAudio() { if (!audioCtx) { const A = window.AudioContext || window.webkitAudioContext; if (A) audioCtx = new A(); } if (audioCtx && audioCtx.state === 'suspended') audioCtx.resume(); } function playSound(type) { if (isMuted || !audioCtx) return; try { const now = audioCtx.currentTime, osc = audioCtx.createOscillator(), gain = audioCtx.createGain(); osc.connect(gain); gain.connect(audioCtx.destination); const snd = { shoot: ['square', 600 + currentEra * 150, 150, 0.08, 0.05], evolve: ['triangle', 300, 800, 0.15, 0.15], hit: ['sawtooth', 120, 120, 0.1, 0.04], fail: ['sawtooth', 180, 60, 0.15, 0.2], win: ['sine', 400, 800, 0.2, 0.3] }[type]; if (!snd) return; osc.type = snd[0]; osc.frequency.setValueAtTime(snd[1], now); if (snd[1] !== snd[2]) osc.frequency.exponentialRampToValueAtTime(snd[2], now + snd[4]); gain.gain.setValueAtTime(snd[3], now); gain.gain.exponentialRampToValueAtTime(0.001, now + snd[4]); osc.start(now); osc.stop(now + snd[4]); } catch (e) {} } const ERAS = [ { name: "Taş Devri Sapanı", year: "MÖ 5000", fireRate: 16, color: '#A8A29E', bullets: 1, speed: 12, damage: 10 }, { name: "Ortaçağ Yayı", year: "MS 1200", fireRate: 12, color: '#F59E0B', bullets: 1, speed: 14, damage: 18 }, { name: "Korsan Piştovu", year: "1720", fireRate: 9, color: '#38BDF8', bullets: 2, speed: 16, damage: 25 }, { name: "Çift Otomatik SMG", year: "1980", fireRate: 6, color: '#EC4899', bullets: 2, speed: 18, damage: 35 }, { name: "Plazma Tüfeği", year: "2099", fireRate: 3, color: '#00F5D4', bullets: 3, speed: 22, damage: 50 } ]; let currentEra = 0, weaponYears = 0, playerX = 0, targetPlayerX = 0, playerZ = 0; let forwardSpeed = 5.2, shootTimer = 0, bullets = [], targets = [], gates = [], particles = [], floatingTexts = []; let state = "PLAYING", score = 0, currentLevel = 1; const TRACK_LENGTH = 7500; function initLevel(lvl) { currentLevel = lvl; currentEra = 0; weaponYears = 0; playerX = targetPlayerX = playerZ = score = 0; state = "PLAYING"; bullets = []; particles = []; floatingTexts = []; targets = []; gates = []; let curZ = 500; while (curZ < TRACK_LENGTH - 800) { const isPosLeft = Math.random() > 0.3; gates.push({ z: curZ, left: { op: isPosLeft ? '+' : '-', val: Math.floor(100 + Math.random() * 200) }, right: { op: isPosLeft ? '-' : '+', val: Math.floor(50 + Math.random() * 150) }, triggered: false }); curZ += 600; const targetCount = 2 + Math.floor(Math.random() * 3), slots = [-0.6, -0.2, 0.2, 0.6].sort(() => Math.random() - 0.5); for (let i = 0; i < targetCount; i++) { const hp = Math.floor((25 + lvl * 10) * (0.8 + Math.random() * 0.6)); targets.push({ z: curZ, x: slots[i], hp: hp, maxHp: hp, dead: false }); } curZ += 550; } } let isTouching = false, lastTouchX = 0, ptrId = null; function handleStart(e) { initAudio(); const pos = getPos(e); if (state === "VICTORY" || state === "GAMEOVER") { const btnW = 200, btnH = 50, btnX = (width - btnW) / 2, btnY = height * 0.58; if (pos.x >= btnX && pos.x <= btnX + btnW && pos.y >= btnY && pos.y <= btnY + btnH) { if (state === "VICTORY") currentLevel++; initLevel(currentLevel); return; } } isTouching = true; lastTouchX = pos.x; ptrId = e.pointerId; try { canvas.setPointerCapture(e.pointerId); } catch (_) {} } function handleMove(e) { if (!isTouching || state !== "PLAYING" || (ptrId !== null && e.pointerId !== undefined && e.pointerId !== ptrId)) return; const pos = getPos(e), dx = pos.x - lastTouchX; lastTouchX = pos.x; targetPlayerX = Math.max(-0.82, Math.min(0.82, targetPlayerX + (dx / width) * 2.2)); } function handleEnd(e) { if (ptrId === null || (e && e.pointerId === ptrId)) { ptrId = null; isTouching = false; } } function getPos(e) { const rect = canvas.getBoundingClientRect(); return { x: (e.clientX ?? (e.touches && e.touches[0] ? e.touches[0].clientX : 0)) - rect.left, y: (e.clientY ?? (e.touches && e.touches[0] ? e.touches[0].clientY : 0)) - rect.top }; } window.addEventListener('keydown', (e) => { initAudio(); if (e.key === 'ArrowLeft' || e.key === 'a' || e.key === 'A') targetPlayerX = Math.max(-0.82, targetPlayerX - 0.2); if (e.key === 'ArrowRight' || e.key === 'd' || e.key === 'D') targetPlayerX = Math.min(0.82, targetPlayerX + 0.2); }); canvas.addEventListener('pointerdown', (e) => { e.preventDefault(); handleStart(e); }); window.addEventListener('pointermove', handleMove); window.addEventListener('pointerup', handleEnd); window.addEventListener('pointercancel', handleEnd); function resize() { width = window.innerWidth || 360; height = window.innerHeight || 640; canvas.width = width; canvas.height = height; } window.addEventListener('resize', resize); window.pauseGame = () => { isPaused = true; if (animationFrameId) cancelAnimationFrame(animationFrameId); }; window.resumeGame = () => { if (isPaused) { isPaused = false; animationFrameId = requestAnimationFrame(loop); } }; window.setMuted = (m) => { isMuted = !!m; }; resize(); initLevel(1); function project3D(trackX, trackZ) { const relZ = trackZ - playerZ; if (relZ < -80) return null; const depth = relZ + 180, factor = 180 / depth; const hy = height * 0.25, py = height * 0.78; const screenY = hy + (py - hy) * factor, roadW = width * (0.2 + 0.68 * factor); return { x: width / 2 + trackX * (roadW / 2), y: screenY, scale: factor, roadW bu oyunu sıfırdan oluşturun daha iyi ve harika şekilde

A system prompt was added to support web rendering