BALLOON SHOOTER 100

<!DOCTYPE html>
<html lang="ta">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>BALLOON SHOOTER 100</title>
<style>
*{box-sizing:border-box}body{margin:0;background:#101b46;color:white;font-family:Arial;text-align:center;overflow:hidden}
#top{padding:10px;background:#101735;font-weight:bold;font-size:19px}
#menu{padding:8px;background:#182b58}
button,select{border:2px solid #fff;border-radius:10px;padding:9px;margin:4px;background:#ffca38;color:#182044;font-weight:bold;font-size:14px}
#game{display:block;width:100%;height:65vh;touch-action:none;background:#59c7e9}
#info{padding:6px;font-weight:bold;background:#17264c}
#controls{background:#17264c;padding:5px}
#levels{height:85px;overflow:auto;background:#101735;padding:5px}
#levels button{padding:7px 10px}
#message{font-size:16px;color:#ffe66b;padding:5px}
</style>
</head>
<body>
<div id="top">🎈 BALLOON SHOOTER 100 🎯</div>
<div id="menu">
<button onclick="startGame()">▶ PLAY</button>
<button onclick="choose('gents')">👨 GENTS</button>
<button onclick="choose('ladies')">👩 LADIES</button>
<select id="eyes" onchange="eyeColor=this.value">
<option value="#39e8ff">Eye 1 Blue</option><option value="#36e65b">Eye 2 Green</option>
<option value="#9b59ff">Eye 3 Purple</option><option value="#ffca28">Eye 4 Gold</option>
<option value="#ff5470">Eye 5 Red</option><option value="#ffffff">Eye 6 White</option>
<option value="#7b4a25">Eye 7 Brown</option><option value="#ff8bd1">Eye 8 Pink</option>
<option value="#00e0a0">Eye 9 Aqua</option><option value="#222222">Eye 10 Black</option>
</select>
<select id="gun" onchange="gunName=this.value">
<option>Blaster 1</option><option>Blaster 2</option><option>Blaster 3</option>
<option>Blaster 4</option><option>Blaster 5</option><option>Blaster 6</option>
<option>Blaster 7</option><option>Blaster 8</option><option>Blaster 9</option><option>Blaster 10</option>
</select>
</div>
<div id="info">LEVEL: 1 / 100 | SCORE: 0 | TARGETS: 0</div>
<canvas id="game"></canvas>
<div id="message">▶ PLAY அழுத்தி விளையாடுங்கள். பலூன்களைத் தொடுங்கள் அல்லது சுடுங்கள்!</div>
<div id="controls">
<button onclick="fire()">🔫 SHOOT</button>
<button onclick="nextLevel()">NEXT LEVEL ➜</button>
<button onclick="toggleSound()">🔊 SOUND ON/OFF</button>
</div>
<div id="levels"></div>
<script>
const c=document.getElementById('game'),ctx=c.getContext('2d');
let W,H,level=1,score=0,hits=0,need=8,balls=[],shots=[],playing=false;
let character='gents',eyeColor='#39e8ff',gunName='Blaster 1',sound=true,audio=null;
let unlocked=1,colors=['#ff416c','#ffce32','#37e8ff','#a66cff','#55ed8b','#ff8c42','#ff65db'];
function resize(){W=c.width=c.clientWidth;H=c.height=c.clientHeight}
window.addEventListener('resize',resize);resize();
function choose(v){character=v;document.getElementById('message').textContent='தேர்வு: '+(v==='gents'?'Gents':'Ladies')+' Shooter'}
function tone(f=500){if(!sound)return;try{audio=audio||new(window.AudioContext||window.webkitAudioContext)();let o=audio.createOscillator(),g=audio.createGain();o.connect(g);g.connect(audio.destination);o.frequency.value=f;g.gain.value=.07;o.start();g.gain.exponentialRampToValueAtTime(.001,audio.currentTime+.13);o.stop(audio.currentTime+.14)}catch(e){}}
function updateInfo(){document.getElementById('info').textContent=`LEVEL: ${level} / 100 | SCORE: ${score} | POPPED: ${hits} / ${need}`}
function makeBalloon(){let boss=level%10===0;return {x:35+Math.random()*(W-70),y:H+40+Math.random()*100,r:boss?36:20+Math.random()*13,spd:(boss?1.1:1.4)+Math.random()*1.5+level*.025,color:colors[Math.floor(Math.random()*colors.length)],boss}}
function startGame(){playing=true;hits=0;need=level%10===0?18:8+Math.floor(level/4);balls=[];shots=[];for(let i=0;i<7;i++)balls.push(makeBalloon());document.getElementById('message').textContent=level%10===0?'🔥 BOSS LEVEL! மிகவும் கடினம்!':'🎯 பலூன்களை உடையுங்கள்!';updateInfo();tone(650)}
function fire(){if(!playing)startGame();shots.push({x:W/2,y:H-65});tone(300)}
function nextLevel(){if(level<unlocked){level++;startGame()}else if(hits>=need&&level<100){level++;unlocked=Math.max(unlocked,level);startGame()}else{document.getElementById('message').textContent='முதலில் இந்த Level இலக்கை முடிக்கவும்!'}}
function toggleSound(){sound=!sound;document.getElementById('message').textContent=sound?'Sound ON':'Sound OFF'}
function drawBackground(){
let hue=(level*31)%360,g=ctx.createLinearGradient(0,0,0,H);
g.addColorStop(0,`hsl(${hue},65%,22%)`);g.addColorStop(.65,`hsl(${(hue+45)%360},75%,52%)`);g.addColorStop(1,'#70d9ad');ctx.fillStyle=g;ctx.fillRect(0,0,W,H);
ctx.fillStyle='rgba(255,255,255,.2)';for(let i=0;i<8;i++){let x=(i*113+level*7)%W;ctx.beginPath();ctx.arc(x,45+(i%3)*38,18,0,7);ctx.fill()}
ctx.fillStyle='#286b42';ctx.fillRect(0,H-35,W,35);
}
function drawShooter(){
let x=W/2,y=H-53;ctx.save();ctx.translate(x,y);
ctx.fillStyle=character==='gents'?'#2456b8':'#e83e9a';ctx.fillRect(-19,-35,38,38);
ctx.fillStyle='#f2bd91';ctx.beginPath();ctx.arc(0,-48,17,0,7);ctx.fill();
ctx.fillStyle=character==='gents'?'#34251e':'#3a172b';ctx.beginPath();ctx.arc(0,-55,18,Math.PI,Math.PI*2);ctx.fill();
ctx.fillStyle=eyeColor;ctx.beginPath();ctx.arc(-6,-48,3,0,7);ctx.arc(6,-48,3,0,7);ctx.fill();
ctx.fillStyle='#333';ctx.fillRect(-5,-12,10,18);
ctx.fillStyle='#222';ctx.fillRect(12,-28,30,9);ctx.fillStyle='#aaa';ctx.fillRect(35,-30,9,13);
ctx.restore();
}
function drawBall(b){
ctx.fillStyle=b.color;ctx.beginPath();ctx.ellipse(b.x,b.y,b.r*.78,b.r,0,0,7);ctx.fill();
ctx.fillStyle='rgba(255,255,255,.55)';ctx.beginPath();ctx.ellipse(b.x-b.r*.25,b.y-b.r*.35,4,8,-.4,0,7);ctx.fill();
ctx.strokeStyle='#fff';ctx.beginPath();ctx.moveTo(b.x,b.y+b.r);ctx.lineTo(b.x,b.y+b.r+15);ctx.stroke();
if(b.boss){ctx.fillStyle='#fff';ctx.font='bold 13px Arial';ctx.fillText('BOSS',b.x-17,b.y+5)}
}
function pop(b){score+=b.boss?50:10;hits++;tone(700+Math.random()*300);updateInfo();if(hits>=need){playing=false;document.getElementById('message').textContent='🏆 LEVEL '+level+' COMPLETE! NEXT LEVEL அழுத்துங்கள்.';unlocked=Math.max(unlocked,Math.min(100,level+1));}}
function frame(){
resize();drawBackground();
if(playing){
if(balls.length<8)balls.push(makeBalloon());
balls.forEach(b=>{b.y-=b.spd;if(b.y<-50){b.y=H+30;b.x=30+Math.random()*(W-60)}});
shots.forEach(s=>s.y-=9);
for(let i=shots.length-1;i>=0;i--){let s=shots[i],found=-1;for(let j=0;j<balls.length;j++){let b=balls[j];if(Math.hypot(s.x-b.x,s.y-b.y)<b.r+7){found=j;break}}if(found>=0){let b=balls[found];pop(b);balls.splice(found,1);shots.splice(i,1)}else if(s.y<0)shots.splice(i,1)}
}
balls.forEach(drawBall);
ctx.fillStyle='#fff';shots.forEach(s=>{ctx.beginPath();ctx.arc(s.x,s.y,5,0,7);ctx.fill()});
drawShooter();
if(!playing){ctx.fillStyle='rgba(0,0,0,.18)';ctx.fillRect(0,0,W,H);ctx.fillStyle='#fff';ctx.font='bold 20px Arial';ctx.textAlign='center';ctx.fillText('BALLOON SHOOTER 100',W/2,H/2)}
requestAnimationFrame(frame);
}
c.addEventListener('pointerdown',e=>{let r=c.getBoundingClientRect(),x=e.clientX-r.left,y=e.clientY-r.top;if(!playing){startGame();return}shots.push({x,y:H-65});tone(350)});
function makeLevels(){let d=document.getElementById('levels');for(let i=1;i<=100;i++){let b=document.createElement('button');b.textContent=i%10===0?'🔥'+i:i;b.onclick=()=>{if(i<=unlocked){level=i;startGame()}else document.getElementById('message').textContent='முதலில் முந்தைய Level முடிக்கவும்'};d.appendChild(b)}}
makeLevels();frame();updateInfo();
</script>
</body>
</html>