Upload 3 files

game.js

@@ -0,0 +1,633 @@
+
+// Worms-style demo - full features (terrain mask, weapons, rope, jetpack, simple AI)
+// Author: generated by ChatGPT for user demo
+(() => {
+  // Canvas & contexts
+  const canvas = document.getElementById('gameCanvas');
+  const ctx = canvas.getContext('2d');
+
+  // Offscreen mask for destructible terrain
+  const maskCanvas = document.createElement('canvas');
+  maskCanvas.width = canvas.width;
+  maskCanvas.height = canvas.height;
+  const maskCtx = maskCanvas.getContext('2d');
+
+  // Constants & state
+  const GRAVITY = 0.45;
+  const FPS = 60;
+  let cameraX = 0;
+  let wind = { speed: 0, dir: 1 };
+
+  // Players / worms
+  let worms = [];
+  let currentIndex = 0;
+  let isPaused = false;
+  let autoFireAI = false;
+
+  const WEAPONS = [
+    { id:'BAZOOKA', name:'Bazooka', explosion:40, fuse:0, projectileType:'SHELL' },
+    { id:'GRENADE', name:'Granada 3s', explosion:35, fuse:180, projectileType:'GRENADE' },
+    { id:'ROCKET', name:'Cohete', explosion:28, fuse:0, projectileType:'ROCKET' },
+    { id:'AIRSTRIKE', name:'Airstrike', explosion:30, fuse:0, projectileType:'BOMB' }
+  ];
+
+  // Projectiles and particles
+  let projectiles = [];
+  let particles = [];
+
+  // Controls & sensitivity
+  let moveSpeed = 4;
+  let jumpStrength = 10;
+  let powerMultiplier = 0.9;
+  let aimSensitivityDen = 24;
+  let aimAngle = Math.PI/4;
+  let currentPower = 0;
+  let isCharging = false;
+  const maxPower = 120;
+
+  // Rope & jetpack flags
+  let isRoping = false;
+  let rope = { pivot:{x:0,y:0}, length:120 };
+  let isJetpacking = false;
+  let jetFuel = 3.5; // seconds
+
+  // Terrain mask setup (draw initial blob terrain)
+  function resetTerrain() {
+    maskCtx.clearRect(0,0,maskCanvas.width,maskCanvas.height);
+    // Fill full then carve sky
+    maskCtx.fillStyle = 'black';
+    maskCtx.fillRect(0,0,maskCanvas.width,maskCanvas.height);
+    maskCtx.globalCompositeOperation = 'destination-out';
+    // Draw mountains/ground as opaque holes -> use arcs to create terrain
+    const base = maskCanvas.height * 0.7;
+    for(let x=0;x<maskCanvas.width;x+=1){
+      const h = base + Math.sin(x*0.01)*50 + (Math.random()-0.5)*20;
+      maskCtx.beginPath();
+      maskCtx.rect(x, h, 1, maskCanvas.height-h);
+      maskCtx.fill();
+    }
+    maskCtx.globalCompositeOperation = 'source-over';
+  }
+
+  // Initialize worms, place on terrain by sampling mask
+  function sampleTerrainY(x) {
+    x = Math.floor(Math.max(0, Math.min(maskCanvas.width-1, x)));
+    // scan from top until pixel is transparent (sky), then next opaque is ground: invert logic
+    const d = maskCtx.getImageData(x,0,1,maskCanvas.height).data;
+    // we filled ground as transparent (destination-out), so find first alpha < 255?
+    for(let y=0;y<maskCanvas.height;y++){
+      const a = d[y*4+3];
+      if(a === 0) { // transparent -> sky
+        // continue
+      } else {
+        // opaque => ground (we draw ground as full alpha when not erased)
+        return y;
+      }
+    }
+    return maskCanvas.height - 10;
+  }
+
+  function placeWorms() {
+    worms = [
+      { id:1, x:100, y:0, size:18, color:'#ff6bcb', vx:0, vy:0, life:100, weaponIndex:0, isAI:false, fuel:jetFuel, animFrame:0, facing:1 },
+      { id:2, x: canvas.width-140, y:0, size:18, color:'#6bf2ff', vx:0, vy:0, life:100, weaponIndex:1, isAI:true, fuel:jetFuel, animFrame:0, facing:-1 }
+    ];
+    worms.forEach(w=>{
+      const fx = Math.floor(w.x);
+      const ty = findGroundY(fx);
+      w.y = ty - w.size;
+      w.fallStartY = w.y;
+    });
+    currentIndex = 0;
+  }
+
+  function findGroundY(x) {
+    // returns y coordinate of ground surface at x (topmost opaque)
+    x = Math.floor(Math.max(0,Math.min(maskCanvas.width-1,x)));
+    const img = maskCtx.getImageData(x,0,1,maskCanvas.height).data;
+    for(let y=0;y<maskCanvas.height;y++){
+      const a = img[y*4+3];
+      if(a !== 0) return y;
+    }
+    return maskCanvas.height-10;
+  }
+
+  // Terrain destruction: erase circle from mask
+  function blastTerrain(cx, cy, r) {
+    maskCtx.save();
+    maskCtx.globalCompositeOperation = 'destination-out';
+    maskCtx.beginPath();
+    maskCtx.arc(cx, cy, r, 0, Math.PI*2);
+    maskCtx.fill();
+    maskCtx.restore();
+    // spawn particles
+    for(let i=0;i<Math.min(120, r*3); i++){
+      const a = Math.random()*Math.PI*2;
+      const s = Math.random()*4 + 1;
+      particles.push({x:cx, y:cy, vx:Math.cos(a)*s, vy:Math.sin(a)*s -2, life:40 + Math.random()*40, size:1+Math.random()*2, color:'#ffb86b'});
+    }
+    // apply damage to worms
+    applyDamage(cx,cy,r);
+  }
+
+  function applyDamage(cx,cy,r) {
+    worms.forEach(w=>{
+      const dx = w.x - cx;
+      const dy = w.y - cy;
+      const dist = Math.sqrt(dx*dx + dy*dy);
+      if(dist < r*1.5) {
+        const damage = Math.floor(60 * (1 - dist/(r*1.5)));
+        if(damage>0) {
+          w.life = Math.max(0, w.life - damage);
+          // knockback
+          const k = damage*0.15;
+          if(dist>0.1) {
+            w.vx += (dx/dist)*k;
+            w.vy += (dy/dist)*k*0.6;
+          } else {
+            w.vx += (Math.random()-0.5)*k;
+            w.vy -= k;
+          }
+        }
+      }
+    });
+  }
+
+  // PROJECTILES update (with substeps for stability)
+  function updateProjectiles() {
+    const substeps = 3;
+    for(let s=0;s<substeps;s++){
+      for(let i=projectiles.length-1;i>=0;i--){
+        const p = projectiles[i];
+        // wind effect for non bombs
+        if(p.kind !== 'BOMB') {
+          p.vx += (wind.dir * wind.speed) * (p.kind === 'ROCKET' ? 0.18 : 0.08) / substeps;
+        }
+        // gravity
+        p.vy += GRAVITY / substeps;
+        p.x += p.vx / substeps;
+        p.y += p.vy / substeps;
+
+        // collision with terrain: check mask alpha at integer x,y
+        const ix = Math.floor(p.x), iy = Math.floor(p.y);
+        if(ix>=0 && ix<maskCanvas.width && iy>=0 && iy<maskCanvas.height) {
+          const a = maskCtx.getImageData(ix,iy,1,1).data[3];
+          if(a !== 0) {
+            // collision
+            if(p.type === 'GRENADE') {
+              // bounce then set fuse
+              p.vy *= -0.28;
+              p.vx *= 0.5;
+              p.detonating = true;
+              p.y = iy - p.size;
+            } else {
+              // explode
+              blastTerrain(p.x, p.y, p.explosion);
+              projectiles.splice(i,1);
+              continue;
+            }
+          }
+        }
+        // fuse ticks
+        if(p.type === 'GRENADE' && p.fuse>0) {
+          p.fuse--;
+          if(p.fuse<=0) {
+            blastTerrain(p.x, p.y, p.explosion);
+            projectiles.splice(i,1);
+            continue;
+          }
+        }
+
+        // offscreen cleanup
+        if(p.x < -200 || p.x > canvas.width+200 || p.y > canvas.height+300) {
+          projectiles.splice(i,1);
+          continue;
+        }
+      }
+    }
+  }
+
+  // PARTICLES update
+  function updateParticles() {
+    for(let i=particles.length-1;i>=0;i--){
+      const pt = particles[i];
+      pt.vy += 0.12;
+      pt.x += pt.vx;
+      pt.y += pt.vy;
+      pt.life--;
+      pt.size *= 0.995;
+      if(pt.life<=0 || pt.size<0.2) particles.splice(i,1);
+    }
+  }
+
+  // Update worms physics
+  function updateWorms() {
+    worms.forEach(w=>{
+      // gravity if not rope controlling
+      if(!(isRoping && worms[currentIndex]===w)) w.vy += GRAVITY;
+      if(isJetpacking && worms[currentIndex]===w && w.fuel>0) {
+        w.vy -= 0.9;
+        w.fuel = Math.max(0, w.fuel - (1/FPS));
+        // small lateral control by player input (handled elsewhere)
+      }
+      w.x += w.vx;
+      w.y += w.vy;
+      // sample collision with mask
+      const ix = Math.floor(w.x);
+      const iy = Math.floor(w.y + w.size);
+      if(ix>=0 && ix<maskCanvas.width && iy>=0 && iy<maskCanvas.height) {
+        const a = maskCtx.getImageData(ix,iy,1,1).data[3];
+        if(a !== 0) {
+          // on ground - push up
+          const groundY = findGroundY(ix);
+          if(w.y + w.size > groundY) {
+            // falling damage
+            const fallDist = (w.fallStartY || w.y) - groundY;
+            if(fallDist > 120) {
+              const dmg = Math.floor((fallDist-120)*0.18);
+              w.life = Math.max(0, w.life - dmg);
+            }
+            w.y = groundY - w.size;
+            w.vy = 0;
+            w.vx *= 0.7;
+            w.fallStartY = w.y;
+          }
+        } else {
+          // in air: if previously grounded set fall start
+          if(!w.fallStartY) w.fallStartY = w.y;
+        }
+      }
+      // boundaries
+      w.x = Math.max(w.size, Math.min(canvas.width - w.size, w.x));
+      // anim frame
+      w.animFrame = (w.animFrame + 0.2) % 4;
+    });
+  }
+
+  // Rope physics (simple pendulum)
+  function updateRope() {
+    if(!isRoping) return;
+    const w = worms[currentIndex];
+    const dx = w.x - rope.pivot.x;
+    const dy = w.y - rope.pivot.y;
+    let ang = Math.atan2(dy,dx);
+    // simple swing influence
+    ang += 0.02;
+    w.x = rope.pivot.x + Math.cos(ang)*rope.length;
+    w.y = rope.pivot.y + Math.sin(ang)*rope.length;
+    w.vx = 0; w.vy = 0;
+  }
+
+  // Camera follow
+  function updateCamera() {
+    const target = projectiles.length>0 ? projectiles[0] : worms[currentIndex];
+    const targetX = Math.max(0, Math.min(canvas.width, (target.x || 0) - canvas.width/2 + 0));
+    cameraX += (targetX - cameraX) * 0.08;
+  }
+
+  // Drawing routines
+  function draw() {
+    // clear
+    ctx.clearRect(0,0,canvas.width,canvas.height);
+    ctx.save();
+    ctx.translate(-cameraX,0);
+
+    // draw background sky gradient
+    const g = ctx.createLinearGradient(0,0,0,canvas.height);
+    g.addColorStop(0,'#7ec0ff'); g.addColorStop(1,'#2d6b2d');
+    ctx.fillStyle = g;
+    ctx.fillRect(cameraX,0,canvas.width,canvas.height);
+
+    // draw mask (terrain) by compositing maskCanvas over green ground
+    ctx.drawImage(maskCanvas, -cameraX, 0);
+
+    // draw particles
+    particles.forEach(p=>{
+      ctx.globalAlpha = Math.max(0, p.life/80);
+      ctx.fillStyle = p.color;
+      ctx.beginPath(); ctx.arc(p.x, p.y, p.size,0,Math.PI*2); ctx.fill();
+    });
+    ctx.globalAlpha = 1;
+
+    // draw projectiles
+    projectiles.forEach(p=>{
+      ctx.beginPath();
+      if(p.type==='GRENADE') ctx.fillStyle='lime';
+      else if(p.type==='ROCKET') ctx.fillStyle='orange';
+      else if(p.type==='SHELL') ctx.fillStyle='red';
+      else ctx.fillStyle='purple';
+      ctx.arc(p.x, p.y, p.size,0,Math.PI*2); ctx.fill();
+    });
+
+    // draw rope line if active
+    if(isRoping) {
+      const w = worms[currentIndex];
+      ctx.strokeStyle = '#e4c07a'; ctx.lineWidth = 3;
+      ctx.beginPath(); ctx.moveTo(rope.pivot.x, rope.pivot.y); ctx.lineTo(w.x, w.y); ctx.stroke();
+    }
+
+    // draw worms
+    worms.forEach(w=>{
+      // shadow
+      ctx.fillStyle='rgba(0,0,0,0.3)';
+      ctx.beginPath(); ctx.ellipse(w.x, w.y + w.size*0.9, w.size*1.1, w.size*0.45, 0,0,Math.PI*2); ctx.fill();
+      // body (simulate sprite by changing ellipse width)
+      const sway = Math.sin(w.animFrame*1.6)*2;
+      ctx.fillStyle = w.color;
+      ctx.beginPath(); ctx.ellipse(w.x, w.y + sway, w.size, w.size*0.8, 0,0,Math.PI*2); ctx.fill();
+      // life bar
+      ctx.fillStyle='black'; ctx.fillRect(w.x-30, w.y - w.size - 18, 60,8);
+      ctx.fillStyle='#7fff7f'; ctx.fillRect(w.x-30, w.y - w.size - 18, 60*(w.life/100),8);
+      // fuel / small text
+      ctx.fillStyle='white'; ctx.font='11px Arial';
+      ctx.fillText(`ID:${w.id}`, w.x - 12, w.y + w.size + 14);
+    });
+
+    ctx.restore();
+
+    // HUD overlay
+    document.getElementById('windInfo').textContent = `${wind.dir===1? '→':'←'} ${wind.speed.toFixed(1)}`;
+    document.getElementById('turnWorm').textContent = worms[currentIndex] ? worms[currentIndex].id : '-';
+    // power bar
+    const pct = Math.min(1, currentPower / maxPower) * 100;
+    document.getElementById('powerFill').style.width = pct + '%';
+  }
+
+  // Simple AI: try angles and power to hit enemy by simulating trajectory
+  function aiTakeTurn(worm) {
+    const enemy = worms.find(x=>x.id!==worm.id && x.life>0);
+    if(!enemy) { endTurn(); return; }
+    // try samples
+    let best = null;
+    for(let a=10;a<=80;a+=6){
+      const ang = a * Math.PI/180;
+      for(let p=20;p<=100;p+=8){
+        // simulate simple ballistic with wind
+        const pos = simulateShot(worm.x + Math.cos(ang)*(worm.size+6), worm.y - Math.sin(ang)*(worm.size+6), Math.cos(ang)*p, -Math.sin(ang)*p, ang);
+        const dx = pos.x - enemy.x;
+        const dy = pos.y - enemy.y;
+        const dist = Math.sqrt(dx*dx+dy*dy);
+        if(!best || dist < best.dist) best = {ang,p,dist,pos};
+      }
+    }
+    if(best && best.dist < 80) {
+      // set aim and fire after short timeout
+      aimAngle = best.ang;
+      currentPower = best.p;
+      setTimeout(()=> fireWeapon(true), 600);
+    } else {
+      // move a bit with chance
+      if(Math.random()<0.5) {
+        worm.vx += (enemy.x < worm.x ?  -1:1) * 2;
+        setTimeout(()=> endTurn(), 700);
+      } else {
+        // try airstrike if far
+        if(Math.random()<0.4) {
+          // set weapon to airstrike
+          worm.weaponIndex = WEAPONS.findIndex(w=>w.id==='AIRSTRIKE');
+          fireAirstrike(worm);
+        } else {
+          endTurn();
+        }
+      }
+    }
+  }
+
+  // simulate shot forward for AI heuristics (no explosion)
+  function simulateShot(x0,y0,vx,vy,ang) {
+    let x=x0,y=y0;
+    for(let t=0;t<300;t++){
+      vx += (wind.dir*wind.speed)*0.08;
+      vy += GRAVITY;
+      x += vx*0.1; y += vy*0.1;
+      if(x<0||x>canvas.width||y>canvas.height) break;
+    }
+    return {x,y};
+  }
+
+  // firing functions
+  function startCharging() {
+    if(isCharging || worms[currentIndex].life<=0) return;
+    isCharging = true; currentPower = 6;
+    chargeLoop();
+  }
+  function chargeLoop() {
+    if(!isCharging) return;
+    currentPower += powerMultiplier * 2.4;
+    if(currentPower > maxPower) currentPower = maxPower;
+    setTimeout(chargeLoop, 50);
+  }
+  function releaseCharge() {
+    if(!isCharging) return;
+    isCharging = false;
+    fireWeapon(false);
+  }
+  function fireWeapon(fromAI=false) {
+    const w = worms[currentIndex];
+    const weapon = WEAPONS[w.weaponIndex];
+    if(!weapon) return;
+    if(weapon.id==='BAZOOKA') {
+      projectiles.push({x:w.x + Math.cos(aimAngle)*(w.size+6), y:w.y - Math.sin(aimAngle)*(w.size+6), vx: currentPower*Math.cos(aimAngle), vy:-currentPower*Math.sin(aimAngle), size:6, type:'SHELL', explosion:weapon.explosion, kind:'SHELL'});
+    } else if(weapon.id==='GRENADE') {
+      projectiles.push({x:w.x + Math.cos(aimAngle)*(w.size+6), y:w.y - Math.sin(aimAngle)*(w.size+6), vx: currentPower*Math.cos(aimAngle), vy:-currentPower*Math.sin(aimAngle), size:6, type:'GRENADE', explosion:weapon.explosion, fuse:weapon.fuse, kind:'GRENADE'});
+    } else if(weapon.id==='ROCKET') {
+      projectiles.push({x:w.x + Math.cos(aimAngle)*(w.size+6), y:w.y - Math.sin(aimAngle)*(w.size+6), vx: (currentPower+6)*Math.cos(aimAngle), vy:-(currentPower+6)*Math.sin(aimAngle), size:5, type:'ROCKET', explosion:weapon.explosion, kind:'ROCKET'});
+    } else if(weapon.id==='AIRSTRIKE') {
+      fireAirstrike(w);
+    }
+    currentPower = 0;
+    // end turn shortly after
+    setTimeout(()=> {
+      endTurn();
+      if(!fromAI && worms[currentIndex].isAI) {
+        // if next is AI, let it decide
+        setTimeout(()=> aiTurnIfNeeded(), 600);
+      }
+    }, 700);
+  }
+
+  function fireAirstrike(worm) {
+    const dist = 300;
+    const targetX = worm.x + Math.cos(aimAngle)*dist;
+    const cols = 5;
+    const spread = 120;
+    for(let i=0;i<cols;i++){
+      const offsetX = (i - (cols-1)/2)*(spread/(cols-1));
+      projectiles.push({x:targetX + offsetX, y:-80 - Math.random()*60, vx:0, vy:1 + Math.random()*0.6, size:6, type:'BOMB', explosion:30, kind:'BOMB'});
+    }
+    setTimeout(()=> endTurn(), 800);
+  }
+
+  function endTurn() {
+    // check game over
+    const living = worms.filter(w=>w.life>0);
+    if(living.length<=1) {
+      isPaused = true;
+      alert('Juego terminado. Refresca para reiniciar.');
+      return;
+    }
+    // advance to next alive
+    let next = (currentIndex+1)%worms.length;
+    for(let i=0;i<worms.length;i++){
+      if(worms[next].life>0) break;
+      next = (next+1)%worms.length;
+    }
+    currentIndex = next;
+    // reset some states
+    isRoping = false; isJetpacking=false; jetpackTimerReset();
+    generateWind();
+    // if AI turn, let it act
+    setTimeout(()=> aiTurnIfNeeded(), 450);
+  }
+
+  function aiTurnIfNeeded() {
+    const w = worms[currentIndex];
+    if(w && w.life>0 && w.isAI) {
+      // small thinking delay
+      setTimeout(()=> aiTakeTurn(w), 350 + Math.random()*500);
+    }
+  }
+
+  function generateWind(){
+    wind.speed = 0.5 + Math.random()*2.0;
+    wind.dir = Math.random()<0.5? -1:1;
+  }
+
+  // input controls basic
+  document.getElementById('leftBtn').addEventListener('click', ()=> {
+    const w = worms[currentIndex]; if(!w || w.life<=0) return; w.vx -= moveSpeed*0.6;
+  });
+  document.getElementById('rightBtn').addEventListener('click', ()=> {
+    const w = worms[currentIndex]; if(!w || w.life<=0) return; w.vx += moveSpeed*0.6;
+  });
+  document.getElementById('jumpBtn').addEventListener('click', ()=> {
+    const w = worms[currentIndex]; if(!w) return;
+    const fx = Math.floor(w.x), gy = findGroundY(fx);
+    if(w.y + w.size >= gy - 1) {
+      w.vx += Math.cos(aimAngle)* (jumpStrength*0.45);
+      w.vy += -Math.abs(Math.sin(aimAngle))* jumpStrength;
+      w.fallStartY = w.y;
+    }
+  });
+  document.getElementById('aimUpBtn').addEventListener('click', ()=> { aimAngle += Math.PI/aimSensitivityDen; });
+  document.getElementById('aimDownBtn').addEventListener('click', ()=> { aimAngle -= Math.PI/aimSensitivityDen; });
+
+  // charge / fire UI
+  document.getElementById('fireBtn').addEventListener('mousedown', ()=> startCharging());
+  document.getElementById('fireBtn').addEventListener('touchstart', (e)=>{ e.preventDefault(); startCharging(); });
+  document.getElementById('fireBtn').addEventListener('mouseup', ()=> releaseCharge());
+  document.getElementById('fireBtn').addEventListener('touchend', ()=> releaseCharge());
+
+  document.getElementById('weaponBtn').addEventListener('click', ()=> {
+    const w = worms[currentIndex];
+    if(!w) return;
+    w.weaponIndex = (w.weaponIndex+1) % WEAPONS.length;
+    document.getElementById('weaponBtn').textContent = '🔫 ' + WEAPONS[w.weaponIndex].name;
+  });
+
+  document.getElementById('ropeBtn').addEventListener('click', ()=> {
+    if(isRoping) { isRoping=false; return; }
+    // find anchor along aim
+    const w = worms[currentIndex]; if(!w) return;
+    const maxLen=320; let found=false;
+    for(let d=40; d<=maxLen; d+=8){
+      const px = w.x + Math.cos(aimAngle)*d;
+      const py = w.y - Math.sin(aimAngle)*d;
+      const gx = Math.floor(px);
+      if(gx>=0 && gx<maskCanvas.width){
+        const a = maskCtx.getImageData(gx, Math.floor(py),1,1).data[3];
+        if(a!==0){
+          rope.pivot.x=px; rope.pivot.y=py; rope.length=d; isRoping=true; found=true; break;
+        }
+      }
+    }
+    if(!found) { for(let i=0;i<20;i++) particles.push({x:w.x, y:w.y, vx:(Math.random()-0.5)*2, vy:-Math.random()*2, life:12+Math.random()*20, size:2, color:'#fff'}); }
+  });
+
+  document.getElementById('jetPackBtn').addEventListener('click', ()=> {
+    if(isJetpacking){ isJetpacking=false; setTimeout(()=> endTurn(), 400); return; }
+    const w = worms[currentIndex]; if(!w) return;
+    // only allow if on ground
+    const gy = findGroundY(Math.floor(w.x));
+    if(w.y + w.size >= gy - 1) { isJetpacking=true; w.fuel = jetFuel; }
+  });
+
+  // panels and sliders
+  document.getElementById('catalogBtn').addEventListener('click', ()=> togglePanel('catalogPanel',true));
+  document.getElementById('sensitivityBtn').addEventListener('click', ()=> togglePanel('sensitivityPanel',true));
+  document.querySelectorAll('.close').forEach(b=> b.addEventListener('click', ()=> togglePanel(b.getAttribute('data-target'), false)));
+
+  document.getElementById('moveSpeedSlider').addEventListener('input', (e)=> { moveSpeed = +e.target.value; document.getElementById('moveSpeedValue').textContent = moveSpeed; });
+  document.getElementById('jumpStrengthSlider').addEventListener('input', (e)=> { jumpStrength = +e.target.value; document.getElementById('jumpStrengthValue').textContent = jumpStrength; });
+  document.getElementById('powerMultiplierSlider').addEventListener('input', (e)=> { powerMultiplier = +e.target.value; document.getElementById('powerMultiplierValue').textContent = powerMultiplier; });
+  document.getElementById('aimSensitivitySlider').addEventListener('input', (e)=> { aimSensitivityDen = +e.target.value; document.getElementById('aimSensitivityValue').textContent = aimSensitivityDen; });
+
+  function togglePanel(id, show) {
+    const el = document.getElementById(id);
+    el.style.display = show ? 'flex' : 'none';
+    if(show && id==='catalogPanel') populateCatalog();
+  }
+
+  // catalog population
+  function populateCatalog(){
+    const ul = document.getElementById('catalogList'); ul.innerHTML='';
+    WEAPONS.forEach((w,idx)=>{
+      const li=document.createElement('li'); li.className='catalog-item';
+      li.innerHTML = `<div><strong>${w.name}</strong><div>Expl:${w.explosion}</div></div><button data-idx="${idx}">Usar</button>`;
+      ul.appendChild(li);
+    });
+    ul.querySelectorAll('button').forEach(b=> b.addEventListener('click', (ev)=> {
+      const idx = +ev.target.dataset.idx;
+      const w = worms[currentIndex]; if(!w) return;
+      w.weaponIndex = idx;
+      document.getElementById('weaponBtn').textContent = '🔫 ' + WEAPONS[w.weaponIndex].name;
+      togglePanel('catalogPanel', false);
+    }));
+  }
+
+  // pause
+  document.getElementById('pauseBtn').addEventListener('click', ()=> { isPaused = !isPaused; document.getElementById('pauseBtn').textContent = isPaused ? 'Reanudar' : 'Pausa'; });
+
+  // auto AI toggle
+  document.getElementById('autoFireBtn').addEventListener('click', ()=> { autoFireAI = !autoFireAI; document.getElementById('autoFireBtn').textContent = autoFireAI ? '🤖 Auto ON' : '🤖 Auto'; });
+
+  // keyboard
+  window.addEventListener('keydown', (e)=>{
+    if(e.key==='a') worms[currentIndex].vx -= moveSpeed*0.6;
+    if(e.key==='d') worms[currentIndex].vx += moveSpeed*0.6;
+    if(e.key===' ') startCharging();
+    if(e.key==='p') { isPaused = !isPaused; }
+  });
+  window.addEventListener('keyup', (e)=> { if(e.key===' ') releaseCharge(); });
+
+  // jetpack timer reset
+  function jetpackTimerReset(){ worms.forEach(w=> w.fuel = jetFuel); isJetpacking=false; }
+
+  // main loop
+  function loop(ts) {
+    if(!isPaused) {
+      updateProjectiles();
+      updateParticles();
+      updateWorms();
+      updateRope();
+      updateCamera();
+      // AI auto-turn
+      if(autoFireAI) {
+        const w = worms[currentIndex]; if(w && w.isAI) aiTakeTurn(w);
+      }
+    }
+    draw();
+    requestAnimationFrame(loop);
+  }
+
+  // init
+  resetTerrain();
+  placeWorms();
+  generateWind();
+  document.getElementById('weaponBtn').textContent = '🔫 ' + WEAPONS[worms[currentIndex].weaponIndex].name;
+  // start loop
+  requestAnimationFrame(loop);
+
+  // expose for debugging
+  window._wormsGame = { worms, projectiles, blastTerrain, maskCanvas };
+})();

index.html

@@ -1,19 +1,66 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="es">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>Worms - Versión Completa (Demo)</title>
+<link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div id="uiTop">
+    <div id="info">Viento: <span id="windInfo">0</span></div>
+    <div id="turnInfo">Turno: <span id="turnWorm">-</span></div>
+    <button id="pauseBtn">Pausa</button>
+  </div>
+
+  <canvas id="gameCanvas" width="1024" height="600"></canvas>
+
+  <div id="controls">
+    <div class="row">
+      <button id="leftBtn">◀️</button>
+      <button id="rightBtn">▶️</button>
+      <button id="jumpBtn">⬆️</button>
+    </div>
+    <div class="row">
+      <button id="aimDownBtn">➖ Ángulo</button>
+      <button id="aimUpBtn">➕ Ángulo</button>
+      <button id="fireBtn">🔴 Cargar</button>
+      <button id="autoFireBtn">🤖 Auto</button>
+    </div>
+    <div class="row">
+      <button id="ropeBtn">➰ Soga</button>
+      <button id="jetPackBtn">✈️ Jetpack</button>
+      <button id="weaponBtn">🔫 Bazooka</button>
+      <button id="catalogBtn">📖 Catálogo</button>
+      <button id="sensitivityBtn">⚙️ Sensibilidad</button>
+    </div>
+    <div id="powerBar"><div id="powerFill"></div></div>
+  </div>
+
+  <!-- Panels -->
+  <div id="catalogPanel" class="panel">
+    <div class="panel-inner">
+      <button class="close" data-target="catalogPanel">✖</button>
+      <h3>Catálogo de armas</h3>
+      <ul id="catalogList"></ul>
+    </div>
+  </div>
+
+  <div id="sensitivityPanel" class="panel">
+    <div class="panel-inner">
+      <button class="close" data-target="sensitivityPanel">✖</button>
+      <h3>Ajustes</h3>
+      <label>Velocidad: <span id="moveSpeedValue">4</span></label>
+      <input id="moveSpeedSlider" type="range" min="1" max="10" value="4" />
+      <label>Salto: <span id="jumpStrengthValue">10</span></label>
+      <input id="jumpStrengthSlider" type="range" min="6" max="22" value="10" />
+      <label>Potencia: <span id="powerMultiplierValue">0.9</span></label>
+      <input id="powerMultiplierSlider" type="range" min="0.2" max="2" step="0.1" value="0.9" />
+      <label>Ángulo sens: <span id="aimSensitivityValue">24</span></label>
+      <input id="aimSensitivitySlider" type="range" min="8" max="64" value="24" />
+    </div>
+  </div>
+
+<script src="game.js"></script>
+</body>
 </html>

style.css

@@ -1,28 +1,16 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-
-.card p:last-child {
-	margin-bottom: 0;
-}
+*{box-sizing:border-box}
+body{margin:0;font-family:Inter,Arial;background:#0f1720;color:#e6eef8;display:flex;flex-direction:column;align-items:center}
+#uiTop{width:100%;display:flex;justify-content:space-between;padding:8px 16px;align-items:center}
+#gameCanvas{background:linear-gradient(#74c476,#2d6b2d);border:6px solid #05131a;box-shadow:0 8px 30px rgba(0,0,0,0.6)}
+#controls{width:1024px;display:flex;flex-direction:column;gap:8px;padding:8px}
+#controls .row{display:flex;gap:8px;justify-content:center}
+button{padding:8px 12px;border-radius:8px;border:none;background:#0ea5a4;color:#001;cursor:pointer;font-weight:700}
+button:active{transform:translateY(1px);opacity:0.9}
+#powerBar{height:10px;background:#123;border-radius:6px;margin-top:6px;overflow:hidden}
+#powerFill{height:100%;width:0%;background:linear-gradient(90deg,#ff5f6d,#ffc371)}
+.panel{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,0.6)}
+.panel .panel-inner{background:#082028;padding:16px;border-radius:10px;width:90%;max-width:420px;box-shadow:0 10px 30px rgba(0,0,0,0.6)}
+.panel h3{margin-top:0}
+.catalog-item{background:#072b2b;padding:8px;margin:6px 0;border-radius:6px;display:flex;justify-content:space-between;align-items:center}
+#info{font-weight:700}
+#turnInfo{font-weight:700}