Worms

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>WILD WORM — Artillery Mayhem</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Nunito:wght@700;900&display=swap');
:root{--ink:#10233c;--cream:#fff8dd;--pink:#ff5e7b;--cyan:#65e5d0;--yellow:#ffd166;--purple:#8d70ff}
*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#111d38;color:var(--cream);font-family:Nunito,system-ui,sans-serif}#app{position:relative;width:100vw;height:100vh;background:#162447}canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair}.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.panel{pointer-events:auto;background:rgba(18,30,61,.9);border:3px solid #fff4;box-shadow:0 18px 70px #050916aa, inset 0 1px #ffffff22;border-radius:26px;padding:34px;backdrop-filter:blur(14px);text-align:center}.logo{font:52px Bungee;color:var(--yellow);letter-spacing:2px;text-shadow:5px 6px 0 var(--pink),0 0 35px #ffc74d55;transform:rotate(-2deg)}.tag{color:#b7c9e8;letter-spacing:3px;margin:8px 0 26px}.row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:12px 0}.label{font-size:12px;color:#94a8cc;text-transform:uppercase;letter-spacing:2px;margin-bottom:7px}.choice{border:2px solid #ffffff20;border-radius:13px;padding:11px 16px;min-width:128px;background:#ffffff0a;color:#dbe5ff;cursor:pointer;font:900 13px Nunito;transition:.15s}.choice:hover,.choice.active{border-color:var(--cyan);background:#65e5d022;color:#fff;transform:translateY(-2px)}button.start{margin-top:18px;border:0;border-radius:16px;padding:16px 44px;background:linear-gradient(135deg,#ff6680,#ff9d62);color:#fff;font:900 18px Bungee;box-shadow:0 7px 0 #b9365d,0 0 30px #ff668055;cursor:pointer;transition:.12s}button.start:hover{filter:brightness(1.12);transform:translateY(-2px)}#hud{position:absolute;inset:0;pointer-events:none;display:none}.top{position:absolute;left:22px;right:22px;top:16px;display:flex;align-items:flex-start;justify-content:space-between}.badge{background:#10213dcc;border:1px solid #ffffff2a;border-radius:14px;padding:9px 14px;box-shadow:0 6px 25px #0003}.turn{font:17px Bungee;color:var(--yellow)}.small{font-size:11px;color:#adc0de;letter-spacing:1px}.timer{font:30px Bungee;color:#fff;text-align:center;transition:.2s}.timer.danger{color:#ff5575;text-shadow:0 0 18px #ff5575;transform:scale(1.18)}.wind{color:var(--cyan);font-weight:900}.bottom{position:absolute;left:22px;right:22px;bottom:16px;display:flex;justify-content:space-between;align-items:end}.weapons{display:flex;gap:7px;align-items:end}.weapon{pointer-events:auto;position:relative;width:70px;height:65px;border:2px solid #ffffff1c;border-radius:14px;background:#13254add;cursor:pointer;text-align:center;padding-top:8px;transition:.15s}.weapon:hover{border-color:#fff9;transform:translateY(-4px)}.weapon.sel{border-color:var(--yellow);background:#ffd16625;box-shadow:0 0 18px #ffd16644;transform:translateY(-6px)}.weapon b{display:block;font-size:22px}.weapon span{font-size:10px;color:#bdcce6}.num{position:absolute;top:3px;left:6px;color:#ffd166;font-size:10px}.help{color:#afbfdb;font-size:12px;text-align:right;line-height:1.8}.health{width:190px;height:12px;background:#10172c;border-radius:8px;overflow:hidden;margin-top:6px;border:1px solid #ffffff33}.health i{display:block;height:100%;background:linear-gradient(90deg,#55e2b6,#ffd166,#ff617c);transition:.3s}.toast{position:absolute;left:50%;top:26%;transform:translateX(-50%);font:24px Bungee;color:#fff;opacity:0;text-shadow:3px 3px #0008;transition:.2s}.toast.show{opacity:1;top:22%}.turnbar{position:absolute;left:50%;transform:translateX(-50%);top:86px;width:240px;height:5px;border-radius:4px;background:#ffffff25;overflow:hidden}.turnbar i{display:block;height:100%;background:var(--pink);width:100%;transform-origin:left}.mobile{display:none}
</style></head>
<body><div id="app"><canvas id="game"></canvas>
<div id="menu" class="screen"><div class="panel"><div class="logo">WILD WORM</div><div class="tag">ARTILLERY MAYHEM • HOT SEAT BRAWL</div>
<div class="row"><div><div class="label">Battle mode</div><button class="choice active" data-mode="cpu">VS CPU</button><button class="choice" data-mode="hot">HOT-SEAT</button></div><div><div class="label">Teams</div><button class="choice active" data-teams="2">2</button><button class="choice" data-teams="3">3</button><button class="choice" data-teams="4">4</button></div></div>
<div class="row"><div><div class="label">World shape</div><button class="choice active" data-shape="island">SINGLE ISLAND</button><button class="choice" data-shape="cave">CAVE</button><button class="choice" data-shape="twins">TWO ISLANDS</button></div></div><button class="start" id="start">DROP IN!</button><div class="small" style="margin-top:17px">A/D MOVE • W / SPACE JUMP • MOUSE AIM • CLICK FIRE • 1—7 WEAPONS</div></div></div>
<div id="hud"><div class="top"><div class="badge"><div class="turn" id="turn">TEAM 1'S TURN</div><div class="small" id="activeName">MANGO • 100 HP</div><div class="health"><i id="hp"></i></div></div><div class="badge" style="text-align:center"><div class="small">WIND VECTOR</div><div class="wind" id="wind">→ 12</div></div><div class="badge"><div class="small">TURN TIME</div><div class="timer" id="timer">20</div></div></div><div class="turnbar"><i id="turnbar"></i></div><div class="toast" id="toast"></div><div class="bottom"><div class="weapons" id="weapons"></div><div class="help">A / D to scoot • W to hop<br>Mouse to aim • <b>click</b> to unleash</div></div></div></div>
<script>
const c=document.getElementById('game'),x=c.getContext('2d');let W,H,mode='cpu',teamsN=2,shape='island',state='menu',terrain=[],units=[],projectiles=[],parts=[],texts=[],clouds=[],active=0,turnLeft=20,wind=12,cam={x:0,y:0,zoom:1},shake=0,last=0,keys={},mouse={x:700,y:350,down:false},audio;
const weapons=[{n:'Bazooka',icon:'🚀',kind:'ind',power:72,r:34},{n:'Grenade',icon:'💣',kind:'ind',power:62,r:48},{n:'Cluster',icon:'✣',kind:'ind',power:42,r:29},{n:'Laser',icon:'⚡',kind:'direct',power:52,r:12},{n:'Drill',icon:'⛏',kind:'direct',power:35,r:22},{n:'Airstrike',icon:'☄',kind:'aoe',power:48,r:55},{n:'Teleport',icon:'✦',kind:'util',power:0,r:0}];let weapon=0;
function fit(){W=c.width=innerWidth;H=c.height=innerHeight}addEventListener('resize',fit);fit();
function beep(f=300,d=.06,type='sine'){try{audio??=new AudioContext;let o=audio.createOscillator(),g=audio.createGain();o.frequency.value=f;o.type=type;g.gain.setValueAtTime(.045,audio.currentTime);g.gain.exponentialRampToValueAtTime(.001,audio.currentTime+d);o.connect(g);g.connect(audio.destination);o.start();o.stop(audio.currentTime+d)}catch(e){}}
function rand(a,b){return a+Math.random()*(b-a)}function clamp(v,a,b){return Math.max(a,Math.min(b,v))}
function makeTerrain(){let n=180;terrain=[];for(let i=0;i<=n;i++){let xx=i/n;let base=shape==='cave'?H*.63+Math.sin(xx*16)*18:shape==='twins'?H*.7+Math.sin(xx*10)*20:H*.67+Math.sin(xx*8)*18;let island=shape==='twins'&&xx>.43&&xx<.57?H*.95:base; if(shape==='island'&&(xx<.06||xx>.94))island=H*.95; terrain.push(island+Math.sin(xx*29)*9+rand(-5,5))}}
function groundY(wx){let i=clamp(Math.floor(wx/W*180),0,180),a=terrain[i],b=terrain[Math.min(180,i+1)];return a+(b-a)*(wx/W*180-i)}
function spawn(){units=[];let cols=['#ff637c','#63e1c2','#ffd166','#9b82ff'];for(let t=0;t<teamsN;t++)for(let q=0;q<4;q++){let px=(t*W/teamsN+W/(teamsN*4)*(q+0.5)+rand(-25,25));if(shape==='twins'&&px>W*.43&&px<W*.57)px=t%2?W*.78:W*.22;units.push({x:px,y:groundY(px)-18,vx:0,vy:0,r:15,hp:100,team:t,name:['Mango','Noodle','Pebble','Zigzag'][q],color:cols[t],alive:true,on:false,shield:0})}active=0}
function start(){state='play';document.getElementById('menu').style.display='none';document.getElementById('hud').style.display='block';makeTerrain();spawn();wind=rand(-22,22);buildWeapons();toast('LET THE MAYHEM BEGIN');beep(440,.13,'square')}
function buildWeapons(){let el=document.getElementById('weapons');el.innerHTML=weapons.map((w,i)=>`<div class="weapon ${i===0?'sel':''}" data-w="${i}"><em class="num">${i+1}</em><b>${w.icon}</b><span>${w.n}</span></div>`).join('');el.querySelectorAll('.weapon').forEach(e=>e.onclick=()=>{weapon=+e.dataset.w;refreshWeapons();beep(500,.04)})}function refreshWeapons(){document.querySelectorAll('.weapon').forEach((e,i)=>e.classList.toggle('sel',i===weapon))}
function toast(s){let e=document.getElementById('toast');e.textContent=s;e.classList.add('show');clearTimeout(toast.t);toast.t=setTimeout(()=>e.classList.remove('show'),1400)}
function particle(px,py,col,n=12,force=3){for(let i=0;i<n;i++)parts.push({x:px,y:py,vx:rand(-force,force),vy:rand(-force*1.4,force),life:rand(.35,1),max:1,c:col,s:rand(2,6)})}
function text(px,py,s,col='#fff'){texts.push({x:px,y:py,s,col,life:1})}
function crater(px,py,r){for(let i=0;i<=180;i++){let xx=i/180*W,dy=Math.sqrt(Math.max(0,r*r-(xx-px)**2));if(Math.abs(xx-px)<r)terrain[i]=Math.max(terrain[i],py+dy)}particle(px,py,'#b78259',25,7);particle(px,py,'#f4c06a',16,5);shake=Math.max(shake,r/8);}
function damage(u,d){if(!u.alive)return;u.hp-=Math.round(d*(u.shield?0.45:1));text(u.x,u.y-30,'-'+Math.round(d),u.shield?'#65e5d0':'#ff7185');particle(u.x,u.y,u.color,10,3);if(u.hp<=0){u.alive=false;toast(u.name+' got flattened!');crater(u.x,u.y,25)}}
function explode(p){let r=p.r||35;crater(p.x,p.y,r);beep(r>45?90:170,.18,'sawtooth');for(let u of units){let d=Math.hypot(u.x-p.x,u.y-p.y);if(d<r+28)damage(u,(1-d/(r+28))*p.power)}if(p.cluster){for(let i=0;i<3;i++)setTimeout(()=>explode({x:p.x+rand(-35,35),y:p.y+rand(-25,25),r:25,power:30}),160+i*100)}p.dead=true}
function fire(){if(state!=='play'||projectiles.length)return;let u=units[active];if(!u?.alive)return;let wx=mouse.x,wy=mouse.y;let sx=u.x,sy=u.y-18;let dx=wx+cam.x-sx,dy=wy+cam.y-sy;let len=Math.hypot(dx,dy)||1;let speed=weapon===3?0:7.3; if(weapon===3){let target=units.filter(a=>a.alive&&a.team!==u.team).sort((a,b)=>Math.hypot(a.x-sx,a.y-sy)-Math.hypot(b.x-sx,b.y-sy))[0];if(target){target&&damage(target,weapons[weapon].power);particle(target.x,target.y,'#aefcff',25,8);shake=5}endTurn();return}if(weapon===6){u.x=clamp(wx+cam.x,20,W-20);u.y=groundY(u.x)-20;particle(u.x,u.y,'#8d70ff',35,5);endTurn();return}let v=speed*(.75+len/500);projectiles.push({x:sx,y:sy,vx:dx/len*v,vy:dy/len*v,r:weapons[weapon].r,power:weapons[weapon].power,cluster:weapon===2,life:5});beep(240,.09,'triangle');}
function endTurn(){projectiles=[];turnLeft=20;let tries=0;do{active=(active+1)%units.length;tries++}while((!units[active].alive||units.some(u=>u.alive&&u.team===units[active].team&&false))&&tries<units.length);wind=clamp(wind+rand(-8,8),-28,28);toast('TEAM '+(units[active].team+1)+' • '+units[active].name);}
function ai(){let u=units[active],targets=units.filter(a=>a.alive&&a.team!==u.team);if(!u||!targets.length)return;let t=targets.sort((a,b)=>{let va=(100-a.hp)+Math.abs(a.x-W/2)*.02,vb=(100-b.hp)+Math.abs(b.x-W/2)*.02;return vb-va})[0];mouse.x=t.x-cam.x+rand(-20,20);mouse.y=t.y-cam.y-120;weapon=Math.random()<.3?1:0;refreshWeapons();setTimeout(fire,700)}
function update(dt){if(state!=='play')return;let u=units[active];if(!projectiles.length){turnLeft-=dt;if(turnLeft<=0)endTurn();if(u&&(mode==='cpu'&&u.team===1)){}else{let dir=(keys.a?-1:0)+(keys.d?1:0);u.vx+=dir*.32;u.vx*=.82;if((keys.w||keys[' '])&&u.on){u.vy=-8;u.on=false;beep(520,.06)}}}for(let a of units)if(a.alive){a.vy+=.3;a.vx*=.98;a.x+=a.vx;a.y+=a.vy;a.x=clamp(a.x,14,W-14);let gy=groundY(a.x);let inWater=gy>H-78&&a.y>H-92;if(inWater){a.vy*=.82;a.vx*=.94;a.y=Math.min(a.y,H-54);a.on=false;if(a.y>H-68){a.hp-=dt*7;text(a.x,a.y-25,'SPLASH!','#65e5d0');particle(a.x,a.y,'#65e5d0',2,2)}if(a.hp<=0){a.alive=false;toast(a.name+' took a watery nap!');particle(a.x,a.y,'#65e5d0',28,5)}}else if(a.y+a.r>=gy){if(a.vy>7)damage(a,(a.vy-7)*3);a.y=gy-a.r;a.vy=0;a.on=true}else a.on=false;if(a.y>H+30){a.alive=false;damage(a,100)}}for(let p of projectiles){p.vy+=.24;p.vx+=wind*.001;p.x+=p.vx;p.y+=p.vy;p.life-=dt;for(let a of units)if(a.alive&&Math.hypot(a.x-p.x,a.y-p.y)<a.r+15){explode(p);break}if(p.y>=groundY(p.x)||p.life<0||p.x<0||p.x>W)explode(p)}projectiles=projectiles.filter(p=>!p.dead);for(let z of parts){z.vy+=.12;z.x+=z.vx;z.y+=z.vy;z.life-=dt}parts=parts.filter(z=>z.life>0);for(let z of texts){z.y-=.7;z.life-=dt}texts=texts.filter(z=>z.life>0);cam.x+=(u?u.x-W/2:0-cam.x)*.035;cam.x=clamp(cam.x,0,Math.max(0,W-W));shake*=.88;turnLeft=Math.max(0,turnLeft);document.getElementById('timer').textContent=Math.ceil(turnLeft);document.getElementById('timer').classList.toggle('danger',turnLeft<6);document.getElementById('turnbar').style.transform=`scaleX(${turnLeft/20})`;document.getElementById('turn').textContent='TEAM '+(u.team+1)+"'S TURN";document.getElementById('activeName').textContent=u.name+' • '+Math.max(0,Math.ceil(u.hp))+' HP';document.getElementById('hp').style.width=Math.max(0,u.hp)+'%';if(mode==='cpu'&&u.team===1&&!projectiles.length&&!ai.done){ai.done=true;ai()}if(u.team===0)ai.done=false}
function draw(){x.clearRect(0,0,W,H);let grad=x.createLinearGradient(0,0,0,H);grad.addColorStop(0,'#172b5b');grad.addColorStop(.62,'#3a6c9b');grad.addColorStop(1,'#ef9b78');x.fillStyle=grad;x.fillRect(0,0,W,H);x.save();x.translate(-cam.x+rand(-shake,shake),rand(-shake,shake));drawSky();x.beginPath();x.moveTo(0,H);terrain.forEach((y,i)=>x.lineTo(i/180*W,y));x.lineTo(W,H);x.closePath();x.fillStyle='#674c59';x.fill();x.strokeStyle='#f2b56d';x.lineWidth=5;x.beginPath();terrain.forEach((y,i)=>x.lineTo(i/180*W,y));x.stroke();x.fillStyle='#a26b53';for(let i=0;i<100;i++){let xx=rand(0,W),yy=rand(groundY(xx),H);x.fillRect(xx,yy,rand(1,4),rand(1,3))}x.fillStyle='#4bd1ca88';x.fillRect(-100,H-10,W+200,120);for(let a of units)if(a.alive){x.fillStyle=a.color;x.beginPath();x.arc(a.x,a.y,a.r,0,7);x.fill();x.fillStyle='#fff';x.beginPath();x.arc(a.x-5,a.y-3,3,0,7);x.arc(a.x+5,a.y-3,3,0,7);x.fill();x.fillStyle='#11233e';x.fillRect(a.x-7,a.y+6,14,3);if(a===units[active]){x.strokeStyle='#ffd166';x.lineWidth=3;x.beginPath();x.arc(a.x,a.y,21+Math.sin(Date.now()/150)*2,0,7);x.stroke()}}for(let p of projectiles){x.fillStyle='#fff1b0';x.shadowBlur=18;x.shadowColor='#ff6';x.beginPath();x.arc(p.x,p.y,6,0,7);x.fill();x.shadowBlur=0}for(let z of parts){x.globalAlpha=z.life/z.max;x.fillStyle=z.c;x.fillRect(z.x,z.y,z.s,z.s)}x.globalAlpha=1;for(let z of texts){x.globalAlpha=z.life;x.font='900 20px Nunito';x.fillStyle=z.col;x.fillText(z.s,z.x,z.y)}x.restore();if(state==='play'&&!projectiles.length){let u=units[active];x.save();x.translate(-cam.x,0);let dx=mouse.x+cam.x-u.x,dy=mouse.y-u.y,len=Math.hypot(dx,dy)||1; x.setLineDash([5,8]);x.strokeStyle='#fff8a888';x.lineWidth=2;x.beginPath();x.moveTo(u.x,u.y-18);let px=u.x,py=u.y-18,vx=dx/len*7,vy=dy/len*7;for(let i=0;i<28;i++){x.lineTo(px,py);px+=vx;py+=vy;vy+=.24;vx+=wind*.001}x.stroke();x.restore()}requestAnimationFrame(loop)}
function drawSky(){x.fillStyle='#fff1a8';x.globalAlpha=.8;for(let i=0;i<7;i++){let xx=(i*240+90)%W;x.beginPath();x.arc(xx,80+(i%2)*40,25,0,7);x.fill()}x.globalAlpha=1}
function loop(t){let dt=Math.min(.04,(t-last)/1000||.016);last=t;update(dt);draw()}
addEventListener('keydown',e=>{keys[e.key.toLowerCase()]=true;if(e.key>='1'&&e.key<='7'){weapon=+e.key-1;refreshWeapons();beep(500,.04)}if(e.key==='Enter'||e.key==='f')fire()});addEventListener('keyup',e=>keys[e.key.toLowerCase()]=false);c.addEventListener('mousemove',e=>{mouse.x=e.clientX;mouse.y=e.clientY});c.addEventListener('mousedown',()=>{mouse.down=true;fire()});c.addEventListener('mouseup',()=>mouse.down=false);
document.querySelectorAll('.choice').forEach(b=>b.onclick=()=>{let k=[...b.attributes].find(a=>a.name.startsWith('data-'));document.querySelectorAll(`[${k.name}]`).forEach(z=>z.classList.toggle('active',z===b));if(k.name==='data-mode')mode=k.value;if(k.name==='data-teams')teamsN=+k.value;if(k.name==='data-shape')shape=k.value;beep(360,.04)});document.getElementById('start').onclick=start;requestAnimationFrame(loop);
</script></body></html>
<!-- agent-meta {"model":"openai/gpt-5.6-luna-pro","provider":"openrouter","persona":"full","sessionId":"6f526e3d-2a9d-4c18-b6c3-384848ea91a2","tokensIn":246574,"tokensOut":21250,"tokensTotal":267824,"turns":7,"toolCalls":7,"failedToolCalls":0,"timestamp":"2026-07-31T00:44:10.640Z"} -->