<!
DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ancient Seal - Pet War</title>
<style>
:root {
--common-bg: #444444;
--rare-bg: #0055ff;
--epic-bg: #a020f0;
--legendary-bg: linear-gradient(135deg, #ffd700, #ff8c00, #ffd700);
body {
margin: 0; background: #0a0a0c; color: white;
font-family: 'Segoe UI', sans-serif;
display: flex; flex-direction: column; align-items: center; min-height: 100vh;
overflow-x: hidden; padding-bottom: 50px;
/* --- Gacha Area --- */
#display-area {
display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;
margin-top: 20px; perspective: 1000px; max-width: 900px;
}
.card-container {
width: 100px; height: 150px; cursor: pointer; position: relative;
transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
.[Link]-flipped { transform: rotateY(180deg); }
.card-face {
position: absolute; width: 100%; height: 100%;
backface-visibility: hidden; border-radius: 12px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
box-shadow: 0 10px 20px rgba(0,0,0,0.5);
.card-back { background: #1a1a1a; border: 3px double #555; }
.card-back::after { content: "❂"; font-size: 30px; color: #444; }
.card-front { transform: rotateY(180deg); padding: 5px; text-align: center; }
.tier-common { background: var(--common-bg); border: 2px solid #666; }
.tier-rare { background: var(--rare-bg); border: 2px solid #80aaff; }
.tier-epic { background: var(--epic-bg); border: 2px solid #e066ff; }
.tier-legendary {
background: var(--legendary-bg); color: black; border: 2px solid #fff;
background-size: 200% 200%; animation: bg-move 2s infinite linear;
}
@keyframes bg-move { 0% { background-position: 0% 50%; } 100% { background-position:
200% 50%; } }
/* --- Battle Area --- */
#battle-arena {
display: none; width: 90%; max-width: 600px; margin-top: 30px;
background: rgba(255,255,255,0.05); padding: 20px; border-radius: 20px;
border: 2px solid #333; text-align: center;
.hp-bar-container {
width: 100%; height: 20px; background: #333; border-radius: 10px; margin: 10px 0;
overflow: hidden;
.hp-fill { height: 100%; transition: width 0.3s ease; }
#boss-hp-fill { background: #ff4757; width: 100%; }
#player-hp-fill { background: #2ed573; width: 100%; }
.pet-unit { font-size: 30px; display: inline-block; margin: 5px; transition: 0.3s; }
.is-attacking { transform: translateY(-20px) scale(1.2); }
/* --- Controls --- */
.controls { margin: 20px; display: flex; gap: 10px; flex-direction: column; align-items:
center; }
.btn {
background: #fff; color: #000; padding: 12px 25px; border: none;
font-weight: bold; border-radius: 5px; cursor: pointer; transition: 0.3s;
.btn:disabled { background: #444; color: #888; cursor: not-allowed; }
.btn-pet { background: #ff4757; color: white; display: none; }
.btn-battle { background: #ffa502; color: black; display: none; }
#pet-display { margin-top: 15px; font-size: 35px; display: flex; justify-content: center; gap:
10px; }
.shake { animation: shake 0.4s; }
@keyframes shake { 0%, 100% { transform: translate(0); } 25% { transform: translate(-10px);
} 75% { transform: translate(10px); } }
@keyframes bounce { 0% { transform: scale(0); } 70% { transform: scale(1.3); } 100%
{ transform: scale(1); } }
</style>
</head>
<body id="body">
<h1 id="status">CHÀO MỪNG ĐẾN VỚI CỔ GIỚI</h1>
<div id="display-area"></div>
<div id="pet-display"></div>
<div id="battle-arena">
<h2 style="color: #ff4757;">QUÁI VẬT CỔ ĐẠI</h2>
<div class="hp-bar-container"><div id="boss-hp-fill" class="hp-fill"></div></div>
<p id="boss-hp-text">HP: 1000/1000</p>
<div style="font-size: 50px; margin: 20px;">👹</div>
<h3 style="color: #2ed573;">ĐỘI QUÂN THÚ CƯNG</h3>
<div id="player-pets-battle"></div>
<div class="hp-bar-container"><div id="player-hp-fill" class="hp-fill"></div></div>
<p id="player-hp-text">HP: 100/100</p>
</div>
<div class="controls">
<button id="btn-main" class="btn" onclick="prepareGacha(10)">TRIỆU HỒI VẬT PHẨM
X10</button>
<button id="btn-exchange" class="btn btn-pet" onclick="exchangeForPets()">ĐỔI THƯỞNG
PET</button>
<button id="btn-battle" class="btn btn-battle" onclick="startBattle()">BẮT ĐẦU ĐẠI CHIẾN
BOSS</button>
<button class="btn" style="background:none; color:white; font-size: 12px;"
onclick="[Link]()">LÀM MỚI</button>
</div>
<script>
// --- Dữ liệu ---
const items = [
{ name: "Long Thần Giáp", tier: "legendary", weight: 5 },
{ name: "Ma Pháp Trượng", tier: "epic", weight: 3 },
{ name: "Kiếm Sắt Cổ", tier: "rare", weight: 1 },
{ name: "Đá Vụn", tier: "common", weight: 0 }
];
const petLibrary = {
"🐶": { name: "Chó Con", atk: 15, hp: 100 },
"🐱": { name: "Mèo Mun", atk: 20, hp: 80 },
"🐰": { name: "Thỏ Bông", atk: 10, hp: 120 },
"🐥": { name: "Gà Chip", atk: 25, hp: 60 },
"🐭": { name: "Chuột Nhắt", atk: 12, hp: 70 },
"🐟": { name: "Cá Cảnh", atk: 5, hp: 200 },
"🦄": { name: "Kỳ Lân", atk: 50, hp: 300 },
"🐲": { name: "Hỏa Long", atk: 80, hp: 500 }
};
const petEmojis = [Link](petLibrary);
let openedCount = 0;
let totalScore = 0;
let myPets = [];
let bossHP = 1500;
let bossMaxHP = 1500;
let playerHP = 0;
let playerMaxHP = 0;
// --- Logic Gacha Vật Phẩm ---
function prepareGacha(count) {
const area = [Link]('display-area');
[Link] = '';
openedCount = 0;
totalScore = 0;
[Link]('btn-main').disabled = true;
[Link]('status').innerText = "HÃY LẬT HẾT 10 THẺ!";
for (let i = 0; i < count; i++) {
const roll = [Link]() * 100;
let sel = roll < 2 ? items[0] : roll < 15 ? items[1] : roll < 45 ? items[2] : items[3];
totalScore += [Link];
const container = [Link]('div');
[Link] = 'card-container';
[Link] = `
<div class="card-face card-back"></div>
<div class="card-front card-face tier-${[Link]}">
<div style="font-weight:bold; font-size:12px">${[Link]}</div>
<div style="font-size:9px; margin-top:5px;
opacity:0.8">${[Link]()}</div>
</div>`;
[Link] = function() {
if() {
[Link]('is-flipped');
openedCount++;
if([Link] === 'legendary') triggerLegendaryEffect();
if(openedCount === 10) {
[Link]('status').innerText = "ĐÃ MỞ HẾT! ĐỔI THÚ CƯNG
NGAY";
[Link]('btn-exchange').[Link] = 'block';
};
[Link](container);
// --- Logic Gacha Thú Cưng ---
function exchangeForPets() {
const petDisplay = [Link]('pet-display');
[Link]('btn-exchange').[Link] = 'none';
myPets = [];
let petTurns = totalScore >= 15 ? 5 : totalScore >= 10 ? 4 : totalScore >= 5 ? 3 : totalScore >=
2 ? 2 : 1;
[Link]('status').innerText = `NHẬN ĐƯỢC ${petTurns} THÚ CƯNG!`;
for (let i = 0; i < petTurns; i++) {
setTimeout(() => {
const emoji = petEmojis[[Link]([Link]() * [Link])];
const petData = { ...petLibrary[emoji], emoji: emoji };
[Link](petData);
const span = [Link]('span');
[Link] = emoji;
[Link] = "bounce 0.5s ease";
[Link](span);
if (i === petTurns - 1) {
[Link]('btn-battle').[Link] = 'block';
[Link]('status').innerText = "ĐỘI QUÂN ĐÃ SẴN SÀNG!";
}, i * 400);
// --- Hệ Thống Chiến Đấu ---
function startBattle() {
[Link]('display-area').[Link] = 'none';
[Link]('pet-display').[Link] = 'none';
[Link]('btn-battle').[Link] = 'none';
[Link]('battle-arena').[Link] = 'block';
// Tính tổng máu người chơi
playerHP = [Link]((sum, pet) => sum + [Link], 0);
playerMaxHP = playerHP;
const petBattleArea = [Link]('player-pets-battle');
[Link] = '';
[Link](pet => {
const s = [Link]('span');
[Link] = 'pet-unit';
[Link] = [Link];
[Link](s);
});
updateUI();
gameLoop();
function updateUI() {
[Link]('boss-hp-fill').[Link] = (bossHP / bossMaxHP * 100) + "%";
[Link]('boss-hp-text').innerText = `HP: ${[Link](0, bossHP)} / $
{bossMaxHP}`;
[Link]('player-hp-fill').[Link] = (playerHP / playerMaxHP * 100) +
"%";
[Link]('player-hp-text').innerText = `HP: ${[Link](0, playerHP)} / $
{playerMaxHP}`;
async function gameLoop() {
while (bossHP > 0 && playerHP > 0) {
// Lượt của Thú Cưng
[Link]('status').innerText = "THÚ CƯNG TẤN CÔNG!";
for (let pet of myPets) {
if (bossHP <= 0) break;
bossHP -= [Link];
triggerLegendaryEffect(); // Rung màn hình khi đánh
updateUI();
await new Promise(r => setTimeout(r, 300));
if (bossHP <= 0) break;
// Lượt của Boss
await new Promise(r => setTimeout(r, 800));
[Link]('status').innerText = "BOSS PHẢN CÔNG!";
let bossAtk = 40 + ([Link]() * 40);
playerHP -= [Link](bossAtk);
[Link]('battle-arena').[Link]('shake');
setTimeout(() => [Link]('battle-arena').[Link]('shake'),
400);
updateUI();
await new Promise(r => setTimeout(r, 1000));
if (bossHP <= 0) {
[Link]('status').innerText = "CHIẾN THẮNG! BẠN LÀ HUYỀN THOẠI!";
} else {
[Link]('status').innerText = "THẤT BẠI! HÃY THỬ LẠI LẦN SAU";
function triggerLegendaryEffect() {
const body = [Link]('body');
[Link]('shake');
setTimeout(() => [Link]('shake'), 200);
</script>
</body>
</html>