Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 5.14.0-503.34.1.el9_5.x86_64

PHP Version:

8.2.30

User:

u329947844

Directory:

/home/u329947844/domains/style29.in/public_html/admin

Free Space:

10.3 TB

🔧 Quick Actions

✏️ Editing: game.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Canvas 2D Shooter</title>
<style>
  :root {
    --bg: #0b1020;
    --fg: #d5e2ff;
    --accent: #7ab7ff;
    --danger: #ff5f6d;
    --power: #7CFC7C;
  }
  html, body {
    margin: 0; height: 100%; background: radial-gradient(1200px 800px at 50% 30%, #111833, var(--bg));
    color: var(--fg); font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
    overflow: hidden;
  }
  #wrap { display:flex; align-items:center; justify-content:center; height:100%; }
  canvas { background: transparent; display:block; box-shadow: 0 10px 40px rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.06); border-radius: 16px; }
  #ui {
    position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 16px; align-items: center; padding: 6px 12px; border-radius: 999px;
    background: rgba(10,14,30,.55); backdrop-filter: blur(6px); font-weight: 600; letter-spacing:.2px;
  }
  .pill { padding:4px 10px; border-radius:999px; background: rgba(255,255,255,.06); }
  .pill.danger { background: rgba(255,95,109,.1); color:#ffd4d8; }
  .pill.power { background: rgba(124,252,124,.12); color:#d7ffde; }
  #overlay {
    position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none;
  }
  .card {
    pointer-events: auto; background: rgba(10,14,30,.85); backdrop-filter: blur(6px);
    padding: 22px 26px; border-radius: 16px; text-align: center; border:1px solid rgba(255,255,255,.06);
    max-width: 90vw;
  }
  .card h1 { margin: 0 0 6px; font-size: 28px; letter-spacing:.3px; }
  .card p { margin: 4px 0; opacity:.9 }
  .btns { display:flex; gap:10px; justify-content:center; margin-top:12px; }
  .btn { padding:10px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background: #141a33; color:var(--fg); cursor:pointer; }
  .btn:hover { background:#162046 }
  /* Mobile controls */
  #touch {
    position: fixed; inset: 0; display: none; pointer-events: none;
  }
  @media (max-width: 860px) {
    #touch { display: block; }
    .stickArea, .fireBtn {
      pointer-events: auto; position: absolute; user-select: none; touch-action: none;
    }
    .stickArea {
      left: 20px; bottom: 20px; width: 160px; height: 160px; border-radius: 50%;
      background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
    }
    .stick {
      position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
      width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.1);
      border:1px solid rgba(255,255,255,.15);
    }
    .fireBtn {
      right: 20px; bottom: 20px; width: 90px; height: 90px; border-radius: 50%;
      background: rgba(255,95,109,.15); border:1px solid rgba(255,95,109,.25);
      display: grid; place-items: center; font-weight: 700; color:#ffd4d8;
    }
  }
</style>
</head>
<body>
<div id="wrap">
  <canvas id="game" width="480" height="720" aria-label="2D Shooter Game"></canvas>
</div>

<div id="ui" aria-live="polite">
  <div class="pill" id="scorePill">Score: <span id="score">0</span></div>
  <div class="pill danger" id="livesPill">Lives: <span id="lives">3</span></div>
  <div class="pill power" id="powerPill" title="Power-up status">Power: <span id="power">OFF</span></div>
</div>

<div id="touch">
  <div class="stickArea" id="stickArea"><div class="stick" id="stick"></div></div>
  <div class="fireBtn" id="fireBtn">FIRE</div>
</div>

// HiDPI scaling
  function fitCanvas() {
    const maxW = Math.min(window.innerWidth - 20, 600);
    const maxH = Math.min(window.innerHeight - 20, 900);
    const aspect = canvas.width / canvas.height;
    let w = maxW, h = Math.floor(maxW / aspect);
    if (h > maxH) { h = maxH; w = Math.floor(h * aspect); }
    canvas.style.width = w + 'px';
    canvas.style.height = h + 'px';
  }
  window.addEventListener('resize', fitCanvas);
  fitCanvas();

// Utils
  const rand = (a,b) => Math.random()*(b-a)+a;
  const clamp = (v,min,max) => Math.max(min, Math.min(max,v));
  const now = () => performance.now();

// Game state
  const state = {
    running: false,
    paused: false,
    lastTime: 0,
    score: 0,
    lives: 3,
    powerTimer: 0,       // seconds remaining
    difficulty: 1,       // increases slowly with time
    time: 0
  };

// Player
  const player = {
    x: canvas.width/2, y: canvas.height - 80, r: 18,
    speed: 280, vx: 0, vy: 0,
    shootCd: 0,
  };

// Collections
  const bullets = []; // {x,y,vx,vy,r,from:'player'|'enemy'}
  const enemies = []; // {x,y,vx,vy,r,hp,type}
  const particles = []; // {x,y,vx,vy,life,color}
  const powerups = []; // {x,y,r,vy,type}

// Input
  const keys = new Set();
  document.addEventListener('keydown', e => {
    if (['ArrowUp','ArrowDown','ArrowLeft','ArrowRight',' ' ,'KeyW','KeyA','KeyS','KeyD','KeyP','KeyR'].includes(e.code)) e.preventDefault();
    keys.add(e.code);
    if (e.code === 'KeyP') togglePause();
    if (e.code === 'KeyR') resetGame();
  });
  document.addEventListener('keyup', e => keys.delete(e.code));

function wantShoot() { return keys.has('Space'); }

// Mobile joystick
  let joy = {active:false, dx:0, dy:0};
  const stickArea = document.getElementById('stickArea');
  const stick = document.getElementById('stick');
  const fireBtn = document.getElementById('fireBtn');
  function touchPos(e, el) {
    const t = e.touches[0] || e.changedTouches[0]; const rect = el.getBoundingClientRect();
    return { x: t.clientX - rect.left, y: t.clientY - rect.top };
  }
  if (stickArea) {
    const radius = 80;
    const knobR = 40;
    const updateStick = (dx,dy) => {
      const len = Math.hypot(dx,dy);
      const m = len > radius ? radius/len : 1;
      stick.style.left = (dx*m + radius) + 'px';
      stick.style.top = (dy*m + radius) + 'px';
    };
    stickArea.addEventListener('touchstart', e => {
      e.preventDefault(); joy.active = true; const p = touchPos(e, stickArea);
      joy.cx = p.x; joy.cy = p.y; joy.dx = 0; joy.dy = 0; updateStick(0,0);
    }, {passive:false});
    stickArea.addEventListener('touchmove', e => {
      e.preventDefault(); if (!joy.active) return;
      const p = touchPos(e, stickArea);
      joy.dx = clamp(p.x - joy.cx, -radius, radius);
      joy.dy = clamp(p.y - joy.cy, -radius, radius);
      updateStick(joy.dx, joy.dy);
    }, {passive:false});
    const end = e => { e.preventDefault(); joy.active=false; joy.dx=0; joy.dy=0; updateStick(0,0); };
    stickArea.addEventListener('touchend', end, {passive:false});
    stickArea.addEventListener('touchcancel', end, {passive:false});
  }
  let mobileShooting = false;
  fireBtn && fireBtn.addEventListener('touchstart', e => { e.preventDefault(); mobileShooting = true; }, {passive:false});
  fireBtn && fireBtn.addEventListener('touchend', e => { e.preventDefault(); mobileShooting = false; }, {passive:false});

// Overlay UI
  const overlay = document.getElementById('overlay');
  function showCard(title, lines, buttons = []) {
    overlay.innerHTML = `
      <div class="card" role="dialog" aria-modal="true">
        <h1>${title}</h1>
        ${lines.map(t => `<p>${t}</p>`).join('')}
        <div class="btns">
          ${buttons.map(b => `<button class="btn" data-action="${b.action}">${b.label}</button>`).join('')}
        </div>
      </div>`;
    overlay.querySelectorAll('[data-action]').forEach(btn => {
      btn.addEventListener('click', () => {
        const act = btn.getAttribute('data-action');
        if (act === 'start') startGame();
        if (act === 'resume') togglePause();
        if (act === 'restart') resetGame();
      });
    });
  }

// HUD
  const scoreEl = document.getElementById('score');
  const livesEl = document.getElementById('lives');
  const powerEl = document.getElementById('power');
  function updateHUD() {
    scoreEl.textContent = state.score;
    livesEl.textContent = state.lives;
    powerEl.textContent = state.powerTimer > 0 ? state.powerTimer.toFixed(1) + 's' : 'OFF';
  }

// Game flow
  function startGame() {
    overlay.innerHTML = '';
    state.running = true; state.paused = false;
    state.lastTime = now(); loop();
  }
  function resetGame() {
    enemies.length = bullets.length = particles.length = powerups.length = 0;
    state.score = 0; state.lives = 3; state.powerTimer = 0; state.difficulty = 1; state.time = 0;
    player.x = canvas.width/2; player.y = canvas.height-80; player.vx = player.vy = 0; player.shootCd = 0;
    overlay.innerHTML = '';
    if (!state.running) startGame();
  }
  function gameOver() {
    state.running = false;
    showCard('Game Over', [
      `Final Score: <strong>${state.score}</strong>`,
      'Press R to Restart'
    ], [{label:'Restart', action:'restart'}]);
  }
  function togglePause() {
    if (!state.running) return;
    state.paused = !state.paused;
    if (state.paused) {
      showCard('Paused', ['Press P to Resume'], [{label:'Resume', action:'resume'}, {label:'Restart', action:'restart'}]);
    } else {
      overlay.innerHTML = '';
      state.lastTime = now(); loop();
    }
  }

// Spawning
  let spawnTimer = 0;
  let powerSpawnTimer = 8;
  function spawnEnemy() {
    const typeRand = Math.random();
    const type = (typeRand < 0.7) ? 'grunt' : (typeRand < 0.9 ? 'swoop' : 'tank');
    const r = type === 'tank' ? 20 : 14;
    const x = rand(30, canvas.width - 30);
    const y = -30;
    const vy = type === 'grunt' ? rand(60, 120) : (type === 'swoop' ? rand(100, 160) : rand(50, 90));
    const vx = type === 'swoop' ? rand(-60, 60) : 0;
    const hp = type === 'tank' ? 3 : 1;
    enemies.push({x,y,vx,vy,r,hp,type});
  }
  function spawnPowerup() {
    const type = Math.random() < 0.5 ? 'spread' : 'rapid';
    const x = rand(30, canvas.width - 30);
    powerups.push({x, y:-20, r:10, vy: 60, type});
  }

// Shooting
  function shoot() {
    const spread = state.powerTimer > 0 && powerMode === 'spread';
    const rapid = state.powerTimer > 0 && powerMode === 'rapid';
    const cdBase = rapid ? 0.08 : 0.18;
    if (player.shootCd > 0) return;
    player.shootCd = cdBase;

// Power-ups
  let powerMode = 'spread'; // toggles based on pickup type
  function pickPowerup(p) {
    powerMode = p.type; // 'spread' or 'rapid'
    state.powerTimer = 8; // seconds
  }

// Particles
  function boom(x,y,color='#ff95a1', count=18, speed=220) {
    for (let i=0; i<count; i++) {
      const a = Math.random()*Math.PI*2;
      const v = rand(0.3,1)*speed;
      particles.push({x,y,vx: Math.cos(a)*v, vy: Math.sin(a)*v, life: rand(0.4,0.9), color});
    }
  }
  function flash(x,y,color='#fff') {
    particles.push({x,y,vx:0,vy:0,life:.2,color});
  }

// Collision
  function collides(a, b) {
    const dx = a.x - b.x, dy = a.y - b.y;
    return dx*dx + dy*dy <= (a.r + b.r) * (a.r + b.r);
  }

// Update
  function update(dt) {
    state.time += dt;
    state.difficulty += dt * 0.03;

// Input -> velocity
    let ax = 0, ay = 0;
    if (keys.has('ArrowLeft') || keys.has('KeyA')) ax -= 1;
    if (keys.has('ArrowRight') || keys.has('KeyD')) ax += 1;
    if (keys.has('ArrowUp') || keys.has('KeyW')) ay -= 1;
    if (keys.has('ArrowDown') || keys.has('KeyS')) ay += 1;

if (joy.active) {
      ax += joy.dx / 80; ay += joy.dy / 80;
    }

const len = Math.hypot(ax, ay);
    if (len > 0) { ax /= len; ay /= len; }
    player.vx = ax * player.speed;
    player.vy = ay * player.speed;
    player.x = clamp(player.x + player.vx * dt, player.r, canvas.width - player.r);
    player.y = clamp(player.y + player.vy * dt, player.r, canvas.height - player.r - 10);

// Shooting
    const shooting = wantShoot() || mobileShooting;
    if (shooting) shoot();
    player.shootCd = Math.max(0, player.shootCd - dt);

// Enemies
    spawnTimer -= dt;
    if (spawnTimer <= 0) {
      spawnEnemy();
      const base = 0.8 / state.difficulty; // quicker spawns as difficulty rises
      spawnTimer = clamp(base, 0.18, 1.0);
    }
    enemies.forEach(e => {
      e.x += e.vx * dt;
      e.y += e.vy * dt;
      if (e.type === 'swoop') e.vx += Math.sin(state.time * 3 + e.y * 0.02) * 10 * dt;
    });
    // Remove offscreen enemies & penalize if they pass
    for (let i=enemies.length-1; i>=0; i--) {
      const e = enemies[i];
      if (e.x < -40 || e.x > canvas.width + 40 || e.y > canvas.height + 40) {
        enemies.splice(i,1);
        if (e.y > canvas.height) loseLife();
      }
    }

// Bullets
    bullets.forEach(b => { b.x += (b.vx||0) * dt; b.y += b.vy * dt; });
    for (let i=bullets.length-1; i>=0; i--) {
      const b = bullets[i];
      if (b.y < -20 || b.y > canvas.height + 20 || b.x < -20 || b.x > canvas.width + 20) bullets.splice(i,1);
    }

// Powerups
    powerSpawnTimer -= dt;
    if (powerSpawnTimer <= 0) {
      spawnPowerup();
      powerSpawnTimer = rand(8, 14);
    }
    powerups.forEach(p => { p.y += p.vy * dt; });
    for (let i=powerups.length-1; i>=0; i--) {
      const p = powerups[i];
      if (p.y > canvas.height + 30) powerups.splice(i,1);
    }

// Particles
    particles.forEach(pr => {
      pr.x += pr.vx * dt; pr.y += pr.vy * dt; pr.life -= dt;
    });
    for (let i=particles.length-1; i>=0; i--) if (particles[i].life <= 0) particles.splice(i,1);

// Collisions: bullets -> enemies
    for (let i=enemies.length-1; i>=0; i--) {
      const e = enemies[i];
      for (let j=bullets.length-1; j>=0; j--) {
        const b = bullets[j];
        if (b.from === 'player' && collides(e,b)) {
          bullets.splice(j,1);
          e.hp -= 1;
          boom(e.x, e.y, '#7ab7ff', 6, 120);
          if (e.hp <= 0) {
            enemies.splice(i,1);
            state.score += (e.type === 'tank' ? 30 : e.type === 'swoop' ? 20 : 10);
            boom(e.x, e.y, '#ff95a1', 24, 260);
          }
          break;
        }
      }
    }

// Collisions: enemies -> player
    for (let i=enemies.length-1; i>=0; i--) {
      const e = enemies[i];
      if (collides(e, player)) {
        enemies.splice(i,1);
        boom(player.x, player.y, '#ffd29d', 26, 220);
        loseLife();
      }
    }

// Collisions: powerups -> player
    for (let i=powerups.length-1; i>=0; i--) {
      const p = powerups[i];
      if (collides(p, player)) {
        powerups.splice(i,1);
        pickPowerup(p);
        boom(p.x, p.y, '#a9ffb6', 18, 200);
      }
    }

// Power timer
    if (state.powerTimer > 0) state.powerTimer = Math.max(0, state.powerTimer - dt);

updateHUD();
  }

function loseLife() {
    state.lives -= 1;
    if (state.lives <= 0) gameOver();
  }

// Render
  function render() {
    // background stars
    ctx.clearRect(0,0,canvas.width,canvas.height);
    // Subtle starfield
    drawStarfield();

// power aura
    if (state.powerTimer > 0) {
      ctx.beginPath();
      ctx.arc(player.x, player.y, player.r + 6 + Math.sin(state.time*8)*2, 0, Math.PI*2);
      ctx.strokeStyle = 'rgba(124,252,124,0.5)';
      ctx.lineWidth = 2;
      ctx.stroke();
    }

// player
    drawPlayer();

// bullets
    ctx.fillStyle = '#a3d1ff';
    bullets.forEach(b => {
      ctx.beginPath(); ctx.arc(b.x, b.y, b.r, 0, Math.PI*2); ctx.fill();
    });

// enemies
    enemies.forEach(e => drawEnemy(e));

// powerups
    powerups.forEach(p => {
      ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI*2);
      ctx.fillStyle = p.type === 'spread' ? 'rgba(122,183,255,.9)' : 'rgba(124,252,124,.9)';
      ctx.fill();
      ctx.fillStyle = '#0b1020';
      ctx.font = 'bold 10px system-ui'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
      ctx.fillText(p.type === 'spread' ? 'S' : 'R', p.x, p.y+0.5);
    });

// particles
    particles.forEach(pr => {
      ctx.globalAlpha = Math.max(0, pr.life);
      ctx.fillStyle = pr.color;
      ctx.fillRect(pr.x, pr.y, 2, 2);
      ctx.globalAlpha = 1;
    });
  }

// Fancy drawing helpers
  let starSeed = new Array(80).fill(0).map(()=>({x:rand(0,480), y:rand(0,720), s:rand(0.5,2), sp:rand(10,40)}));
  function drawStarfield() {
    ctx.fillStyle = 'rgba(255,255,255,0.06)';
    starSeed.forEach(st => {
      st.y += st.sp * (1/60);
      if (st.y > canvas.height) { st.y = -2; st.x = rand(0, canvas.width); }
      ctx.fillRect(st.x, st.y, st.s, st.s);
    });
  }
  function drawPlayer() {
    // body
    ctx.beginPath();
    ctx.arc(player.x, player.y, player.r, 0, Math.PI*2);
    ctx.fillStyle = '#8fb6ff'; ctx.fill();
    // nose
    ctx.beginPath();
    ctx.moveTo(player.x, player.y - player.r - 6);
    ctx.lineTo(player.x - 6, player.y - player.r + 6);
    ctx.lineTo(player.x + 6, player.y - player.r + 6);
    ctx.closePath();
    ctx.fillStyle = '#cfe1ff'; ctx.fill();
    // glow
    ctx.beginPath(); ctx.arc(player.x, player.y, player.r+2, 0, Math.PI*2);
    ctx.strokeStyle = 'rgba(122,183,255,.35)'; ctx.stroke();
  }
  function drawEnemy(e) {
    ctx.save();
    ctx.translate(e.x, e.y);
    ctx.rotate(Math.sin((e.x+e.y)*0.01)*0.2);
    ctx.fillStyle = e.type === 'tank' ? '#ff9aa5' : (e.type === 'swoop' ? '#ffd480' : '#e0a8ff');
    ctx.beginPath();
    ctx.arc(0, 0, e.r, 0, Math.PI*2);
    ctx.fill();
    ctx.strokeStyle = 'rgba(255,255,255,.15)'; ctx.stroke();
    // eye
    ctx.fillStyle = '#0b1020'; ctx.fillRect(-3, -3, 6, 6);
    ctx.restore();
  }

// Main loop
  function loop() {
    if (!state.running || state.paused) return;
    const t = now();
    const dt = Math.min(0.033, (t - state.lastTime)/1000); // clamp to avoid big jumps
    state.lastTime = t;
    update(dt);
    render();
    requestAnimationFrame(loop);
  }

// Initial screen
  showCard('2D Shooter', [
    'Move: Arrow Keys / WASD',
    'Shoot: SPACE • Pause: P • Restart: R',
    'Pick power-ups: S = Spread, R = Rapid',
  ], [{label:'Start Game', action:'start'}]);
})();
</script>
</body>
</html>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: game.html

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation