<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BlitzFury - Telegram Bot Game</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700;800&display=swap');
* {
font-family: 'Kanit', sans-serif;
}
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
position: relative;
overflow: hidden;
}
/* Animated background particles */
.particle {
position: fixed;
pointer-events: none;
opacity: 0.3;
animation: floatUp 10s infinite linear;
}
@keyframes floatUp {
0% {
transform: translateY(100vh) rotate(0deg);
opacity: 0;
}
10% {
opacity: 0.3;
}
90% {
opacity: 0.3;
}
100% {
transform: translateY(-100vh) rotate(360deg);
opacity: 0;
}
}
.phone-container {
width: 420px;
height: 1078px;
background: #1a1a1a;
border-radius: 40px;
padding: 8px;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
position: relative;
overflow: hidden;
}
.phone-screen {
width: 100%;
height: 100%;
background: linear-gradient(180deg, #0f0f23 0%, #1a1a3e 50%, #2d1b69 100%);
border-radius: 32px;
overflow: hidden;
position: relative;
}
.status-bar {
height: 44px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
color: white;
font-size: 14px;
font-weight: 500;
}
.main-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 20px;
position: relative;
overflow: hidden;
}
.main-header::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
animation: rotate 20s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.header-content {
position: relative;
z-index: 1;
display: flex;
justify-content: space-between;
align-items: center;
}
.game-title {
color: white;
}
.game-title h1 {
font-size: 28px;
font-weight: 800;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.game-title p {
font-size: 14px;
opacity: 0.9;
margin-top: 2px;
}
.level-display {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
padding: 10px 20px;
border-radius: 25px;
color: white;
text-align: center;
border: 2px solid rgba(255, 255, 255, 0.3);
}
.level-display .level-text {
font-size: 11px;
opacity: 0.9;
}
.level-display .level-number {
font-size: 24px;
font-weight: 700;
line-height: 1;
}
.pet-area {
position: relative;
height: 280px;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.pet-container {
position: relative;
width: 220px;
height: 220px;
}
.pet-image {
width: 100%;
height: 100%;
background: url('https://picsum.photos/seed/cutefox/220/220.jpg') center/cover;
border-radius: 50%;
border: 6px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
animation: petBreathe 3s ease-in-out infinite;
position: relative;
z-index: 2;
}
@keyframes petBreathe {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.pet-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 240px;
height: 240px;
background: radial-gradient(circle, rgba(147, 51, 234, 0.4) 0%, transparent 70%);
border-radius: 50%;
animation: glowPulse 2s ease-in-out infinite;
}
@keyframes glowPulse {
0%,
100% {
opacity: 0.5;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 0.8;
transform: translate(-50%, -50%) scale(1.1);
}
}
.crown {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
font-size: 48px;
color: gold;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
animation: crownFloat 3s ease-in-out infinite;
z-index: 3;
}
@keyframes crownFloat {
0%,
100% {
transform: translateX(-50%) translateY(0);
}
50% {
transform: translateX(-50%) translateY(-8px);
}
}
.pet-stats {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
padding: 8px 20px;
border-radius: 20px;
color: white;
font-weight: 600;
font-size: 14px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
z-index: 3;
display: flex;
align-items: center;
gap: 8px;
}
.stats-section {
padding: 20px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
margin: 0 20px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.stat-bar {
margin-bottom: 15px;
}
.stat-label {
color: white;
font-size: 12px;
margin-bottom: 5px;
display: flex;
justify-content: space-between;
}
.stat-progress {
height: 8px;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
overflow: hidden;
position: relative;
}
.stat-fill {
height: 100%;
border-radius: 10px;
transition: width 0.5s ease;
position: relative;
overflow: hidden;
}
.stat-fill::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.energy-fill {
background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
}
.happiness-fill {
background: linear-gradient(90deg, #fa709a 0%, #fee140 100%);
}
.exp-fill {
background: linear-gradient(90deg, #30cfd0 0%, #330867 100%);
}
.food-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin: 20px;
}
.food-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
padding: 12px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.food-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, transparent, rgba(147, 51, 234, 0.1));
opacity: 0;
transition: opacity 0.3s ease;
}
.food-card:hover::before {
opacity: 1;
}
.food-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.food-card.selected {
border: 3px solid #8b5cf6;
transform: scale(1.05);
}
.food-icon {
width: 50px;
height: 50px;
margin: 0 auto 8px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 24px;
}
.food-name {
font-size: 12px;
font-weight: 600;
color: #333;
margin-bottom: 4px;
}
.food-price {
font-size: 14px;
font-weight: 700;
color: #8b5cf6;
}
.bottom-panel {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(20px);
padding: 20px;
border-radius: 30px 30px 0 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.coins-display {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 15px;
color: gold;
font-size: 22px;
font-weight: 700;
}
.coins-icon {
font-size: 28px;
animation: coinSpin 3s linear infinite;
}
@keyframes coinSpin {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
.action-button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 18px;
border-radius: 30px;
font-size: 18px;
font-weight: 700;
width: 100%;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
position: relative;
overflow: hidden;
}
.action-button::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.action-button:hover::before {
width: 300px;
height: 300px;
}
.action-button:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(102, 126, 234, 0.6);
}
.action-button:active {
transform: translateY(0);
}
.floating-emoji {
position: absolute;
font-size: 30px;
animation: floatUpAndFade 2s ease-out forwards;
pointer-events: none;
z-index: 100;
}
@keyframes floatUpAndFade {
0% {
opacity: 1;
transform: translateY(0) scale(1);
}
100% {
opacity: 0;
transform: translateY(-100px) scale(1.5);
}
}
.notification {
position: fixed;
top: 20px;
right: 20px;
background: white;
padding: 15px 25px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
transform: translateX(400px);
transition: transform 0.3s ease;
z-index: 1000;
max-width: 300px;
}
.notification.show {
transform: translateX(0);
}
.notification-content {
display: flex;
align-items: center;
gap: 10px;
}
.notification-icon {
font-size: 24px;
}
.achievement-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
background: white;
padding: 30px;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
z-index: 2000;
text-align: center;
transition: transform 0.3s ease;
}
.achievement-popup.show {
transform: translate(-50%, -50%) scale(1);
}
.achievement-icon {
font-size: 60px;
margin-bottom: 15px;
}
.achievement-title {
font-size: 24px;
font-weight: 700;
color: #333;
margin-bottom: 10px;
}
.achievement-desc {
color: #666;
margin-bottom: 20px;
}
.achievement-button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 12px 30px;
border-radius: 25px;
font-weight: 600;
cursor: pointer;
}
</style>
</head>
<body>
<!-- Background particles -->
<div id="particles"></div>
<div class="phone-container">
<div class="phone-screen">
<!-- Status Bar -->
<div class="status-bar">
<span>9:41</span>
<div style="display: flex; gap: 8px;">
<i class="fas fa-signal"></i>
<i class="fas fa-wifi"></i>
<i class="fas fa-battery-three-quarters"></i>
</div>
</div>
<!-- Main Header -->
<div class="main-header">
<div class="header-content">
<div class="game-title">
<h1>BlitzFury</h1>
<p>EAZY - R</p>
</div>
<div class="level-display">
<div class="level-text">LEVEL</div>
<div class="level-number" id="levelNumber">8/10</div>
</div>
</div>
</div>
<!-- Pet Area -->
<div class="pet-area">
<div class="pet-container">
<div class="pet-glow"></div>
<div class="pet-image" id="petImage"></div>
<div class="crown">👑</div>
<div class="pet-stats">
<i class="fas fa-star"></i>
<span>Lv.8</span>
</div>
</div>
</div>
<!-- Stats Section -->
<div class="stats-section">
<div class="stat-bar">
<div class="stat-label">
<span>⚡ พลังงาน</span>
<span id="energyText">75/100</span>
</div>
<div class="stat-progress">
<div class="stat-fill energy-fill" id="energyBar" style="width: 75%"></div>
</div>
</div>
<div class="stat-bar">
<div class="stat-label">
<span>😊 ความสุข</span>
<span id="happinessText">60/100</span>
</div>
<div class="stat-progress">
<div class="stat-fill happiness-fill" id="happinessBar" style="width: 60%"></div>
</div>
</div>
<div class="stat-bar">
<div class="stat-label">
<span>✨ ประสบการณ์</span>
<span id="expText">450/500</span>
</div>
<div class="stat-progress">
<div class="stat-fill exp-fill" id="expBar" style="width: 90%"></div>
</div>
</div>
</div>
<!-- Food Grid -->
<div class="food-grid">
<div class="food-card" onclick="selectFood('Berry Jelly', 500, 20, 10)">
<div class="food-icon">🍇</div>
<div class="food-name">Berry Jelly</div>
<div class="food-price">500</div>
</div>
<div class="food-card" onclick="selectFood('Energy Drink', 300, 30, 5)">
<div class="food-icon">⚡</div>
<div class="food-name">Energy</div>
<div class="food-price">300</div>
</div>
<div class="food-card" onclick="selectFood('Super Meal', 1000, 50, 30)">
<div class="food-icon">🍖</div>
<div class="food-name">Super</div>
<div class="food-price">1000</div>
</div>
<div class="food-card" onclick="selectFood('Magic Cookie', 750, 25, 20)">
<div class="food-icon">🍪</div>
<div class="food-name">Magic</div>
<div class="food-price">750</div>
</div>
<div class="food-card" onclick="selectFood('Rainbow Cake', 1500, 40, 40)">
<div class="food-icon">🌈</div>
<div class="food-name">Rainbow</div>
<div class="food-price">1500</div>
</div>
<div class="food-card" onclick="selectFood('Golden Apple', 2000, 60, 50)">
<div class="food-icon">🍎</div>
<div class="food-name">Golden</div>
<div class="food-price">2000</div>
</div>
</div>
<!-- Bottom Panel -->
<div class="bottom-panel">
<div class="coins-display">
<i class="fas fa-coins coins-icon"></i>
<span id="coins">3,733,000</span>
</div>
<button class="action-button" onclick="feedPet()">
Feed your pet...
</button>
</div>
</div>
</div>
<!-- Notification -->
<div id="notification" class="notification">
<div class="notification-content">
<div class="notification-icon" id="notificationIcon">✨</div>
<div id="notificationText"></div>
</div>
</div>
<!-- Achievement Popup -->
<div id="achievementPopup" class="achievement-popup">
<div class="achievement-icon">🏆</div>
<div class="achievement-title">ความสำเร็จ!</div>
<div class="achievement-desc" id="achievementDesc"></div>
<button class="achievement-button" onclick="closeAchievement()">รับทราบ</button>
</div>
<script>
// Game State
let gameState = {
coins: 3733000,
level: 8,
maxLevel: 10,
energy: 75,
maxEnergy: 100,
happiness: 60,
maxHappiness: 100,
exp: 450,
maxExp: 500,
selectedFood: null,
totalFeeds: 0,
achievements: []
};
// Initialize particles
function createParticles() {
const particlesContainer = document.getElementById('particles');
const emojis = ['⭐', '✨', '💫', '🌟', '⚡', '🔮'];
for (let i = 0; i < 15; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
particle.textContent = emojis[Math.floor(Math.random() * emojis.length)];
particle.style.left = Math.random() * 100 + '%';
particle.style.animationDelay = Math.random() * 10 + 's';
particle.style.fontSize = (Math.random() * 20 + 10) + 'px';
particlesContainer.appendChild(particle);
}
}
// Update UI
function updateUI() {
document.getElementById('coins').textContent = gameState.coins.toLocaleString();
document.getElementById('levelNumber').textContent = `${gameState.level}/${gameState.maxLevel}`;
document.getElementById('energyText').textContent = `${gameState.energy}/${gameState.maxEnergy}`;
document.getElementById('happinessText').textContent = `${gameState.happiness}/${gameState.maxHappiness}`;
document.getElementById('expText').textContent = `${gameState.exp}/${gameState.maxExp}`;
document.getElementById('energyBar').style.width = `${(gameState.energy / gameState.maxEnergy) * 100}%`;
document.getElementById('happinessBar').style.width = `${(gameState.happiness / gameState.maxHappiness) * 100}%`;
document.getElementById('expBar').style.width = `${(gameState.exp / gameState.maxExp) * 100}%`;
}
// Select food
function selectFood(name, price, energyGain, happinessGain) {
gameState.selectedFood = {name, price, energyGain, happinessGain};
// Update UI
document.querySelectorAll('.food-card').forEach(card => {
card.classList.remove('selected');
});
event.currentTarget.classList.add('selected');
showNotification(`เลือก ${name} แล้ว!`, '🍴');
// Add floating emoji
createFloatingEmoji(event.currentTarget, '✨');
}
// Feed pet
function feedPet() {
if (!gameState.selectedFood) {
showNotification('กรุณาเลือกอาหารก่อน!', '⚠️');
return;
}
if (gameState.coins < gameState.selectedFood.price) {
showNotification('เหรียญไม่เพียงพอ!', '💰');
return;
}
// Deduct coins
gameState.coins -= gameState.selectedFood.price;
// Update stats
gameState.energy = Math.min(gameState.energy + gameState.selectedFood.energyGain, gameState.maxEnergy);
gameState.happiness = Math.min(gameState.happiness + gameState.selectedFood.happinessGain, gameState.maxHappiness);
gameState.exp += 50;
gameState.totalFeeds++;
// Check level up
if (gameState.exp >= gameState.maxExp && gameState.level < gameState.maxLevel) {
levelUp();
}
// Check achievements
checkAchievements();
// Update UI
updateUI();
// Show notification
showNotification(`ให้อาหาร ${gameState.selectedFood.name} แล้ว!`, '🎉');
// Create floating emojis
const petImage = document.getElementById('petImage');
for (let i = 0; i < 5; i++) {
setTimeout(() => {
createFloatingEmoji(petImage, ['❤️', '⭐', '✨', '🎉'][Math.floor(Math.random() * 4)]);
}, i * 100);
}
// Animate pet
animatePet();
// Reset selection
gameState.selectedFood = null;
document.querySelectorAll('.food-card').forEach(card => {
card.classList.remove('selected');
});
}
// Level up
function levelUp() {
gameState.level++;
gameState.exp = 0;
gameState.maxExp = gameState.level * 100;
gameState.maxEnergy += 10;
gameState.maxHappiness += 10;
showAchievement(`เลเวล ${gameState.level}!`, 'คุณไปถึงเลเวลใหม่แล้ว!');
}
// Check achievements
function checkAchievements() {
if (gameState.totalFeeds === 10 && !gameState.achievements.includes('first10')) {
gameState.achievements.push('first10');
showAchievement('นักอาหาร!', 'ให้อาหารสัตว์เลี้ยง 10 ครั้ง');
}
if (gameState.totalFeeds === 50 && !gameState.achievements.includes('first50')) {
gameState.achievements.push('first50');
showAchievement('ผู้เลี้ยงมือโปร!', 'ให้อาหารสัตว์เลี้ยง 50 ครั้ง');
}
if (gameState.happiness === gameState.maxHappiness && !gameState.achievements.includes('maxHappiness')) {
gameState.achievements.push('maxHappiness');
showAchievement('สุขใจสุขขั้นเทพ!', 'ความสุขเต็มพิกัด');
}
}
// Show achievement
function showAchievement(title, desc) {
const popup = document.getElementById('achievementPopup');
document.getElementById('achievementDesc').textContent = desc;
popup.querySelector('.achievement-title').textContent = title;
popup.classList.add('show');
}
// Close achievement
function closeAchievement() {
document.getElementById('achievementPopup').classList.remove('show');
}
// Animate pet
function animatePet() {
const petImage = document.getElementById('petImage');
petImage.style.animation = 'none';
setTimeout(() => {
petImage.style.animation = 'petBreathe 3s ease-in-out infinite';
}, 10);
}
// Create floating emoji
function createFloatingEmoji(element, emoji) {
const floatingEmoji = document.createElement('div');
floatingEmoji.className = 'floating-emoji';
floatingEmoji.textContent = emoji;
const rect = element.getBoundingClientRect();
floatingEmoji.style.left = rect.left + rect.width / 2 + 'px';
floatingEmoji.style.top = rect.top + rect.height / 2 + 'px';
document.body.appendChild(floatingEmoji);
setTimeout(() => {
floatingEmoji.remove();
}, 2000);
}
// Show notification
function showNotification(message, icon = '✨') {
const notification = document.getElementById('notification');
const notificationText = document.getElementById('notificationText');
const notificationIcon = document.getElementById('notificationIcon');
notificationText.textContent = message;
notificationIcon.textContent = icon;
notification.classList.add('show');
setTimeout(() => {
notification.classList.remove('show');
}, 3000);
}
// Auto decrease stats over time
function decreaseStats() {
if (gameState.energy > 0) {
gameState.energy = Math.max(0, gameState.energy - 1);
}
if (gameState.happiness > 0) {
gameState.happiness = Math.max(0, gameState.happiness - 1);
}
updateUI();
}
// Initialize game
function initGame() {
createParticles();
updateUI();
showNotification('ยินดีต้อนรับสู่ BlitzFury!', '🎮');
// Start auto decrease stats
setInterval(decreaseStats, 5000);
}
// Start game when page loads
window.addEventListener('load', initGame);
</script>
</body>
</html>