Untitled
Anonymous
plain_text
09/02/2026 4:39 PM
11.8 KB
2
Indexable
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Steal a Legend</title>
<style>
* {
box-sizing: border-box;
user-select: none;
}
body {
margin: 0;
overflow: hidden;
font-family: Arial, sans-serif;
background: #15151f;
color: white;
}
#game {
position: relative;
width: 100vw;
height: 100vh;
background:
linear-gradient(#24243a 2px, transparent 2px),
linear-gradient(90deg, #24243a 2px, transparent 2px);
background-size: 50px 50px;
}
/* TOP UI */
#topbar {
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 15px;
z-index: 20;
}
.stat {
background: rgba(20,20,30,.95);
padding: 12px 20px;
border-radius: 15px;
border: 2px solid #444;
font-weight: bold;
box-shadow: 0 5px 15px #0008;
}
/* BASES */
.base {
position: absolute;
width: 230px;
height: 180px;
bottom: 30px;
border-radius: 20px;
border: 4px solid;
text-align: center;
padding-top: 15px;
font-size: 20px;
font-weight: bold;
}
#playerBase {
left: 30px;
background: #263c6e;
border-color: #4e8cff;
}
#enemyBase {
right: 30px;
background: #633333;
border-color: #ff5959;
}
/* WALKWAY */
#walkway {
position: absolute;
left: 250px;
right: 250px;
top: 50%;
height: 100px;
transform: translateY(-50%);
background: #303044;
border-top: 5px solid #555;
border-bottom: 5px solid #555;
}
/* CHARACTERS */
.character {
position: absolute;
width: 90px;
height: 110px;
text-align: center;
transition: left .25s linear;
z-index: 10;
cursor: pointer;
}
.character:hover {
transform: scale(1.08);
}
.body {
width: 60px;
height: 60px;
margin: auto;
border-radius: 15px;
border: 3px solid white;
box-shadow: 0 5px 12px #0009;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
}
.name {
margin-top: 4px;
font-weight: bold;
font-size: 13px;
text-shadow: 2px 2px #000;
}
.price {
font-size: 12px;
color: #ffd84d;
}
.Common .body { background: #777; }
.Rare .body { background: #2878ff; }
.Epic .body { background: #9a35ff; }
.Legendary .body { background: #ff9d22; }
.Mythic .body { background: #ff315c; }
/* SHOP */
#shop {
position: absolute;
left: 50%;
bottom: 15px;
transform: translateX(-50%);
background: #181823;
padding: 12px 20px;
border-radius: 18px;
border: 2px solid #444;
z-index: 30;
}
#shop button {
background: #4e8cff;
color: white;
border: none;
padding: 10px 18px;
margin: 3px;
border-radius: 10px;
font-weight: bold;
cursor: pointer;
}
#shop button:hover {
background: #6ca0ff;
}
/* MESSAGE */
#message {
position: absolute;
top: 90px;
left: 50%;
transform: translateX(-50%);
background: #111;
padding: 12px 25px;
border-radius: 12px;
opacity: 0;
transition: opacity .3s;
z-index: 50;
}
/* COLLECTION */
#collection {
position: absolute;
top: 20px;
left: 20px;
width: 180px;
background: #171722;
border: 2px solid #444;
border-radius: 15px;
padding: 12px;
z-index: 20;
}
#collection h3 {
margin-top: 0;
}
.collectItem {
padding: 5px;
border-bottom: 1px solid #333;
font-size: 13px;
}
/* STEAL BUTTON */
#stealButton {
display: none;
position: absolute;
z-index: 100;
padding: 12px 20px;
background: #ff3d3d;
border: none;
border-radius: 12px;
color: white;
font-weight: bold;
cursor: pointer;
}
</style>
</head>
<body>
<div id="game">
<div id="topbar">
<div class="stat">💰 <span id="coins">500</span></div>
<div class="stat">📈 +<span id="income">0</span>/sec</div>
<div class="stat">🏆 <span id="count">0</span> Collected</div>
</div>
<div id="collection">
<h3>📦 Collection</h3>
<div id="collectionList">Nothing yet...</div>
</div>
<div id="walkway"></div>
<div id="playerBase" class="base">
🏠 YOUR BASE
<div id="baseItems"></div>
</div>
<div id="enemyBase" class="base">
🏠 ENEMY BASE
<div>Protect your stuff!</div>
</div>
<div id="shop">
<button onclick="buyCharacter('Common')">Common $50</button>
<button onclick="buyCharacter('Rare')">Rare $150</button>
<button onclick="buyCharacter('Epic')">Epic $400</button>
<button onclick="buyCharacter('Legendary')">Legendary $1000</button>
<button onclick="buyCharacter('Mythic')">Mythic $5000</button>
</div>
<div id="message"></div>
</div>
<script>
/* =========================
GAME DATA
========================= */
let coins = 500;
let income = 0;
let collected = [];
const characters = {
Common: {
names: ["Dude", "Goober", "Lil Guy"],
price: 50,
income: 2,
emoji: "😎"
},
Rare: {
names: ["Cool Dude", "Speed Guy", "Drippy"],
price: 150,
income: 7,
emoji: "🔥"
},
Epic: {
names: ["Big Boss", "Shadow", "Flexer"],
price: 400,
income: 20,
emoji: "👑"
},
Legendary: {
names: ["Ultra Dude", "King Guy"],
price: 1000,
income: 60,
emoji: "⚡"
},
Mythic: {
names: ["THE GOAT", "Legend Him"],
price: 5000,
income: 250,
emoji: "💀"
}
};
let activeCharacters = [];
/* =========================
UI
========================= */
function updateUI() {
document.getElementById("coins").textContent =
Math.floor(coins);
document.getElementById("income").textContent =
income;
document.getElementById("count").textContent =
collected.length;
let list = document.getElementById("collectionList");
if (collected.length === 0) {
list.innerHTML = "Nothing yet...";
return;
}
list.innerHTML = collected.map(x =>
`<div class="collectItem">
${x.emoji} ${x.name}
<span style="float:right">+$${x.income}</span>
</div>`
).join("");
}
/* =========================
MESSAGE
========================= */
function showMessage(text) {
const msg = document.getElementById("message");
msg.textContent = text;
msg.style.opacity = 1;
setTimeout(() => {
msg.style.opacity = 0;
}, 1800);
}
/* =========================
SPAWN CHARACTER
========================= */
function spawnCharacter() {
const rarities = [
"Common",
"Common",
"Common",
"Rare",
"Rare",
"Epic",
"Legendary",
"Mythic"
];
const rarity =
rarities[Math.floor(Math.random() * rarities.length)];
const data = characters[rarity];
const name =
data.names[Math.floor(Math.random() * data.names.length)];
const char = document.createElement("div");
char.className =
`character ${rarity}`;
char.innerHTML = `
<div class="body">${data.emoji}</div>
<div class="name">${name}</div>
<div class="price">$${data.price}</div>
`;
char.style.left = "260px";
char.style.top = "calc(50% - 55px)";
document.getElementById("game").appendChild(char);
const obj = {
element: char,
rarity,
name,
price: data.price,
income: data.income,
emoji: data.emoji,
x: 260
};
activeCharacters.push(obj);
/* WALK TO ENEMY BASE */
let walk = setInterval(() => {
if (!activeCharacters.includes(obj)) {
clearInterval(walk);
return;
}
obj.x += 2;
char.style.left = obj.x + "px";
if (obj.x > window.innerWidth - 340) {
char.remove();
activeCharacters =
activeCharacters.filter(x => x !== obj);
clearInterval(walk);
}
}, 30);
/* CLICK TO BUY / STEAL */
char.onclick = () => {
if (coins >= obj.price) {
coins -= obj.price;
collected.push(obj);
income += obj.income;
char.remove();
activeCharacters =
activeCharacters.filter(x => x !== obj);
showMessage(
`🔥 You got ${obj.name}! +$${obj.income}/sec`
);
updateUI();
} else {
showMessage("❌ Not enough coins!");
}
};
}
/* =========================
BUY FROM SHOP
========================= */
function buyCharacter(rarity) {
const data = characters[rarity];
if (coins < data.price) {
showMessage("❌ You're too broke!");
return;
}
coins -= data.price;
const name =
data.names[Math.floor(Math.random() * data.names.length)];
const item = {
name,
rarity,
price: data.price,
income: data.income,
emoji: data.emoji
};
collected.push(item);
income += data.income;
showMessage(
`🎉 Bought ${name}! +$${data.income}/sec`
);
updateUI();
}
/* =========================
INCOME SYSTEM
========================= */
setInterval(() => {
coins += income;
updateUI();
}, 1000);
/* =========================
SPAWN LOOP
========================= */
setInterval(() => {
if (activeCharacters.length < 7) {
spawnCharacter();
}
}, 1800);
/* =========================
START GAME
========================= */
updateUI();
for (let i = 0; i < 4; i++) {
setTimeout(spawnCharacter, i * 500);
}
</script>
</body>
</html>
```
Editor is loading...
Leave a Comment