Bow Fighter

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Prepare for warp speed in Bow Fighter: Command Center Edition, an intense, fast-paced arcade survival game where reflexes and momentum are your only lifelines!</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <style>
 body {
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color: #000;
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
 touch-action: none;
 }
 #game-container {
 position: relative;
 box-shadow: 0 0 50px rgba(0, 210, 255, 0.2);
 border: 2px solid #333;
 background: black;
 width: 100%;
 height: 100%;
 max-width: 100%; /* Allows full width */
 max-height: 100%;
 overflow: hidden;
 }
 canvas {
 display: block;
 background: radial-gradient(circle at center, #001020 0%, #000 100%);
 width: 100%;
 height: 100%;
 cursor: crosshair;
 }
 
 /* Fullscreen Toggle */
 #fullscreen-btn {
 position: absolute;
 top: 20px;
 right: 20px;
 z-index: 100;
 background: rgba(0, 210, 255, 0.1);
 color: #00d2ff;
 border: 1px solid #00d2ff;
 padding: 8px 12px;
 border-radius: 4px;
 cursor: pointer;
 font-size: 1.2rem;
 transition: all 0.2s;
 box-shadow: 0 0 10px rgba(0, 210, 255, 0.2);
 }
 #fullscreen-btn:hover {
 background: rgba(0, 210, 255, 0.3);
 box-shadow: 0 0 15px rgba(0, 210, 255, 0.5);
 }

#ui-layer {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 pointer-events: none;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 color: white;
 text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
 z-index: 50;
 }
 .btn {
 pointer-events: auto;
 background: #1a1a1a;
 border: 2px solid #ff4444;
 color: #ff4444;
 padding: 12px 24px;
 font-size: 1.5rem;
 cursor: pointer;
 border-radius: 4px;
 transition: all 0.2s;
 text-transform: uppercase;
 letter-spacing: 2px;
 font-weight: bold;
 box-shadow: 0 0 15px rgba(255, 68, 68, 0.4);
 }
 .btn:hover { background: #ff4444; color: #000; }
 
 #score-display {
 position: absolute;
 top: 20px;
 width: 100%;
 text-align: center;
 font-size: 3rem;
 font-weight: bold;
 color: #fff;
 pointer-events: none;
 z-index: 40;
 }
 
 /* Status Info & Meters */
 .meter-panel {
 position: absolute;
 left: 20px;
 font-family: monospace;
 background: rgba(0,0,0,0.6);
 padding: 5px 10px;
 border-radius: 4px;
 pointer-events: none;
 z-index: 40;
 }
 #speed-meter { bottom: 110px; color: #00d2ff; border-left: 3px solid #00d2ff; font-size: 1.1rem; }
 #handling-indicator { bottom: 150px; color: #ffcc00; font-size: 0.9rem; font-weight: bold; }
 
 #dash-ui { width: 160px; }
 
 /* Overlays & Warnings */
 #collapse-warning {
 position: absolute;
 top: 20%;
 width: 100%;
 text-align: center;
 color: #ff0000;
 font-weight: 900;
 font-size: 1.8rem;
 letter-spacing: 2px;
 text-shadow: 0 0 20px #ff0000;
 z-index: 55;
 animation: pulse-fast 0.5s infinite;
 }

#white-saber-overlay {
 position: absolute;
 top: 35%;
 width: 100%;
 text-align: center;
 pointer-events: none;
 z-index: 55;
 }
 
 @keyframes pulse-fast {
 0% { opacity: 1; transform: scale(1); }
 50% { opacity: 0.5; transform: scale(1.05); }
 100% { opacity: 1; transform: scale(1); }
 }

/* Mobile Controls */
 #mobile-controls {
 position: absolute;
 bottom: 20px;
 width: 100%;
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 5px;
 padding: 0 15px;
 pointer-events: none;
 z-index: 60;
 }
 .control-group {
 display: flex;
 flex-direction: column;
 gap: 5px;
 align-items: center;
 justify-content: center;
 }
 .control-btn {
 pointer-events: auto;
 width: 55px;
 height: 55px;
 background: rgba(255, 255, 255, 0.1);
 border: 2px solid rgba(255, 255, 255, 0.3);
 border-radius: 50%;
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 1.5rem;
 color: white;
 user-select: none;
 }
 .control-btn-wide {
 width: 100%;
 height: 50px;
 border-radius: 8px;
 font-size: 1rem;
 font-weight: bold;
 background: rgba(0, 255, 0, 0.15);
 border-color: rgba(0, 255, 0, 0.4);
 }
 .hidden { display: none !important; }
 </style>
</head>
<body>

<div id="game-container">
 <button id="fullscreen-btn" onclick="toggleFullScreen()" title="Toggle Fullscreen">⛶</button>
 <canvas id="gameCanvas"></canvas>
 <div id="score-display">0</div>
 
 <div id="speed-meter" class="meter-panel hidden">SPEED: 0 m/s</div>
 <div id="handling-indicator" class="meter-panel hidden">RANK: ROOKIE</div>
 
 
 <div id="status-panel" class="hidden absolute top-20 left-5 flex flex-col gap-3 pointer-events-none z-40">
 
 <div id="dash-ui" class="bg-black/60 p-2 rounded border border-gray-600">
 <div class="flex justify-between text-xs font-bold text-gray-300 mb-1">
 <span>HYPERSPACE DASH</span>
 <span id="dash-status-text" class="text-green-400">READY</span>
 </div>
 <div class="w-full bg-gray-800 h-2 rounded overflow-hidden">
 <div id="dash-bar-fill" class="bg-green-400 h-full w-full transition-all duration-75"></div>
 </div>
 </div>
 
 <div id="blue-ui" class="hidden text-[#00d2ff] font-mono text-sm bg-black/60 p-2 rounded border border-[#00d2ff]">SHIELD: 5.0s</div>
 <div id="yellow-ui" class="hidden text-[#ffd700] font-mono text-sm bg-black/60 p-2 rounded border border-[#ffd700]">GIANT: 7.0s</div>
 <div id="purple-ui" class="hidden text-[#9b30ff] font-mono text-sm bg-black/60 p-2 rounded border border-[#9b30ff]">TINY: 7.0s</div>
 </div>

<div id="collapse-warning" class="hidden">WARNING: REALITY COLLAPSING!<br><span class="text-lg text-white">MANEUVER IMMEDIATELY!</span></div>

<div id="white-saber-overlay" class="hidden">
 <h2 class="text-xl md:text-2xl font-bold text-white tracking-widest drop-shadow-[0_0_10px_rgba(255,255,255,0.8)]">DISAPPEARED FROM REALITY</h2>
 <p class="text-sm md:text-md text-white mt-1 tracking-widest drop-shadow-[0_0_10px_rgba(255,255,255,0.8)]">REARRANGING ATOMS IN...</p>
 <p id="white-countdown" class="text-6xl font-black text-white mt-4 drop-shadow-[0_0_15px_rgba(255,255,255,1)]">3</p>
 </div>
 
 <div id="ui-layer">
 <div id="start-screen">
 <h1 class="text-4xl md:text-5xl mb-4 font-bold text-center text-[#00d2ff]">COMMAND CENTER</h1>
 <p class="mb-4 text-center opacity-80 text-yellow-400">DUAL CONTROL SYSTEM ACTIVE</p>
 <div class="mb-6 text-sm md:text-base text-center opacity-90 max-w-md mx-auto space-y-2">
 <p class="text-gray-300 border-b border-gray-700 pb-2">Use <span class="font-bold text-white">Arrow Keys</span> OR <span class="font-bold text-white">Mouse/Touch</span> to steer.<br>Left Click / Spacebar to DASH.</p>
 <div class="grid grid-cols-2 gap-2 text-left pt-2">
 <p class="text-red-500">• RED: Sine-Wave Obstacle</p>
 <p class="text-blue-400">• BLUE: Invulnerability</p>
 <p class="text-white">• WHITE: Invisibility</p>
 <p class="text-yellow-400">• YELLOW: Scale 1.5x</p>
 <p class="text-purple-400">• PURPLE: Scale 0.5x</p>
 </div>
 </div>
 <button class="btn border-[#00d2ff] text-[#00d2ff] shadow-[0_0_15px_rgba(0,210,255,0.4)] hover:bg-[#00d2ff] hover:text-black" onclick="startGame()">Engage Thrusters</button>
 </div>
 
 <div id="game-over-screen" class="hidden text-center text-white p-4">
 <h2 class="text-5xl mb-2 font-bold text-red-600 drop-shadow-[0_0_15px_rgba(255,0,0,0.8)]">SHIP DESTROYED</h2>
 <p id="final-score" class="text-2xl mb-2"></p>
 <p id="best-score" class="text-xl mb-6 text-gray-400"></p>
 <button class="btn" onclick="startGame()">Restart Deployment</button>
 </div>
 </div>

<div id="message-modal" class="hidden absolute inset-0 flex items-center justify-center bg-black/80 z-[200]">
 <div class="bg-gray-900 border-2 border-[#00d2ff] p-6 rounded-lg max-w-sm text-center shadow-[0_0_20px_rgba(0,210,255,0.5)]">
 <h3 class="text-[#00d2ff] text-xl font-bold mb-4">Fullscreen Blocked</h3>
 <p class="text-white mb-6 text-sm">Your browser or hosting platform is blocking fullscreen access from within this frame.<br><br>The game will automatically maximize to fit the available space of your embed widget instead!</p>
 <button onclick="document.getElementById('message-modal').classList.add('hidden')" class="btn text-sm py-2 px-4 border-[#00d2ff] text-[#00d2ff] shadow-none hover:bg-[#00d2ff] hover:text-black">Acknowledge</button>
 </div>
 </div>
 </div>

// Game Constants
 let width, height;
 const MIN_THRUST_POWER = 0.45; 
 const MIN_MAX_VERTICAL_SPEED = 7; 
 const BASE_MIN_PIPE_SPEED = 2.0; 
 const GAP_HEIGHT = 185; 
 const SHIP_SIZE = 36;
 const DASH_DISTANCE = 180;
 const DASH_COOLDOWN_FRAMES = 120;

// State Variables
 let ship, pipes, stars, frameCount, score, bestScore = 0, isGameActive = false;
 let currentPipeSpeed = 5.5; 
 let keys = { up: false, down: false, left: false, right: false };

// Dual Control Variables
 let usingMouse = false;
 let targetMouseY = 0;
 let targetMouseX = 0;

// Mechanics State
 let dashReady = true;
 let dashCooldown = 0;
 let dashTimer = 0; // Visual motion blur duration
 let shipCurrentScale = 1;
 let shipBaseX = 0;
 let activeEffects = { blue: 0, white: 0, yellow: 0, purple: 0 };

// BOUNDARY COLLAPSE STATE
 let posHistory = [];
 let collapseAmount = 0; 
 let isIdling = false;

const TITLES = [
 "Rookie", "Pilot", "Scout", "Flyer", "Ensign", "Wingman", "Officer", "Ace", "Captain", "Commander",
 "Striker", "Raider", "Interceptor", "Elite", "Guardian", "Vanguard", "Sentinel", "Reaper", "Marauder",
 "Warp Rider", "Light Chaser", "Sonic Burst", "Mach Master", "Void Runner", "Stellar Ace", "Cosmic Pilot",
 "Hyperdrive King", "Velocity Demon", "Infinite Thruster", "Momentum Master", "Vector Lord", "Acceleration God",
 "Reality Glitch", "Matrix Runner", "Simulated Ace", "Data Streamer", "Bit-Crusher", "Frame Breaker", 
 "Godlike", "Titan of Speed", "Omega Ace", "Alpha Velocity", "Zero Point Lead", "Endless Light"
 ];

function resizeCanvas() {
   const container = document.getElementById('game-container');
   width = container.clientWidth || window.innerWidth;
   height = container.clientHeight || window.innerHeight;
   canvas.width = width;
   canvas.height = height;
   shipBaseX = width * 0.2;
 }

function resetGame() {
 resizeCanvas(); // Guarantee dimensions are correct when restarting!
 ship = { x: shipBaseX, y: height / 2, vy: 0, rotation: 0 };
 pipes = [];
 frameCount = 0;
 score = 0;
 currentPipeSpeed = 5.5;
 scoreElement.textContent = "0";
 
 dashReady = true;
 dashCooldown = 0;
 dashTimer = 0;
 shipCurrentScale = 1;
 activeEffects = { blue: 0, white: 0, yellow: 0, purple: 0 };
 
 posHistory = [];
 collapseAmount = 0;
 isIdling = false;
 collapseWarning.classList.add('hidden');
 updateDashUI();

// Generate stars here to ensure correct dimensions are used
 stars = [];
 for (let i = 0; i < 150; i++) {
 stars.push({ x: Math.random() * width, y: Math.random() * height, size: Math.random() * 1.5, speedMult: Math.random() * 0.5 + 0.2 });
 }
 }

function startGame() {
 resetGame();
 isGameActive = true;
 startScreen.classList.add('hidden');
 gameOverScreen.classList.add('hidden');
 scoreElement.classList.remove('hidden');
 speedMeter.classList.remove('hidden');
 handlingIndicator.classList.remove('hidden');
 statusPanel.classList.remove('hidden');
 requestAnimationFrame(gameLoop);
 }

function doDash() {
 if (dashReady && isGameActive) {
 dashReady = false;
 dashCooldown = DASH_COOLDOWN_FRAMES; 
 dashTimer = 6; // 100ms visual motion blur
 ship.x += DASH_DISTANCE;
 
 // Dashing breaks reality collapse
 posHistory = []; 
 collapseAmount = 0;
 collapseWarning.classList.add('hidden');
 updateDashUI();
 }
 }

function spawnPipe() {
 const margin = 80; 
 const minTop = margin;
 const maxTop = height - GAP_HEIGHT - margin;
 const topHeight = Math.floor(Math.random() * (maxTop - minTop + 1)) + minTop;
 
 // Difficulty Scaling
 let redChance = 0.50 + (score * 0.008);
 if (redChance > 0.85) redChance = 0.85;

pipes.push({
 x: width + 200,
 baseTop: topHeight,
 topHeight: topHeight,
 amplitude: amplitude,
 angle: angle,
 oscSpeed: oscSpeed,
 width: 30,
 passed: false,
 color: color,
 type: type,
 consumed: false
 });
 }

function update() {
 if (!isGameActive) return;

// --- Core Dual Movement System ---
 if (usingMouse) {
 // Mouse/Touch Lerping Physics (Smooth follow)
 ship.vy = (targetMouseY - ship.y) * 0.12;
 
 // X-axis mouse tracking controls speed. Right side = fast, Left = slow.
 if (targetMouseX > width * 0.6) currentPipeSpeed += 0.2;
 else if (targetMouseX < width * 0.4) currentPipeSpeed -= 0.2;
 } else {
 // Keyboard Zero-G Momentum Physics
 const handlingScale = (currentPipeSpeed / 10); 
 const currentThrust = MIN_THRUST_POWER + (handlingScale * 0.5);
 
 if (keys.up) ship.vy -= currentThrust;
 if (keys.down) ship.vy += currentThrust;
 
 if (keys.right) currentPipeSpeed += 0.25;
 if (keys.left) currentPipeSpeed -= 0.25;
 }
 
 // Apply friction and clamp speed
 const currentMaxVY = MIN_MAX_VERTICAL_SPEED + ((currentPipeSpeed / 10) * 8);
 ship.vy *= 0.96; // Drift friction
 if (ship.vy > currentMaxVY) ship.vy = currentMaxVY;
 if (ship.vy < -currentMaxVY) ship.vy = -currentMaxVY;
 
 ship.y += ship.vy;
 ship.rotation = (ship.vy / (currentMaxVY + 2));

// Horizontal Dynamic Minimum Speed (Increases with score)
 const dynamicMinSpeed = BASE_MIN_PIPE_SPEED + (score * 0.05);
 if (currentPipeSpeed < dynamicMinSpeed) currentPipeSpeed = dynamicMinSpeed;

// --- Dash & Timers ---
 if (ship.x > shipBaseX) {
 ship.x -= 3; // Smooth snapback
 if (ship.x < shipBaseX) ship.x = shipBaseX;
 }

if (dashCooldown > 0) {
 dashCooldown--;
 if (dashCooldown % 2 === 0) updateDashUI(); // Update UI smoothly
 }
 if (dashCooldown === 0 && !dashReady) {
 dashReady = true;
 updateDashUI();
 }
 if (dashTimer > 0) dashTimer--;

if (activeEffects.blue > 0) activeEffects.blue--;
 if (activeEffects.white > 0) activeEffects.white--;
 if (activeEffects.yellow > 0) activeEffects.yellow--;
 if (activeEffects.purple > 0) activeEffects.purple--;

// --- BOUNDARY COLLAPSE (Anti-Idling Check) ---
 // Record position to prevent safe-zoning
 posHistory.push({ y: ship.y, speed: currentPipeSpeed });
 if (posHistory.length > 240) posHistory.shift();

// Significant key press or mouse movement breaks idle immediately
 if (keys.right || keys.up || keys.down || Math.abs(ship.vy) > 3) {
 if (isIdling) posHistory = []; 
 }

isIdling = false;
 if (posHistory.length === 240) {
 let minY = Math.min(...posHistory.map(p => p.y));
 let maxY = Math.max(...posHistory.map(p => p.y));
 let minSpd = Math.min(...posHistory.map(p => p.speed));
 let maxSpd = Math.max(...posHistory.map(p => p.speed));

// Idle = Staying within a 120px vertical band and not changing speed
 if ((maxY - minY) < 120 && (maxSpd - minSpd) < 1.0) {
 isIdling = true;
 }
 }

if (isIdling) {
 collapseAmount += 1.2; // Shrink Play Area
 const maxCollapse = height / 2.3;
 if (collapseAmount > maxCollapse) collapseAmount = maxCollapse;
 collapseWarning.classList.remove('hidden');
 } else {
 collapseAmount -= 3; // Recede Play Area
 if (collapseAmount <= 0) {
 collapseAmount = 0;
 collapseWarning.classList.add('hidden');
 }
 }

// --- Screen & Collapse Boundaries ---
 const effectiveTop = collapseAmount;
 const effectiveBottom = height - collapseAmount;
 const actualShipSize = SHIP_SIZE * shipCurrentScale;

// Check Outer & Collapse Boundary Collisions
 if (ship.y - actualShipSize/2 < effectiveTop || ship.y + actualShipSize/2 > effectiveBottom) { 
 gameOver(); 
 return;
 }

// --- UI Updates ---
 const displaySpeed = currentPipeSpeed * 10;
 speedMeter.textContent = `SPEED: ${displaySpeed.toFixed(0)} m/s`;
 const rankIndex = Math.min(TITLES.length - 1, Math.floor(displaySpeed / 100));
 handlingIndicator.textContent = `RANK: ${TITLES[rankIndex]}`;

blueUI.classList.toggle('hidden', activeEffects.blue <= 0);
 if (activeEffects.blue > 0) blueUI.textContent = `SHIELD: ${(activeEffects.blue/60).toFixed(1)}s`;

yellowUI.classList.toggle('hidden', activeEffects.yellow <= 0);
 if (activeEffects.yellow > 0) yellowUI.textContent = `GIANT: ${(activeEffects.yellow/60).toFixed(1)}s`;

purpleUI.classList.toggle('hidden', activeEffects.purple <= 0);
 if (activeEffects.purple > 0) purpleUI.textContent = `TINY: ${(activeEffects.purple/60).toFixed(1)}s`;

// Quantum Ghost Update
 if (activeEffects.white > 0) {
 whiteOverlay.classList.remove('hidden');
 whiteCountdown.textContent = Math.ceil(activeEffects.white / 60);
 } else {
 whiteOverlay.classList.add('hidden');
 }

// --- Pipe Processing (Sine-wave & Collisions) ---
 const spawnInterval = Math.max(10, Math.floor(500 / currentPipeSpeed));
 if (frameCount % spawnInterval === 0) spawnPipe();

const substeps = Math.ceil(currentPipeSpeed / 10); 
 // Invulnerable if Dashing OR Shielded OR Ghosted
 let isInvulnerable = dashTimer > 0 || activeEffects.blue > 0 || activeEffects.white > 0;

pipes.forEach((pipe, index) => {
 // Oscillate Red Sabers (Sine Wave logic)
 if (pipe.type === 'red' && pipe.amplitude > 0) {
 pipe.angle += pipe.oscSpeed;
 pipe.topHeight = pipe.baseTop + Math.sin(pipe.angle) * pipe.amplitude;
 }

stars.forEach(star => {
 star.x -= (currentPipeSpeed * star.speedMult);
 if (star.x < -10) star.x = width + 10;
 });
 frameCount++;
 }

function drawIntricateHilt(x, y, color, pointsDown = true) {
 ctx.save();
 ctx.translate(x, y);
 if (!pointsDown) ctx.rotate(Math.PI); 
 const hiltWidth = 26;
 const offsetX = -hiltWidth / 2;
 ctx.fillStyle = "#333";
 ctx.fillRect(offsetX, 0, hiltWidth, 70);
 ctx.fillStyle = "#aaa";
 ctx.fillRect(offsetX - 2, 0, hiltWidth + 4, 10); 
 ctx.fillRect(offsetX - 2, 60, hiltWidth + 4, 10); 
 ctx.fillStyle = color;
 ctx.beginPath(); ctx.arc(0, 45, 3, 0, Math.PI * 2); ctx.fill();
 ctx.restore();
 }

function drawVerticalSaber(pipe, gapY, isTopSaber) {
 const color = pipe.color;
 const bladeWidth = 10;
 const centerX = pipe.x + 15;
 const hiltLength = 70;
 const blurAmount = Math.min(400, currentPipeSpeed * 1.5);
 
 ctx.save();
 if (pipe.consumed) ctx.globalAlpha = 0.2;

if (isTopSaber) {
 drawIntricateHilt(centerX, 0, color, true);
 ctx.shadowBlur = 20;
 ctx.shadowColor = color;
 ctx.fillStyle = "#fff";
 ctx.globalAlpha = pipe.consumed ? 0.2 : 1;
 ctx.fillRect(centerX - bladeWidth/2, hiltLength, bladeWidth, gapY - hiltLength);
 ctx.globalAlpha = pipe.consumed ? 0.1 : 0.2;
 ctx.fillStyle = color;
 ctx.fillRect(centerX - bladeWidth/2, hiltLength, bladeWidth + blurAmount, gapY - hiltLength);
 } else {
 drawIntricateHilt(centerX, height, color, false);
 const hiltEmitterY = height - hiltLength;
 const targetY = gapY + GAP_HEIGHT;
 ctx.shadowBlur = 20;
 ctx.shadowColor = color;
 ctx.fillStyle = "#fff";
 ctx.globalAlpha = pipe.consumed ? 0.2 : 1;
 ctx.fillRect(centerX - bladeWidth/2, targetY, bladeWidth, hiltEmitterY - targetY);
 ctx.globalAlpha = pipe.consumed ? 0.1 : 0.2;
 ctx.fillStyle = color;
 ctx.fillRect(centerX - bladeWidth/2, targetY, bladeWidth + blurAmount, hiltEmitterY - targetY);
 }
 ctx.restore();
 }

function drawTIE(x, y) {
 // Quantum Ghost Phase (Invisible)
 if (activeEffects.white > 0) return;

ctx.save();
 ctx.translate(x, y);
 ctx.rotate(ship.rotation);
 
 // Scale Management
 let targetScale = 1;
 if (activeEffects.yellow > 0) targetScale = 1.5;
 if (activeEffects.purple > 0) targetScale = 0.5;
 shipCurrentScale += (targetScale - shipCurrentScale) * 0.1; 
 ctx.scale(shipCurrentScale, shipCurrentScale);

// Blue Jedi Aura Shield
 if (activeEffects.blue > 0) {
 ctx.shadowBlur = 15;
 ctx.shadowColor = '#00d2ff';
 }

const size = SHIP_SIZE;
 ctx.strokeStyle = activeEffects.blue > 0 ? '#00d2ff' : '#888';
 ctx.fillStyle = "#222";
 ctx.lineWidth = 2;
 
 ctx.beginPath();
 ctx.moveTo(-size/2, -size/2); ctx.lineTo(-size/2, size/2); ctx.stroke();
 ctx.moveTo(size/2, -size/2); ctx.lineTo(size/2, size/2); ctx.stroke();
 
 ctx.beginPath();
 ctx.moveTo(-size/2, 0); ctx.lineTo(size/2, 0); ctx.stroke();
 
 ctx.beginPath(); ctx.arc(0, 0, size/4, 0, Math.PI * 2); ctx.fill(); ctx.stroke();
 
 ctx.fillStyle = activeEffects.blue > 0 ? "#00d2ff" : "#444";
 ctx.beginPath(); ctx.arc(0, 0, size/8, 0, Math.PI * 2); ctx.fill();
 
 ctx.restore();

// Dash Motion Blur Frame
 if (dashTimer > 0) {
 ctx.save();
 ctx.globalAlpha = 0.5;
 ctx.fillStyle = 'rgba(255, 255, 255, 0.4)';
 ctx.fillRect(ship.x - DASH_DISTANCE, ship.y - (SHIP_SIZE*shipCurrentScale)/4, DASH_DISTANCE, (SHIP_SIZE*shipCurrentScale)/2);
 ctx.restore();
 }
 }

function draw() {
 ctx.clearRect(0, 0, width, height);
 
 // Draw Boundary Collapse Forcefields
 if (collapseAmount > 0) {
 ctx.save();
 ctx.fillStyle = `rgba(255, 0, 0, ${0.3 + Math.random() * 0.2})`; 
 ctx.shadowBlur = 30;
 ctx.shadowColor = 'red';
 ctx.fillRect(0, 0, width, collapseAmount);
 ctx.fillRect(0, height - collapseAmount, width, collapseAmount);
 ctx.restore();
 }

const starStretch = Math.max(1, currentPipeSpeed * 0.5);
 ctx.strokeStyle = "white";
 ctx.lineWidth = 1;
 stars.forEach(star => {
 ctx.beginPath();
 ctx.moveTo(star.x, star.y);
 ctx.lineTo(star.x + starStretch, star.y);
 ctx.stroke();
 });

pipes.forEach(pipe => {
 drawVerticalSaber(pipe, pipe.topHeight, true);
 drawVerticalSaber(pipe, pipe.topHeight, false);
 });

drawTIE(ship.x, ship.y);
 }

function gameLoop() {
 if (isGameActive) update();
 draw();
 if (isGameActive) requestAnimationFrame(gameLoop);
 }

// --- Control Event Listeners ---

// Keyboard
 window.addEventListener('keydown', (e) => {
 usingMouse = false;
 if (e.code === 'ArrowUp') keys.up = true;
 if (e.code === 'ArrowDown') keys.down = true;
 if (e.code === 'ArrowLeft') keys.left = true;
 if (e.code === 'ArrowRight') keys.right = true;
 if (e.code === 'Space') { e.preventDefault(); doDash(); }
 if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.code)) e.preventDefault();
 });
 window.addEventListener('keyup', (e) => {
 if (e.code === 'ArrowUp') keys.up = false;
 if (e.code === 'ArrowDown') keys.down = false;
 if (e.code === 'ArrowLeft') keys.left = false;
 if (e.code === 'ArrowRight') keys.right = false;
 });

// Mouse Controls
 canvas.addEventListener('mousemove', (e) => {
 usingMouse = true;
 const rect = canvas.getBoundingClientRect();
 targetMouseY = e.clientY - rect.top;
 targetMouseX = e.clientX - rect.left;
 });
 canvas.addEventListener('mousedown', (e) => {
 if(isGameActive) doDash();
 });

// Touch Controls (Dual Logic + Mobile UI)
 canvas.addEventListener('touchmove', (e) => {
 e.preventDefault();
 usingMouse = true;
 const rect = canvas.getBoundingClientRect();
 targetMouseY = e.touches[0].clientY - rect.top;
 targetMouseX = e.touches[0].clientX - rect.left;
 }, {passive: false});

// Handle Resize & Fullscreen dynamically
 window.addEventListener('resize', resizeCanvas);

// window.onload often fails inside injected iframes. 
 // We use a tiny timeout to ensure styles are loaded before initializing.
 setTimeout(() => {
   init(); 
   resetGame(); 
   draw();
 }, 100);

</script>
</body>
</html>

Bow Fighter

Fusion Unleashed: The Future of Energy, Society, and Science

Categories

Main Tags

نموذج الاتصال