๐ŸŽฎ HTML GAME CODING HUB ๐Ÿ’ป๐Ÿ”ฅ
@HTMLGameCoding
5 subscribers
15 photos
5 files
19 links
๐ŸŽฎ HTML GAME CODING HUB ๐Ÿ’ป๐Ÿ”ฅ

Welcome to the ultimate place for HTML, CSS & JavaScript Game Development! ๐Ÿš€
Download Telegram
About
Blog
Apps
Platform
Join
๐ŸŽฎ HTML GAME CODING HUB ๐Ÿ’ป๐Ÿ”ฅ
5 subscribers
๐ŸŽฎ HTML GAME CODING HUB ๐Ÿ’ป๐Ÿ”ฅ
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>
2 views
๐ŸŽฎ HTML GAME CODING HUB ๐Ÿ’ป๐Ÿ”ฅ
๐Ÿ†๐Ÿ”ฅ 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
โค1
3 views
๐ŸŽฎ HTML GAME CODING HUB ๐Ÿ’ป๐Ÿ”ฅ
โค1
3 views
๐ŸŽฎ HTML GAME CODING HUB ๐Ÿ’ป๐Ÿ”ฅ
๐ŸŽ‰๐Ÿ”ฅ 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
โค1
4 views
๐ŸŽฎ HTML GAME CODING HUB ๐Ÿ’ป๐Ÿ”ฅ
๐ŸŽฎ HTML GAME CODING HUB ๐Ÿ’ป๐Ÿ”ฅ pinned ยซ๐Ÿš€๐Ÿ”ฅ NEW HTML PROJECT DROPPING! ๐Ÿ”ฅ๐Ÿš€ Aaj ka project sirf HTML code nahi hai... Ye ek ๐Ÿ”ฅ INTERACTIVE WEB GAME hai! ๐ŸŽฎ ๐Ÿ’ป HTML + CSS + JavaScript โšก Mobile Friendly ๐ŸŽจ Attractive UI ๐Ÿง  Beginner Friendly ๐Ÿ“ฆ Full Source Code FREE ๐Ÿ‘€ Pehle DEMO dekho... ๐Ÿ‘‡ Code next messageโ€ฆยป
๐ŸŽฎ HTML GAME CODING HUB ๐Ÿ’ป๐Ÿ”ฅ
๐Ÿ‡ฎ๐Ÿ‡ณโœจ 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 โค๏ธ๐Ÿ‡ฎ๐Ÿ‡ณ
โค1
2 views
๐ŸŽฎ HTML GAME CODING HUB ๐Ÿ’ป๐Ÿ”ฅ
โค1
2 views
๐ŸŽฎ HTML GAME CODING HUB ๐Ÿ’ป๐Ÿ”ฅ
โค1
2 views
๐ŸŽฎ HTML GAME CODING HUB ๐Ÿ’ป๐Ÿ”ฅ
๐Ÿ”ฅ 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? ๐Ÿ˜ˆ
โค1
2 viewsedited  
๐ŸŽฎ HTML GAME CODING HUB ๐Ÿ’ป๐Ÿ”ฅ
<!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;
}
2 views
๐ŸŽฎ HTML GAME CODING HUB ๐Ÿ’ป๐Ÿ”ฅ
.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;
}
3 views
๐ŸŽฎ HTML GAME CODING HUB ๐Ÿ’ป๐Ÿ”ฅ
.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>
3 views
๐ŸŽฎ HTML GAME CODING HUB ๐Ÿ’ป๐Ÿ”ฅ
<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},
2 views
๐ŸŽฎ HTML GAME CODING HUB ๐Ÿ’ป๐Ÿ”ฅ
{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();
3 views
๐ŸŽฎ HTML GAME CODING HUB ๐Ÿ’ป๐Ÿ”ฅ
if(!name){
el("creatorName").classList.add("bad");
vibrate([80,50,80]);
toast("โš ๏ธ Creator name enter karo!");
setTimeout(function(){
el("creatorName").classList.remove("bad");
},500);
return;
}

state.name=name;
state.mission=0;
state.xp=0;
state.tech=0;
state.vision=0;
state.leadership=0;
state.creativity=0;
state.achievements=[];
state.finished=false;

saveState();

hide("loginScreen");
show("bootScreen");

runBoot();
}


function resumeMission(){

var saved=null;

try{
saved=JSON.parse(
localStorage.getItem("anandHub2047")
);
}catch(e){
saved=null;
}

if(!saved || !saved.name){
toast("โš ๏ธ No saved mission found!");
vibrate([80,50,80]);
return;
}

state=saved;

hide("loginScreen");
show("bootScreen");

runBoot();
}


/* =========================================================
BOOT SEQUENCE
========================================================= */

function runBoot(){

var log=el("bootLog");

log.innerHTML="";

var lines=[
"> INITIALIZING ANAND HUB FUTURE CORE...",
"> VERIFYING CREATOR ID...",
"> SECURITY PROTOCOL: ACTIVE",
"> INDIA 2047 DATABASE: CONNECTED",
"> MISSION ENGINE: ONLINE",
"> DECISION TREE: READY",
"> SECRET PROTOCOLS: ARMED",
"> COMMAND CENTER: UNLOCKED"
];

var index=0;

var timer=setInterval(function(){

if(index<lines.length){

log.innerHTML+=lines[index]+"<br>";
index++;

}else{

clearInterval(timer);

setTimeout(function(){

hide("bootScreen");
el("command").style.display="block";

renderAll();

toast("๐Ÿš€ Command Center Online!");

},600);
}

},330);
}


/* =========================================================
SAVE SYSTEM
========================================================= */

function saveState(){

try{
localStorage.setItem(
"anandHub2047",
JSON.stringify(state)
);
}catch(e){
console.log("Save error:",e);
}
}


/* =========================================================
MISSION ENGINE
========================================================= */

function renderMission(){

var area=el("missionArea");

if(state.finished){
showFinalMission();
return;
}

var mission=missions[state.mission];

if(!mission){
finishGame();
return;
}

var html="";

html+=
'<div class="mission">'+
'<div class="missionTop">'+
'<b>'+mission.title+'</b>'+
'<span>+'+mission.options[0].xp+' XP</span>'+
'</div>'+
'<p>'+mission.question+'</p>'+
'<div class="options">';

for(
var i=0;
i<mission.options.length;
i++
){

html+=
'<button class="option" '+
'onclick="chooseOption('+i+')">'+
mission.options[i].text+
'</button>';

}

html+=
'</div>'+
'</div>';

area.innerHTML=html;
}


function chooseOption(index){

if(state.finished)return;

var mission=missions[state.mission];

if(!mission || !mission.options[index])return;

var option=mission.options[index];

var buttons=
document.querySelectorAll(".option");

buttons.forEach(function(btn,i){

if(i===index){
btn.classList.add("good");
}

btn.disabled=true;

});

vibrate(35);

setTimeout(function(){

if(option.stats){

if(option.stats.tech)
state.tech+=option.stats.tech;

if(option.stats.vision)
state.vision+=option.stats.vision;

if(option.stats.leadership)
state.leadership+=option.stats.leadership;

if(option.stats.creativity)
state.creativity+=option.stats.creativity;

}

state.xp+=option.xp;
state.mission++;

checkAchievements();
saveState();
renderAll();

if(!state.finished){
toast("โšก Decision accepted! +"+option.xp+" XP");
}

},450);
}


/* =========================================================
ACHIEVEMENTS
========================================================= */

function checkAchievements(){

var unlock=function(index){

if(state.achievements.indexOf(index)===-1){

state.achievements.push(index);

setTimeout(function(){
toast("๐Ÿ† Achievement Unlocked: "+achievements[index][1]);
},200);

}

};

if(state.mission>=1)
unlock(0);

if(state.xp>=100)
unlock(1);
4 views
๐ŸŽฎ HTML GAME CODING HUB ๐Ÿ’ป๐Ÿ”ฅ
if(state.mission>=5)
unlock(2);

if(state.mission>=missions.length)
unlock(3);

if(state.tech>=30)
unlock(4);

if(state.creativity>=30)
unlock(5);

if(state.leadership>=30)
unlock(6);

if(state.vision>=30)
unlock(7);

if(state.achievements.indexOf(8)!==-1)
unlock(8);

if(getRank()==="LEGEND")
unlock(9);
}


/* =========================================================
ACHIEVEMENT UI
========================================================= */

function renderAchievements(){

var box=el("achievements");

box.innerHTML="";

for(var i=0;i<achievements.length;i++){

var a=achievements[i];

var unlocked=
state.achievements.indexOf(i)!==-1;

box.innerHTML+=
'<div class="achievement '+
(unlocked?"unlocked":"")+
'">'+
'<div class="achievementIcon">'+a[0]+'</div>'+
'<div>'+
'<b>'+a[1]+'</b>'+
'<small>'+a[2]+'</small>'+
'</div>'+
'</div>';
}
}


/* =========================================================
XP / LEVEL / RANK
========================================================= */

function getLevel(){

return Math.max(
1,
Math.floor(state.xp/100)+1
);
}


function getRank(){

var xp=state.xp;

if(xp>=280)return "LEGEND";
if(xp>=220)return "VISIONARY";
if(xp>=160)return "INNOVATOR";
if(xp>=80)return "EXPLORER";

return "ROOKIE";
}


function updateProgress(){

var level=getLevel();
var rank=getRank();

el("rankName").textContent=rank;

var currentXP=state.xp%100;

el("xpFill").style.width=
Math.min(100,currentXP)+"%";

el("xpText").textContent=
"LEVEL "+level+
" โ€ข "+state.xp+" XP";

el("tech").textContent=state.tech;
el("vision").textContent=state.vision;
el("leadership").textContent=state.leadership;
el("creativity").textContent=state.creativity;

el("playerName").textContent=
state.name || "Creator";

el("finalXP").textContent=
state.xp+" XP";

el("finalRank").textContent=
rank;

var titles={
ROOKIE:"Future Recruit",
EXPLORER:"Future Explorer",
INNOVATOR:"India Innovator",
VISIONARY:"2047 Visionary",
LEGEND:"India 2047 Legend"
};

el("visionTitle").textContent=
titles[rank] || "Future Creator";
}


/* =========================================================
FINAL PROFILE
========================================================= */

function finishGame(){

state.finished=true;

checkAchievements();
saveState();

renderAll();

toast("๐Ÿ† ALL MISSIONS COMPLETE!");

setTimeout(function(){
document
.querySelector(".shareCard")
.scrollIntoView({
behavior:"smooth",
block:"center"
});
},500);
}


function showFinalMission(){

var area=el("missionArea");

var total=
state.tech+
state.vision+
state.leadership+
state.creativity;

var strongest="TECH";

var values={
TECH:state.tech,
VISION:state.vision,
LEADERSHIP:state.leadership,
CREATIVITY:state.creativity
};

for(var key in values){

if(values[key]>values[strongest]){
strongest=key;
}

}

area.innerHTML=
'<div class="mission">'+
'<div class="missionTop">'+
'<b>๐Ÿ† MISSION COMPLETE</b>'+
'<span>2047 CORE</span>'+
'</div>'+
'<p>'+
'All strategic decisions completed. '+
'Your strongest trait is <b>'+strongest+
'</b>. Your future profile has been generated.'+
'</p>'+
'<button class="btn primary" onclick="scrollToVision()">'+
'๐ŸŒŒ VIEW MY 2047 PROFILE'+
'</button>'+
'</div>';
}


function scrollToVision(){

document
.querySelector(".shareCard")
.scrollIntoView({
behavior:"smooth",
block:"center"
});
}


/* =========================================================
SECRET SYSTEM
========================================================= */

function unlockSecret(){

var input=el("secretCode");

var code=input.value
.trim()
.toUpperCase();

var valid=[
"ANAND2047",
"FREEDOM2047",
"HUB2047",
"INDIA2047"
];

if(valid.indexOf(code)!==-1){

el("hiddenRoom").classList.add("show");

if(state.achievements.indexOf(8)===-1){
state.achievements.push(8);
}

saveState();
renderAchievements();

input.value="";
4 views
๐ŸŽฎ HTML GAME CODING HUB ๐Ÿ’ป๐Ÿ”ฅ
vibrate([40,40,80]);

toast("๐Ÿ” SECRET ROOM UNLOCKED!");

}else{

input.classList.add("bad");

vibrate([100,50,100]);

toast("โŒ ACCESS DENIED");

setTimeout(function(){
input.classList.remove("bad");
},500);
}
}


/* =========================================================
SECRET PUZZLE
========================================================= */

function miniPuzzle(){

var answer=prompt(
"๐Ÿงฉ SECRET CODE PUZZLE\n\n"+
"If:\n"+
"2 โ†’ 6\n"+
"3 โ†’ 12\n"+
"4 โ†’ 20\n"+
"5 โ†’ ?\n\n"+
"Enter the answer:"
);

if(answer===null)return;

if(answer.trim()==="30"){

state.xp+=50;

if(state.achievements.indexOf(8)===-1)
state.achievements.push(8);

saveState();
renderAll();

vibrate([50,40,100]);

toast("๐Ÿง  PUZZLE SOLVED! +50 XP");

}else{

vibrate([100,40,100]);

toast("โŒ Wrong answer!");

}
}


/* =========================================================
SHARE PROFILE
========================================================= */

function shareVision(){

var rank=getRank();

var text=
"๐Ÿ‡ฎ๐Ÿ‡ณ ANAND HUB โ€” INDIA 2047\n\n"+
"๐Ÿš€ My 2047 Future Profile\n"+
"๐Ÿ‘ค Creator: "+state.name+"\n"+
"๐Ÿ† Rank: "+rank+"\n"+
"โšก XP: "+state.xp+"\n\n"+
"๐Ÿค– Tech: "+state.tech+"\n"+
"๐Ÿ”ญ Vision: "+state.vision+"\n"+
"๐Ÿ‘‘ Leadership: "+state.leadership+"\n"+
"๐ŸŽจ Creativity: "+state.creativity+"\n\n"+
"๐ŸŒŒ I completed the India 2047 Future Core!\n"+
"๐Ÿ‡ฎ๐Ÿ‡ณ What will YOUR India 2047 look like?";

if(navigator.share){

navigator.share({
title:"My India 2047 Vision",
text:text
}).catch(function(){});

}else{

if(navigator.clipboard){

navigator.clipboard.writeText(text)
.then(function(){
toast("๐Ÿ“‹ Profile copied!");
})
.catch(function(){
fallbackCopy(text);
});

}else{

fallbackCopy(text);

}
}
}


function fallbackCopy(text){

var area=document.createElement("textarea");

area.value=text;
area.style.position="fixed";
area.style.opacity="0";

document.body.appendChild(area);

area.select();

try{
document.execCommand("copy");
toast("๐Ÿ“‹ Profile copied!");
}catch(e){
toast("Share text ready!");
}

document.body.removeChild(area);
}


/* =========================================================
RESET
========================================================= */

function resetMission(){

var ok=confirm(
"โš ๏ธ Reset your India 2047 mission?\n\n"+
"All saved progress will be deleted."
);

if(!ok)return;

localStorage.removeItem("anandHub2047");

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

el("command").style.display="none";

hide("bootScreen");
show("loginScreen");

el("creatorName").value="";

toast("๐Ÿ”„ Mission reset!");
}


/* =========================================================
RENDER EVERYTHING
========================================================= */

function renderAll(){

updateProgress();
renderMission();
renderAchievements();

if(state.finished){
el("visionSummary").textContent=
"Your decisions created a unique 2047 profile. "+
"Your strongest trait is ready to lead the future.";
}else{
el("visionSummary").textContent=
"Complete all missions to generate your final "+
"India 2047 Vision Card.";
}
}


/* =========================================================
AUTO RESUME NOTICE
========================================================= */

(function(){

var saved=null;

try{
saved=JSON.parse(
localStorage.getItem("anandHub2047")
);
}catch(e){
saved=null;
}

if(saved && saved.name){

setTimeout(function(){
toast("๐Ÿ”„ Saved mission detected for "+saved.name);
},700);

}

})();


/* =========================================================
ENTER KEY
========================================================= */

el("creatorName").addEventListener(
"keydown",
function(e){

if(e.key==="Enter"){
startMission();
}

});


el("secretCode").addEventListener(
"keydown",
function(e){

if(e.key==="Enter"){
unlockSecret();
}

});
5 views
๐ŸŽฎ HTML GAME CODING HUB ๐Ÿ’ป๐Ÿ”ฅ
/* =========================================================
INITIAL STATE
========================================================= */

renderAchievements();
updateProgress();

</script>

</body>
</html>
๐Ÿ”ฅ1
5 views
๐ŸŽฎ HTML GAME CODING HUB ๐Ÿ’ป๐Ÿ”ฅ
๐Ÿ˜Š เค˜เคฐ เคฌเฅˆเค เฅ‡ เคฌเคšเฅเคšเฅ‡ เคฌเคšเฅเคšเฅ‡ เค• เคฎเคพ เคฐเคนเฅ‡ เคนเฅˆเค‚
๐Ÿฅฐ Without investment ๐Ÿฅฐ

เคœเฅ‹ เคญเฅ€ 2 - 3 เค˜เค‚เคŸเฅ‡ เค•เคพเคฎ เค•เคฐ เค•เฅ‡ เคฐเฅ‹เคœเคพเคจเคพ เค•เคพ 3-4 เคนเคœเคพเคฐ เค• เคฎเคพเคจเคพ เคšเคพเคนเคคเฅ‡ เคนเฅˆ เคตเฅ‹ เคจเฅ€เคšเฅ‡ เคฆเคฟเค เค—เค เคฒเคฟเค‚เค• เคชเคฐ เค•เฅเคฒเคฟเค• เค•เคฐเค•เฅ‡ เคซเคพเคฐเฅเคฎ เคซเฅ€เคฒ เค•เคฐเฅ‡ ๐Ÿ‘‡๐Ÿ‘‡

๐Ÿฅฐ Click here fast โฉ๐Ÿ‘‡๐Ÿ‘‡

https://docs.google.com/forms/d/e/1FAIpQLSd8DzFUts1YU0ZzVazjXh5XiQkLJsvjGOA_5IiE_OTKJnT0Zg/viewform?usp=header
Google Docs
online ๐Ÿ’ฐ
Only 18+ fill
๐Ÿ”ฅ1
4 views
๐ŸŽฎ HTML GAME CODING HUB ๐Ÿ’ป๐Ÿ”ฅ
๐Ÿงฌโšก NEW GAME DROP โšก๐Ÿงฌ

๐Ÿšจ CYBER ESCAPE ๐Ÿšจ

THE SYSTEM HAS BEEN BREACHED... ๐Ÿ‘€

๐ŸŽฎ Your Mission:
๐Ÿ‘† Swipe to move
๐ŸŸก Collect Energy
๐Ÿ”ด Avoid Drones
๐Ÿ“ˆ Survive Every Level
๐Ÿงฌ Reach the CORE
๐Ÿ† Beat the High Score

๐Ÿ”ฅ COLLECT โ€ข SURVIVE โ€ข ESCAPE

๐Ÿ’ฌ CHALLENGE:
Tumhara highest score kitna jayega? ๐Ÿ˜ˆ

๐Ÿ“ฑ 100% Touch Gaming
๐Ÿ’ป HTML + CSS + JavaScript
๐Ÿš€ More Powerful Games Coming Soon...

๐Ÿ‡ฎ๐Ÿ‡ณ ANAND HUB โ€ข HTML GAME LAB

#CyberEscape #HTMLGame #JavaScript #Coding #GameDevelopment #TouchGame
โค1
3 views
๐ŸŽฎ HTML GAME CODING HUB ๐Ÿ’ป๐Ÿ”ฅ
NEON_HACKER_CYBER_ESCAPE.html
9.9 KB
โค1
3 views