enemies.push({
x: Math.random() * (canvas.width - size),
y: -size,
width: size,
height: size,
speed: 1.5 + Math.random() * 1.5
});
}

function collision(a, b) {
return (
a.x < b.x + b.width &&
a.x + a.width > b.x &&
a.y < b.y + b.height &&
a.y + a.height > b.y
);
}

function update() {

// Stars
stars.forEach(star => {
star.y += star.speed;

if (star.y > canvas.height) {
star.y = 0;
star.x = Math.random() * canvas.width;
}
});

// Cooldown
if (shootCooldown > 0) {
shootCooldown--;
}

// Bullets
bullets.forEach(bullet => {
bullet.y -= bullet.speed;
});

bullets = bullets.filter(
bullet => bullet.y + bullet.height > 0
);

// Enemies
enemyTimer++;

if (enemyTimer > 45) {
createEnemy();
enemyTimer = 0;
}

enemies.forEach(enemy => {
enemy.y += enemy.speed;
});

// Bullet vs enemy
for (let i = enemies.length - 1; i >= 0; i--) {

let destroyed = false;

for (let j = bullets.length - 1; j >= 0; j--) {

if (collision(enemies[i], bullets[j])) {

enemies.splice(i, 1);
bullets.splice(j, 1);

score += 10;

scoreEl.textContent = score;

if (score > best) {
best = score;
bestEl.textContent = best;
localStorage.setItem(
"spaceBest",
best
);
}

destroyed = true;
break;
}
}

if (destroyed) continue;
}

// Enemy reaches bottom
for (let i = enemies.length - 1; i >= 0; i--) {

if (enemies[i].y > canvas.height) {

enemies.splice(i, 1);

lives--;

livesEl.textContent = lives;

if (lives <= 0) {
gameOver();
return;
}
}
}

// Enemy hits player
for (let i = enemies.length - 1; i >= 0; i--) {

if (collision(enemies[i], player)) {

enemies.splice(i, 1);

lives--;

livesEl.textContent = lives;

if (lives <= 0) {
gameOver();
return;
}
}
}
}

function draw() {

ctx.fillStyle = "#02050d";
ctx.fillRect(0, 0, canvas.width, canvas.height);

// Stars
stars.forEach(star => {
ctx.fillStyle = "white";
ctx.fillRect(
star.x,
star.y,
star.size,
star.size
);
});

// Player
ctx.fillStyle = "#00eaff";

ctx.beginPath();
ctx.moveTo(
player.x + player.width / 2,
player.y
);
ctx.lineTo(
player.x,
player.y + player.height
);
ctx.lineTo(
player.x + player.width,
player.y + player.height
);
ctx.closePath();
ctx.fill();

// Bullets
bullets.forEach(bullet => {

ctx.fillStyle = "#ffe600";

ctx.fillRect(
bullet.x,
bullet.y,
bullet.width,
bullet.height
);
});

// Enemies
enemies.forEach(enemy => {

ctx.fillStyle = "#ff315c";

ctx.beginPath();
ctx.moveTo(
enemy.x + enemy.width / 2,
enemy.y + enemy.height
);
ctx.lineTo(
enemy.x,
enemy.y
);
ctx.lineTo(
enemy.x + enemy.width,
enemy.y
);
ctx.closePath();
ctx.fill();

ctx.fillStyle = "#ffffff";

ctx.fillRect(
enemy.x + 8,
enemy.y + 9,
5,
5
);

ctx.fillRect(
enemy.x + 17,
enemy.y + 9,
5,
5
);
});
}

function gameLoop() {

if (!running) return;

update();
draw();

animationId =
requestAnimationFrame(gameLoop);
}

function gameOver() {

running = false;

cancelAnimationFrame(animationId);

messageEl.textContent =
"💥 GAME OVER! Final Score: " + score;

startBtn.textContent = "🚀 Play Again";

draw();
}

startBtn.addEventListener(
"click",
startGame
);

// Keyboard controls
document.addEventListener(
"keydown",
event => {

if (event.key === "ArrowLeft") {
moveLeft();
}

if (event.key === "ArrowRight") {
moveRight();
}

if (event.code === "Space") {
event.preventDefault();
shoot();
}
}
);

// Initial screen
player = {
x: canvas.width / 2 - 18,
y: canvas.height - 60,
width: 36,
height: 28,
speed: 6
};

createStars();
draw();
</script>

</body>
</html>

🚀🔥 DAY 6 — SPACE SHOOTER! 👾

The ultimate space battle is here! 🌌

🚀 Control your spaceship
🔥 Shoot enemy ships
🏆 Increase your score
❤️ 3 Lives
💾 Best Score Saved
📱 Mobile Controls
⌨️ Keyboard Controls

🎮 PLAY THE GAME:
👇
[https://anadverma956989936-lab.github.io/Code2Game-Runner/]

🏆 CHALLENGE:
How high can you score before losing all 3 lives? 😈

💬 Apna highest score batao!

❤️ Like | 🔄 Share | 📢 Forward

⚡ CodeForge Gaming Community

#Day6 #SpaceShooter #HTML #CSS #JavaScript #GameCoding

🚨🔥 BIG UPDATE — CODE RUNNER 2.0 IS LIVE! 🔥🚨

Ab coding karna aur bhi EASY! 😎💻

🎮 Game banao
🌐 Website banao
⚡ HTML + CSS + JS code run karo
⛶ Full Screen me chalao
💾 Project Save karo
📂 Project Load karo
⬇️ Apna project Download karo

Sab kuch ek hi jagah! 🚀

👇 TRY NOW — FREE CODE RUNNER 👇

🔗 https://anadverma956989936-lab.github.io/Code2Game-/

💡 Code Paste Karo → RUN Dabao → Apna Project Live Dekho! 🔥

👨‍💻 Beginners ke liye bhi Easy!

❤️ Like/React karo
📤 Apne coding friends ke saath Share karo
🔥 Aur aise hi HTML Games & Projects ke liye Channel Join rakho!

#Coding #HTML #CSS #JavaScript #GameDevelopment #WebDevelopment #CodeRunner #HTMLGames #CodingProjects

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ultimate Mini Game</title>

<style>
*{
box-sizing:border-box;
}

body{
margin:0;
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
font-family:Arial,sans-serif;
background:#050816;
color:white;
}

.game{
width:94%;
max-width:450px;
padding:22px;
text-align:center;
border-radius:25px;
background:#10182d;
box-shadow:0 0 35px #00eaff55;
}

h1{
margin:0 0 5px;
color:#00eaff;
}

.subtitle{
color:#aaa;
margin-top:5px;
}

.stats{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:8px;
margin:20px 0;
}

.stat{
padding:10px 5px;
border-radius:12px;
background:#192541;
font-size:13px;
}

.stat b{
display:block;
margin-top:5px;
color:#00eaff;
font-size:21px;
}

#arena{
position:relative;
width:100%;
height:360px;
overflow:hidden;
border:2px solid #00eaff;
border-radius:18px;
background:
radial-gradient(circle at 20% 20%,#12315c 0 2px,transparent 3px),
radial-gradient(circle at 80% 70%,#12315c 0 2px,transparent 3px),
#050a18;
}

#target{
position:absolute;
width:65px;
height:65px;
display:none;
justify-content:center;
align-items:center;
border:0;
border-radius:50%;
background:#ff315c;
color:white;
font-size:25px;
cursor:pointer;
box-shadow:0 0 25px #ff315c88;
animation:pulse .7s infinite alternate;
}

@keyframes pulse{
from{transform:scale(.9);}
to{transform:scale(1.08);}
}

.message{
min-height:25px;
margin:14px 0;
color:#ddd;
}

button.start{
padding:12px 28px;
border:0;
border-radius:25px;
background:#00eaff;
color:#061018;
font-size:16px;
font-weight:bold;
cursor:pointer;
}

button.start:disabled{
opacity:.5;
cursor:not-allowed;
}

.small{
color:#777;
font-size:12px;
}
</style>
</head>

<body>

<div class="game">

<h1>🏆 ULTIMATE MINI GAME</h1>

<p class="subtitle">
Hit the target before time runs out!
</p>

<div class="stats">

<div class="stat">
SCORE
<b id="score">0</b>
</div>

<div class="stat">
TIME
<b id="time">30</b>
</div>

<div class="stat">
BEST
<b id="best">0</b>
</div>

</div>

<div id="arena">

<button id="target">
🎯
</button>

</div>

<div id="message" class="message">
Ready for the ultimate challenge?
</div>

<button id="startBtn" class="start">
🚀 START GAME
</button>

<p class="small">
Hit 🎯 as many times as possible in 30 seconds!
</p>

</div>

<script>

const arena =
document.getElementById("arena");

const target =
document.getElementById("target");

const scoreEl =
document.getElementById("score");

const timeEl =
document.getElementById("time");

const bestEl =
document.getElementById("best");

const messageEl =
document.getElementById("message");

const startBtn =
document.getElementById("startBtn");


let score = 0;
let time = 30;
let playing = false;
let timer = null;

let best =
Number(localStorage.getItem("ultimateBest")) || 0;

bestEl.textContent = best;


function moveTarget(){

const maxX =
arena.clientWidth - target.offsetWidth;

const maxY =
arena.clientHeight - target.offsetHeight;

const x =
Math.random() * maxX;

const y =
Math.random() * maxY;

target.style.left = x + "px";
target.style.top = y + "px";
}


function startGame(){

clearInterval(timer);

score = 0;
time = 30;
playing = true;

scoreEl.textContent = score;
timeEl.textContent = time;

target.style.display = "flex";

startBtn.disabled = true;

messageEl.textContent =
"🔥 GO! Hit the target!";

moveTarget();


timer = setInterval(() => {

time--;

timeEl.textContent = time;

if(time <= 0){

endGame();

}

},1000);

}


target.addEventListener("click", () => {

if(!playing) return;

score++;

scoreEl.textContent = score;

moveTarget();

});


function endGame(){

clearInterval(timer);

playing = false;

target.style.display = "none";

startBtn.disabled = false;

startBtn.textContent =
"🔄 PLAY AGAIN";


if(score > best){

best = score;

localStorage.setItem(
"ultimateBest",
best
);

bestEl.textContent = best;

messageEl.textContent =
"🏆 NEW HIGH SCORE! " +
score +
" hits!";

}else{

messageEl.textContent =
"🎮 TIME UP! Your score: " +
score;

}

}


startBtn.addEventListener(
"click",
startGame
);

</script>

</body>
</html>

🏆🔥 DAY 7 — ULTIMATE MINI GAME! 🎮

THE FINAL CHALLENGE IS HERE! 🚀

🎯 Hit the target
⏱️ 30 Second Challenge
🏆 Beat your HIGH SCORE
📱 Mobile Friendly
⚡ Fast & Addictive Gameplay
💻 HTML + CSS + JavaScript

🎮 PLAY THE GAME:
👇
[https://anadverma956989936-lab.github.io/Code2Game-/]

🔥 FINAL CHALLENGE:
How many targets can YOU hit in 30 seconds? 😈

💬 Apna highest score batao!

❤️ Like | 🔄 Share | 📢 Forward

⚡ CodeForge Gaming Community

#Day7 #UltimateGame #HTML #CSS #JavaScript #GameCoding

🎉🔥 7-DAY HTML GAME CODING SERIES — COMPLETED! 🏆

7 Days ✅
7 Games 🎮
Hundreds of lines of code 💻
And now… WE LEVEL UP! 🚀

🧠 From simple games to advanced projects!

🔥 NEXT SERIES: ADVANCED HTML GAMES
🏎️ Car Racing
🧱 Brick Breaker
🏃 Endless Runner
👾 Alien Attack
🏆 Mega Game
Stay connected… The next level starts soon! ⚡

❤️ Like | 🔄 Share | 📢 Forward
CodeForge Gaming Community

#HTML #JavaScript #GameDevelopment #Coding #WebGames

🇮🇳✨ THIS INDEPENDENCE DAY, DON'T JUST CELEBRATE… EXPERIENCE IT. ✨🇮🇳

🚨 FREEDOM FEST 2047 IS LIVE! 🚨

🎙️ Apni VOICE share karo
✍️ Apni STORY likho
📸 Apni MEMORIES upload karo
❤️ Likes collect karo
🏆 TOP CREATOR bano
🎁 Aur jeeto SPECIAL REWARDS!

👀 But wait…
Ye koi normal website nahi hai.

🔥 Ek poora Independence Day experience tumhara wait kar raha hai.

👇 OPEN IT NOW & SEE WHAT'S WAITING FOR YOU 👇

🔗 [https://anadverma956989936-lab.github.io/Freedom-fest-/]

⚡ OPEN • EXPLORE • PARTICIPATE • WIN

🇮🇳 YOUR VOICE • YOUR STORY • YOUR INDIA 🇮🇳

JAI HIND ❤️🇮🇳

🔥 ANAND HUB — INDIA 2047 SECRET MISSION 🇮🇳

🛰️ Code Copy Karo → Run Karo → Mission Start Karo!

⚡ Login karo
🧠 Questions solve karo
🔐 Secret levels unlock karo
🎯 Missions complete karo
🏆 Apna final rank discover karo

👀 Normal code nahi hai… ek baar run karke dekho!

👇 HOW TO PLAY:
📋 Code Copy Karo
▶️ Run/Preview Karo
🚀 Mission Start Karo

ANAND HUB × INDIA 2047 🇮🇳🔥

⚠️ Challenge: Kya tum final level tak pahunch paoge? 😈

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="theme-color" content="#030712">
<title>ANAND HUB — INDIA 2047</title>

<style>
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:#02050b;color:#fff}
body{overflow-x:hidden}
button,input{font:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}

:root{
--orange:#ff9933;
--green:#19b83f;
--cyan:#48e8ff;
--blue:#3478ff;
--red:#ff4260;
--glass:rgba(255,255,255,.055);
--line:rgba(255,255,255,.13);
}

#app{
min-height:100vh;
position:relative;
overflow:hidden;
background:
radial-gradient(circle at 50% -10%,rgba(255,153,51,.22),transparent 30%),
radial-gradient(circle at 0 70%,rgba(19,136,8,.15),transparent 28%),
radial-gradient(circle at 100% 45%,rgba(72,232,255,.12),transparent 28%),
linear-gradient(180deg,#02050b,#050b14 50%,#02050a);
}

canvas#space{
position:fixed;
inset:0;
width:100%;
height:100%;
pointer-events:none;
z-index:0;
}

.grid{
position:fixed;
inset:0;
z-index:0;
pointer-events:none;
opacity:.15;
background-image:
linear-gradient(rgba(72,232,255,.12) 1px,transparent 1px),
linear-gradient(90deg,rgba(72,232,255,.12) 1px,transparent 1px);
background-size:45px 45px;
transform:perspective(500px) rotateX(55deg) scale(1.8) translateY(25%);
transform-origin:center bottom;
}

.screen{
position:relative;
z-index:2;
min-height:100vh;
display:none;
align-items:center;
justify-content:center;
padding:20px;
}

.screen.active{display:flex}

.panel{
width:min(94%,760px);
border:1px solid var(--line);
border-radius:28px;
background:rgba(5,12,22,.78);
backdrop-filter:blur(18px);
box-shadow:0 30px 100px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.06);
}

.login{
padding:30px 20px;
text-align:center;
}

.logo{
font-size:13px;
font-weight:1000;
letter-spacing:4px;
color:var(--cyan);
}

.tricolor{
width:130px;
height:4px;
margin:15px auto;
display:flex;
border-radius:10px;
overflow:hidden;
}
.tricolor i{flex:1}
.tricolor i:nth-child(1){background:var(--orange)}
.tricolor i:nth-child(2){background:#fff}
.tricolor i:nth-child(3){background:var(--green)}

.login h1{
margin:12px 0 4px;
font-size:clamp(42px,12vw,78px);
line-height:.9;
letter-spacing:-4px;
background:linear-gradient(#ffb15b 15%,#fff 48%,#4bc75a 85%);
-webkit-background-clip:text;
color:transparent;
}

.sub{
color:#7e91a7;
font-size:9px;
letter-spacing:3px;
line-height:1.8;
}

.terminal{
margin:24px auto 16px;
padding:13px;
width:min(100%,500px);
text-align:left;
border:1px solid rgba(72,232,255,.18);
border-radius:14px;
background:#01050a;
color:#63eaff;
font-family:monospace;
font-size:9px;
line-height:1.8;
min-height:100px;
}

.input{
width:100%;
padding:14px;
border:1px solid rgba(255,255,255,.12);
border-radius:12px;
background:#02070d;
color:#fff;
outline:none;
margin-top:8px;
}

.input:focus{border-color:var(--cyan)}

.btn{
width:100%;
border:1px solid rgba(255,255,255,.12);
border-radius:13px;
padding:14px;
margin-top:9px;
color:#fff;
background:rgba(255,255,255,.06);
font-weight:1000;
transition:.2s;
}
.btn:hover{transform:translateY(-2px)}
.btn.primary{
color:#041016;
background:linear-gradient(90deg,var(--orange),#fff,var(--green));
}
.btn.cyan{
background:linear-gradient(135deg,#0b6c86,#163d83);
border-color:#43ddff66;
}

.boot{
padding:28px 20px;
text-align:center;
}

.boot h2{
font-size:27px;
letter-spacing:2px;
}

.loader{
height:6px;
border-radius:10px;
background:#101b27;
overflow:hidden;
margin:20px 0 10px;
}

.loader span{
display:block;
height:100%;
width:0;
background:linear-gradient(90deg,var(--orange),#fff,var(--green),var(--cyan));
animation:load 3s linear forwards;
}

@keyframes load{to{width:100%}}

.bootLog{
min-height:100px;
color:#73eaff;
font:9px monospace;
line-height:1.8;
text-align:left;
}

#command{
width:min(96%,1000px);
margin:auto;
padding:18px 0 40px;
}

.topbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:15px 0;
}

.brand{
font-weight:1000;
letter-spacing:2px;
font-size:12px;
}
.brand span{color:var(--cyan)}

.rank{
text-align:right;
}
.rank small{
display:block;
color:#65788e;
font-size:7px;
}
.rank b{font-size:12px;color:#ffb45e}

.hero{
border:1px solid var(--line);
border-radius:25px;
padding:24px 16px;
text-align:center;
background:
radial-gradient(circle at 50% 0,rgba(72,232,255,.13),transparent 45%),
rgba(255,255,255,.035);
overflow:hidden;
}

.heroFlag{
font-size:50px;
animation:float 2.5s infinite ease-in-out;
}
@keyframes float{50%{transform:translateY(-6px)}}

.hero h1{
margin:7px 0;
font-size:clamp(30px,8vw,58px);
background:linear-gradient(90deg,var(--orange),#fff,var(--green));
-webkit-background-clip:text;
color:transparent;
}

.hero p{
color:#8293a7;
font-size:9px;
line-height:1.8;
max-width:600px;
margin:auto;
}

.xpbar{
margin:18px auto 5px;
height:8px;
max-width:600px;
background:#0b1520;
border-radius:20px;
overflow:hidden;
}
.xpbar span{
display:block;
height:100%;
width:0;
background:linear-gradient(90deg,var(--orange),var(--cyan),var(--green));
transition:.5s;
}

.xptext{
color:#65788e;
font-size:8px;
}

.stats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px;
margin-top:15px;
}

.stat{
padding:12px 5px;
border:1px solid rgba(255,255,255,.1);
border-radius:14px;
background:rgba(255,255,255,.035);
}
.stat b{
display:block;
font-size:20px;
}
.stat small{
color:#718297;
font-size:6px;
letter-spacing:1px;
}

.layout{
display:grid;
grid-template-columns:1.35fr .65fr;
gap:12px;
margin-top:12px;
}

.card{
border:1px solid var(--line);
border-radius:20px;
padding:16px;
background:rgba(255,255,255,.04);
}

.card h3{
margin:0 0 5px;
font-size:13px;
}
.card p{
color:#71849a;
font-size:8px;
line-height:1.7;
}

.mission{
margin-top:10px;
padding:14px;
border:1px solid rgba(255,255,255,.09);
border-radius:15px;
background:rgba(0,0,0,.2);
}
.missionTop{
display:flex;
justify-content:space-between;
gap:8px;
}
.missionTop b{font-size:10px}
.missionTop span{
color:#ffb15b;
font-size:7px;
}
.mission p{
margin:8px 0;
color:#c8d3df;
font-size:9px;
}

.options{
display:grid;
gap:7px;
}
.option{
width:100%;
text-align:left;
padding:11px;
border:1px solid rgba(255,255,255,.1);
border-radius:11px;
background:rgba(255,255,255,.035);
color:#dce6ef;
font-size:8px;
font-weight:bold;
}
.option:hover{
border-color:#48e8ff66;
background:rgba(72,232,255,.07);
}
.option.good{border-color:#2ee36a}
.option.bad{
border-color:#ff4260;
animation:shake .28s linear;
}
@keyframes shake{
25%{transform:translateX(-5px)}
50%{transform:translateX(5px)}
75%{transform:translateX(-4px)}
}

.achievement{
display:flex;
align-items:center;
gap:9px;
padding:9px;
border:1px solid rgba(255,255,255,.08);
border-radius:11px;
margin-top:7px;
opacity:.35;
}
.achievement.unlocked{
opacity:1;
background:rgba(255,153,51,.06);
border-color:#ff993355;
}
.achievementIcon{font-size:18px}
.achievement b{font-size:8px}
.achievement small{
display:block;
color:#687b90;
font-size:6px;
margin-top:2px;
}

.secret{
margin-top:12px;
border:1px solid #48e8ff33;
background:rgba(72,232,255,.035);
}

.secret input{
margin-top:8px;
}

.hiddenRoom{
display:none;
margin-top:10px;
padding:14px;
border:1px solid #ff993355;
border-radius:14px;
background:rgba(255,153,51,.05);
}
.hiddenRoom.show{display:block}
.hiddenRoom h4{
margin:0 0 7px;
color:#ffb15b;
}
.hiddenRoom p{
color:#9aabbc;
}

.shareCard{
margin-top:12px;
text-align:center;
}
.vision{
padding:18px;
border-radius:17px;
background:
linear-gradient(135deg,rgba(255,153,51,.10),rgba(255,255,255,.04),rgba(19,136,8,.10));
border:1px solid rgba(255,255,255,.12);
}
.vision .big{
font-size:28px;
font-weight:1000;
}
.vision h3{
font-size:17px;
margin:7px 0;
}
.vision p{
margin:4px;
}

.restart{
margin-top:10px;
}

.toast{
position:fixed;
z-index:999;
left:50%;
bottom:20px;
transform:translate(-50%,120px);
opacity:0;
padding:12px 17px;
border-radius:999px;
border:1px solid rgba(255,255,255,.14);
background:rgba(5,12,20,.94);
backdrop-filter:blur(12px);
font-size:9px;
transition:.3s;
pointer-events:none;
}
.toast.show{
opacity:1;
transform:translate(-50%,0);
}

footer{
text-align:center;
color:#52667c;
font-size:7px;
padding:20px;
letter-spacing:2px;
}

@media(max-width:700px){
.layout{grid-template-columns:1fr}
.stats{grid-template-columns:repeat(2,1fr)}
.topbar{padding-left:5px;padding-right:5px}
}
</style>
</head>

<body>

<canvas id="space"></canvas>
<div class="grid"></div>

<div id="app">

<!-- LOGIN -->
<section id="loginScreen" class="screen active">
<div class="panel login">

<div class="logo">ANAND HUB // CLASSIFIED SYSTEM</div>

<div class="tricolor"><i></i><i></i><i></i></div>

<h1>INDIA 2047</h1>

<div class="sub">
THE FUTURE IS NOT WAITING.<br>
YOU ARE ABOUT TO BUILD IT.
</div>

<div class="terminal" id="terminal">
&gt; SYSTEM: READY<br>
&gt; SECURITY: ACTIVE<br>
&gt; FUTURE CORE: LOCKED<br>
&gt; ENTER CREATOR ID TO BEGIN...
</div>

<input
id="creatorName"
class="input"
maxlength="25"
placeholder="Enter your creator name"
autocomplete="off"
>

<button class="btn primary" onclick="startMission()">
🚀 ENTER COMMAND CENTER
</button>

<button class="btn" onclick="resumeMission()">
🔄 RESUME SAVED MISSION
</button>

</div>
</section>


<!-- BOOT -->
<section id="bootScreen" class="screen">
<div class="panel boot">

<div class="logo">ANAND HUB // BOOT SEQUENCE</div>

<h2>SYSTEM INITIALIZING...</h2>

<div class="bootLog" id="bootLog"></div>

<div class="loader">
<span></span>
</div>

<div class="sub">CONNECTING TO INDIA 2047 FUTURE CORE</div>

</div>
</section>


<!-- COMMAND CENTER -->
<main id="command" style="display:none">

<div class="topbar">

<div class="brand">
🇮🇳 ANAND <span>HUB</span>
</div>

<div class="rank">
<small>CREATOR RANK</small>
<b id="rankName">ROOKIE</b>
</div>

</div>


<section class="hero">

<div class="heroFlag">🇮🇳</div>

<h1>INDIA 2047</h1>

<p>
Welcome, <b id="playerName">Creator</b>.
Your decisions will shape your digital future profile.
</p>

<div class="xpbar">
<span id="xpFill"></span>
</div>

<div class="xptext" id="xpText">
LEVEL 1 • 0 XP
</div>

<div class="stats">

<div class="stat">
<b id="tech">0</b>
<small>TECH</small>
</div>

<div class="stat">
<b id="vision">0</b>
<small>VISION</small>
</div>

<div class="stat">
<b id="leadership">0</b>
<small>LEADERSHIP</small>
</div>

<div class="stat">
<b id="creativity">0</b>
<small>CREATIVITY</small>
</div>

</div>

</section>


<div class="layout">

<section class="card">

<h3>🛰️ ACTIVE MISSION</h3>

<p>
Choose carefully. Different decisions change your
final 2047 profile.
</p>

<div id="missionArea"></div>

</section>


<aside>

<section class="card">

<h3>🏆 ACHIEVEMENTS</h3>

<div id="achievements"></div>

</section>


<section class="card secret">

<h3>🔐 SECRET ACCESS</h3>

<p>
Hidden protocols detected. Enter a code.
</p>

<input
id="secretCode"
class="input"
placeholder="ENTER CODE"
autocomplete="off"
>

<button class="btn cyan" onclick="unlockSecret()">
UNLOCK
</button>

<div id="hiddenRoom" class="hiddenRoom">

<h4>⚡ SECRET ROOM UNLOCKED</h4>

<p>
You found an ANAND HUB hidden protocol.
Future Creator Badge acquired.
</p>

<button class="btn primary" onclick="miniPuzzle()">
🧩 START SECRET PUZZLE
</button>

</div>

</section>

</aside>

</div>


<section class="card shareCard">

<h3>🌌 YOUR 2047 VISION</h3>

<div class="vision">

<div class="big" id="finalRank">ROOKIE</div>

<h3 id="visionTitle">Future Creator</h3>

<p id="visionSummary">
Complete missions to generate your profile.
</p>

<p>
⚡ <b id="finalXP">0 XP</b>
</p>

</div>

<button class="btn primary" onclick="shareVision()">
📲 SHARE MY 2047 PROFILE
</button>

<button class="btn restart" onclick="resetMission()">
🔄 RESET & START AGAIN
</button>

</section>


<footer>
ANAND HUB • INDIA 2047 FUTURE CORE • MADE WITH 🇮🇳
</footer>

</main>

<div id="toast" class="toast"></div>

<script>
/* =========================================================
SAFE STATE
========================================================= */

var state={
name:"",
mission:0,
xp:0,
tech:0,
vision:0,
leadership:0,
creativity:0,
achievements:[],
finished:false
};

var missions=[
{
title:"MISSION 01 — THE FIRST MOVE",
question:"2047 mein India ko sabse pehle kis direction mein push karoge?",
options:[
{text:"🤖 AI & advanced technology",stats:{tech:10,vision:4},xp:20},
{text:"🌳 Green cities & clean energy",stats:{vision:10,creativity:4},xp:20},
{text:"🎓 Future education for everyone",stats:{leadership:8,vision:7},xp:20}
]
},
{
title:"MISSION 02 — SMART INDIA",
question:"Ek new smart city design karni hai. Priority kya hogi?",
options:[
{text:"🏙️ AI-powered infrastructure",stats:{tech:9,vision:5},xp:20},
{text:"🌱 Zero-pollution ecosystem",stats:{creativity:8,vision:7},xp:20},
{text:"👨‍👩‍👧 People-first public services",stats:{leadership:10,vision:3},xp:20}
]
},
{
title:"MISSION 03 — SPACE FRONTIER",
question:"India ka next giant space mission kya hona chahiye?",
options:[
{text:"🌕 Permanent lunar research base",stats:{vision:10,tech:8},xp:25},
{text:"🔴 Mars exploration program",stats:{tech:10,creativity:6},xp:25},
{text:"🛰️ Earth protection satellite network",stats:{leadership:8,vision:8},xp:25}
]
},
{
title:"MISSION 04 — EDUCATION 2047",
question:"Future classroom mein sabse powerful tool kya hoga?",
options:[
{text:"🧠 Personal AI tutor",stats:{tech:9,creativity:5},xp:20},
{text:"🥽 VR world classrooms",stats:{creativity:10,tech:5},xp:20},
{text:"🌍 Global collaborative learning",stats:{leadership:9,vision:5},xp:20}
]
},
{
title:"MISSION 05 — DIGITAL INDIA",
question:"Har citizen ko better digital future dene ke liye?",
options:[
{text:"🔐 Strong digital security",stats:{tech:8,leadership:8},xp:25},
{text:"📡 Internet everywhere",stats:{vision:9,leadership:6},xp:25},
{text:"💡 Free digital learning ecosystem",stats:{creativity:7,vision:9},xp:25}
]
},
{
title:"MISSION 06 — THE CRISIS",
question:"A sudden nationwide crisis appears. Your first move?",
options:[
{text:"⚡ Build an emergency tech network",stats:{tech:8,leadership:9},xp:25},
{text:"🤝 Unite local communities",stats:{leadership:12,vision:3},xp:25},
{text:"🧠 Analyze the problem before acting",stats:{tech:5,creativity:10},xp:25}
]
},
{
title:"MISSION 07 — FUTURE GAMING",
question:"Indian gaming industry ko world leader kaise banaoge?",
options:[
{text:"🎮 Build original global IPs",stats:{creativity:11,tech:4},xp:25},
{text:"🥽 Invest in AR/VR gaming",stats:{tech:9,creativity:7},xp:25},
{text:"🏆 Create massive esports ecosystem",stats:{leadership:8,creativity:8},xp:25}
]
},
{
title:"MISSION 08 — CLEAN ENERGY",
question:"India ka future energy system?",
options:[
{text:"☀️ Massive solar network",stats:{vision:10,creativity:4},xp:25},
{text:"⚛️ Advanced nuclear technology",stats:{tech:10,vision:5},xp:25},
{text:"🌊 Multiple clean-energy sources",stats:{vision:8,leadership:6},xp:25}
]
},
{
title:"MISSION 09 — GLOBAL INDIA",
question:"India ko global stage par strongest advantage kya dega?",
options:[
{text:"💻 Technology leadership",stats:{tech:11,vision:4},xp:25},

{text:"🤝 International partnerships",stats:{leadership:11,vision:4},xp:25},
{text:"🎨 Culture + creativity",stats:{creativity:11,vision:4},xp:25}
]
},
{
title:"MISSION 10 — FINAL DECISION",
question:"Aapko ek single 2047 promise choose karna hai.",
options:[
{text:"🚀 India will lead the future",stats:{tech:8,vision:10},xp:35},
{text:"🇮🇳 India will empower every citizen",stats:{leadership:12,vision:7},xp:35},
{text:"✨ India will create what nobody imagined",stats:{creativity:12,tech:7},xp:35}
]
}
];

var achievements=[
["🚀","FIRST LAUNCH","Complete your first mission."],
["⚡","XP HUNTER","Reach 100 XP."],
["🧠","STRATEGIST","Complete 5 missions."],
["🌌","FUTURE THINKER","Complete all missions."],
["🤖","TECH MASTER","Reach 30 Tech."],
["🎨","CREATIVE CORE","Reach 30 Creativity."],
["👑","LEADER","Reach 30 Leadership."],
["🔭","VISIONARY","Reach 30 Vision."],
["🔐","SECRET AGENT","Unlock a secret room."],
["🏆","LEGEND","Reach the highest rank."]
];


/* =========================================================
DOM HELPERS
========================================================= */

function el(id){
return document.getElementById(id);
}

function show(id){
el(id).classList.add("active");
}

function hide(id){
el(id).classList.remove("active");
}

function toast(message){
var t=el("toast");
t.textContent=message;
t.classList.add("show");

setTimeout(function(){
t.classList.remove("show");
},1800);
}

function vibrate(pattern){
if(navigator.vibrate){
try{navigator.vibrate(pattern);}catch(e){}
}
}


/* =========================================================
PARTICLES
========================================================= */

var canvas=el("space");
var ctx=canvas.getContext("2d");
var particles=[];

function resizeCanvas(){
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
}

function createParticles(){
particles=[];

var count=Math.min(100,Math.max(35,Math.floor(window.innerWidth/6)));

for(var i=0;i<count;i++){
particles.push({
x:Math.random()*canvas.width,
y:Math.random()*canvas.height,
r:Math.random()*1.8+.3,
dx:(Math.random()-.5)*.25,
dy:(Math.random()-.5)*.25,
a:Math.random()
});
}
}

function animateParticles(){
ctx.clearRect(0,0,canvas.width,canvas.height);

for(var i=0;i<particles.length;i++){
var p=particles[i];

p.x+=p.dx;
p.y+=p.dy;

if(p.x<0)p.x=canvas.width;
if(p.x>canvas.width)p.x=0;
if(p.y<0)p.y=canvas.height;
if(p.y>canvas.height)p.y=0;

ctx.beginPath();
ctx.arc(p.x,p.y,p.r,0,Math.PI*2);
ctx.fillStyle="rgba(100,220,255,"+p.a+")";
ctx.fill();
}

requestAnimationFrame(animateParticles);
}

window.addEventListener("resize",function(){
resizeCanvas();
createParticles();
});

resizeCanvas();
createParticles();
animateParticles();


/* =========================================================
CLICK PARTICLE BURST
========================================================= */

document.addEventListener("click",function(e){

for(var i=0;i<8;i++){

var s=document.createElement("span");

s.style.position="fixed";
s.style.left=e.clientX+"px";
s.style.top=e.clientY+"px";
s.style.width="4px";
s.style.height="4px";
s.style.borderRadius="50%";
s.style.background=i%3===0?"#ff9933":i%3===1?"#fff":"#19b83f";
s.style.pointerEvents="none";
s.style.zIndex="5000";

document.body.appendChild(s);

var angle=Math.random()*Math.PI*2;
var distance=25+Math.random()*45;

s.animate([
{transform:"translate(0,0) scale(1)",opacity:1},
{
transform:"translate("+
Math.cos(angle)*distance+"px,"+
Math.sin(angle)*distance+"px) scale(0)",
opacity:0
}
],{
duration:500,
easing:"ease-out"
});

setTimeout(function(node){
return function(){
if(node.parentNode)node.parentNode.removeChild(node);
};
}(s),520);
}
});


/* =========================================================
LOGIN / BOOT
========================================================= */

function startMission(){

var name=el("creatorName").value.trim();