|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Clone Evolution - The Consumption Game</title> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
:root { |
|
|
--primary-color: #6c5ce7; |
|
|
--secondary-color: #a29bfe; |
|
|
--accent-color: #00cec9; |
|
|
--danger-color: #ff7675; |
|
|
--success-color: #00b894; |
|
|
--dark-bg: #0a0a1a; |
|
|
--card-bg: rgba(255, 255, 255, 0.05); |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
background: var(--dark-bg); |
|
|
min-height: 100vh; |
|
|
color: white; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
header { |
|
|
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); |
|
|
padding: 1rem 2rem; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
flex-wrap: wrap; |
|
|
gap: 1rem; |
|
|
box-shadow: 0 4px 20px rgba(108, 92, 231, 0.3); |
|
|
} |
|
|
|
|
|
.logo { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.5rem; |
|
|
font-size: 1.5rem; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
.logo i { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0%, 100% { transform: scale(1); } |
|
|
50% { transform: scale(1.2); } |
|
|
} |
|
|
|
|
|
.built-with { |
|
|
font-size: 0.9rem; |
|
|
opacity: 0.9; |
|
|
} |
|
|
|
|
|
.built-with a { |
|
|
color: white; |
|
|
text-decoration: none; |
|
|
font-weight: bold; |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
.built-with a:hover { |
|
|
text-shadow: 0 0 10px white; |
|
|
} |
|
|
|
|
|
.stats-bar { |
|
|
display: flex; |
|
|
gap: 2rem; |
|
|
padding: 1rem 2rem; |
|
|
background: var(--card-bg); |
|
|
backdrop-filter: blur(10px); |
|
|
flex-wrap: wrap; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.stat { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
min-width: 100px; |
|
|
} |
|
|
|
|
|
.stat-label { |
|
|
font-size: 0.8rem; |
|
|
opacity: 0.7; |
|
|
text-transform: uppercase; |
|
|
} |
|
|
|
|
|
.stat-value { |
|
|
font-size: 1.5rem; |
|
|
font-weight: bold; |
|
|
color: var(--accent-color); |
|
|
} |
|
|
|
|
|
.game-container { |
|
|
display: grid; |
|
|
grid-template-columns: 1fr 2fr 1fr; |
|
|
gap: 1rem; |
|
|
padding: 1rem; |
|
|
max-width: 1600px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
@media (max-width: 1200px) { |
|
|
.game-container { |
|
|
grid-template-columns: 1fr 1fr; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.game-container { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
} |
|
|
|
|
|
.panel { |
|
|
background: var(--card-bg); |
|
|
border-radius: 15px; |
|
|
padding: 1.5rem; |
|
|
backdrop-filter: blur(10px); |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.panel-title { |
|
|
font-size: 1.2rem; |
|
|
margin-bottom: 1rem; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.5rem; |
|
|
color: var(--secondary-color); |
|
|
} |
|
|
|
|
|
.game-arena { |
|
|
min-height: 500px; |
|
|
position: relative; |
|
|
background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%); |
|
|
border-radius: 15px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.arena-floor { |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
width: 100%; |
|
|
height: 100px; |
|
|
background: linear-gradient(180deg, #2d3436 0%, #1a1a2e 100%); |
|
|
} |
|
|
|
|
|
.player { |
|
|
position: absolute; |
|
|
bottom: 100px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
width: 60px; |
|
|
height: 80px; |
|
|
background: linear-gradient(180deg, var(--primary-color), var(--secondary-color)); |
|
|
border-radius: 30px 30px 20px 20px; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
box-shadow: 0 0 30px var(--primary-color); |
|
|
transition: all 0.3s; |
|
|
z-index: 10; |
|
|
} |
|
|
|
|
|
.player.evolved-1 { |
|
|
box-shadow: 0 0 40px var(--accent-color); |
|
|
background: linear-gradient(180deg, var(--accent-color), #00b894); |
|
|
} |
|
|
|
|
|
.player.evolved-2 { |
|
|
box-shadow: 0 0 50px #fd79a8; |
|
|
background: linear-gradient(180deg, #fd79a8, #e84393); |
|
|
} |
|
|
|
|
|
.player.evolved-3 { |
|
|
box-shadow: 0 0 60px #ffeaa7; |
|
|
background: linear-gradient(180deg, #ffeaa7, #fdcb6e); |
|
|
} |
|
|
|
|
|
.player-face { |
|
|
width: 40px; |
|
|
height: 25px; |
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
} |
|
|
|
|
|
.eye { |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
background: #2d3436; |
|
|
border-radius: 50%; |
|
|
animation: blink 3s infinite; |
|
|
} |
|
|
|
|
|
@keyframes blink { |
|
|
0%, 90%, 100% { transform: scaleY(1); } |
|
|
95% { transform: scaleY(0.1); } |
|
|
} |
|
|
|
|
|
.clone { |
|
|
position: absolute; |
|
|
bottom: 100px; |
|
|
width: 40px; |
|
|
height: 55px; |
|
|
border-radius: 20px 20px 15px 15px; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
opacity: 0.8; |
|
|
transition: all 0.5s; |
|
|
animation: cloneSpawn 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes cloneSpawn { |
|
|
0% { transform: scale(0); opacity: 0; } |
|
|
50% { transform: scale(1.2); } |
|
|
100% { transform: scale(1); opacity: 0.8; } |
|
|
} |
|
|
|
|
|
.clone-face { |
|
|
width: 25px; |
|
|
height: 15px; |
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
gap: 5px; |
|
|
} |
|
|
|
|
|
.clone .eye { |
|
|
width: 5px; |
|
|
height: 5px; |
|
|
} |
|
|
|
|
|
.consumable { |
|
|
position: absolute; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s; |
|
|
animation: float 2s ease-in-out infinite; |
|
|
z-index: 5; |
|
|
} |
|
|
|
|
|
.consumable:hover { |
|
|
transform: scale(1.2); |
|
|
filter: brightness(1.3); |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
0%, 100% { transform: translateY(0); } |
|
|
50% { transform: translateY(-10px); } |
|
|
} |
|
|
|
|
|
.consumable-icon { |
|
|
font-size: 2rem; |
|
|
filter: drop-shadow(0 0 10px currentColor); |
|
|
} |
|
|
|
|
|
.items-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
gap: 0.5rem; |
|
|
} |
|
|
|
|
|
.item-card { |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
border-radius: 10px; |
|
|
padding: 0.8rem; |
|
|
text-align: center; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s; |
|
|
border: 2px solid transparent; |
|
|
} |
|
|
|
|
|
.item-card:hover { |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
border-color: var(--accent-color); |
|
|
transform: translateY(-3px); |
|
|
} |
|
|
|
|
|
.item-card.locked { |
|
|
opacity: 0.5; |
|
|
cursor: not-allowed; |
|
|
} |
|
|
|
|
|
.item-icon { |
|
|
font-size: 2rem; |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
|
|
|
.item-name { |
|
|
font-size: 0.8rem; |
|
|
margin-bottom: 0.3rem; |
|
|
} |
|
|
|
|
|
.item-effect { |
|
|
font-size: 0.7rem; |
|
|
opacity: 0.7; |
|
|
} |
|
|
|
|
|
.item-cost { |
|
|
font-size: 0.8rem; |
|
|
color: var(--accent-color); |
|
|
margin-top: 0.3rem; |
|
|
} |
|
|
|
|
|
.evolution-track { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
.evolution-stage { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 1rem; |
|
|
padding: 1rem; |
|
|
background: rgba(255, 255, 255, 0.03); |
|
|
border-radius: 10px; |
|
|
border-left: 4px solid var(--primary-color); |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
.evolution-stage.active { |
|
|
border-left-color: var(--success-color); |
|
|
background: rgba(0, 184, 148, 0.1); |
|
|
} |
|
|
|
|
|
.evolution-stage.locked { |
|
|
opacity: 0.5; |
|
|
} |
|
|
|
|
|
.evolution-icon { |
|
|
font-size: 2rem; |
|
|
} |
|
|
|
|
|
.evolution-info h4 { |
|
|
margin-bottom: 0.3rem; |
|
|
} |
|
|
|
|
|
.evolution-info p { |
|
|
font-size: 0.8rem; |
|
|
opacity: 0.7; |
|
|
} |
|
|
|
|
|
.progress-bar { |
|
|
width: 100%; |
|
|
height: 8px; |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
border-radius: 4px; |
|
|
overflow: hidden; |
|
|
margin-top: 0.5rem; |
|
|
} |
|
|
|
|
|
.progress-fill { |
|
|
height: 100%; |
|
|
background: linear-gradient(90deg, var(--primary-color), var(--accent-color)); |
|
|
transition: width 0.5s; |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
.abilities-list { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 0.5rem; |
|
|
} |
|
|
|
|
|
.ability { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.5rem; |
|
|
padding: 0.8rem; |
|
|
background: rgba(255, 255, 255, 0.03); |
|
|
border-radius: 8px; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
.ability:hover:not(.locked) { |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.ability.locked { |
|
|
opacity: 0.5; |
|
|
cursor: not-allowed; |
|
|
} |
|
|
|
|
|
.ability-icon { |
|
|
font-size: 1.5rem; |
|
|
} |
|
|
|
|
|
.ability-info { |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.ability-name { |
|
|
font-size: 0.9rem; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
.ability-desc { |
|
|
font-size: 0.7rem; |
|
|
opacity: 0.7; |
|
|
} |
|
|
|
|
|
.ability-cooldown { |
|
|
font-size: 0.8rem; |
|
|
color: var(--danger-color); |
|
|
} |
|
|
|
|
|
.controls { |
|
|
position: fixed; |
|
|
bottom: 1rem; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
display: flex; |
|
|
gap: 1rem; |
|
|
background: var(--card-bg); |
|
|
padding: 1rem; |
|
|
border-radius: 50px; |
|
|
backdrop-filter: blur(10px); |
|
|
} |
|
|
|
|
|
.control-btn { |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
border-radius: 50%; |
|
|
border: none; |
|
|
background: var(--primary-color); |
|
|
color: white; |
|
|
font-size: 1.2rem; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
.control-btn:hover { |
|
|
transform: scale(1.1); |
|
|
box-shadow: 0 0 20px var(--primary-color); |
|
|
} |
|
|
|
|
|
.control-btn:active { |
|
|
transform: scale(0.95); |
|
|
} |
|
|
|
|
|
.notification { |
|
|
position: fixed; |
|
|
top: 100px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
background: var(--success-color); |
|
|
color: white; |
|
|
padding: 1rem 2rem; |
|
|
border-radius: 10px; |
|
|
font-weight: bold; |
|
|
opacity: 0; |
|
|
transition: all 0.5s; |
|
|
z-index: 100; |
|
|
} |
|
|
|
|
|
.notification.show { |
|
|
opacity: 1; |
|
|
animation: slideDown 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes slideDown { |
|
|
0% { transform: translateX(-50%) translateY(-20px); } |
|
|
100% { transform: translateX(-50%) translateY(0); } |
|
|
} |
|
|
|
|
|
.clone-counter { |
|
|
position: absolute; |
|
|
top: 10px; |
|
|
right: 10px; |
|
|
background: var(--primary-color); |
|
|
padding: 0.5rem 1rem; |
|
|
border-radius: 20px; |
|
|
font-weight: bold; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.5rem; |
|
|
} |
|
|
|
|
|
.enemy { |
|
|
position: absolute; |
|
|
width: 50px; |
|
|
height: 60px; |
|
|
background: linear-gradient(180deg, #e74c3c, #c0392b); |
|
|
border-radius: 10px; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
box-shadow: 0 0 20px rgba(231, 76, 60, 0.5); |
|
|
animation: enemyMove 3s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes enemyMove { |
|
|
0%, 100% { transform: translateX(0); } |
|
|
50% { transform: translateX(20px); } |
|
|
} |
|
|
|
|
|
.enemy-face { |
|
|
width: 30px; |
|
|
height: 20px; |
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
gap: 5px; |
|
|
} |
|
|
|
|
|
.enemy .eye { |
|
|
background: #c0392b; |
|
|
} |
|
|
|
|
|
.hp-bar { |
|
|
width: 40px; |
|
|
height: 5px; |
|
|
background: rgba(0, 0, 0, 0.3); |
|
|
border-radius: 3px; |
|
|
margin-top: 5px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.hp-fill { |
|
|
height: 100%; |
|
|
background: #2ecc71; |
|
|
transition: width 0.3s; |
|
|
} |
|
|
|
|
|
.score-popup { |
|
|
position: absolute; |
|
|
color: #ffd700; |
|
|
font-weight: bold; |
|
|
font-size: 1.2rem; |
|
|
pointer-events: none; |
|
|
animation: scoreFloat 1s ease-out forwards; |
|
|
} |
|
|
|
|
|
@keyframes scoreFloat { |
|
|
0% { opacity: 1; transform: translateY(0); } |
|
|
100% { opacity: 0; transform: translateY(-50px); } |
|
|
} |
|
|
|
|
|
.modal { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: rgba(0, 0, 0, 0.8); |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
z-index: 1000; |
|
|
opacity: 0; |
|
|
visibility: hidden; |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
.modal.show { |
|
|
opacity: 1; |
|
|
visibility: visible; |
|
|
} |
|
|
|
|
|
.modal-content { |
|
|
background: var(--dark-bg); |
|
|
padding: 2rem; |
|
|
border-radius: 20px; |
|
|
max-width: 500px; |
|
|
width: 90%; |
|
|
text-align: center; |
|
|
border: 2px solid var(--primary-color); |
|
|
animation: modalPop 0.3s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes modalPop { |
|
|
0% { transform: scale(0.8); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
|
|
|
.modal h2 { |
|
|
margin-bottom: 1rem; |
|
|
color: var(--accent-color); |
|
|
} |
|
|
|
|
|
.modal p { |
|
|
margin-bottom: 1.5rem; |
|
|
opacity: 0.8; |
|
|
} |
|
|
|
|
|
.modal-btn { |
|
|
padding: 1rem 2rem; |
|
|
border: none; |
|
|
border-radius: 10px; |
|
|
background: var(--primary-color); |
|
|
color: white; |
|
|
font-size: 1rem; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
.modal-btn:hover { |
|
|
transform: scale(1.05); |
|
|
box-shadow: 0 0 20px var(--primary-color); |
|
|
} |
|
|
|
|
|
.tutorial-tip { |
|
|
position: absolute; |
|
|
background: var(--accent-color); |
|
|
color: white; |
|
|
padding: 0.5rem 1rem; |
|
|
border-radius: 10px; |
|
|
font-size: 0.8rem; |
|
|
z-index: 50; |
|
|
animation: bounce 1s infinite; |
|
|
} |
|
|
|
|
|
@keyframes bounce { |
|
|
0%, 100% { transform: translateY(0); } |
|
|
50% { transform: translateY(-5px); } |
|
|
} |
|
|
|
|
|
.xp-bar-container { |
|
|
width: 100%; |
|
|
margin-top: 1rem; |
|
|
} |
|
|
|
|
|
.xp-label { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
font-size: 0.8rem; |
|
|
margin-bottom: 0.3rem; |
|
|
} |
|
|
|
|
|
.special-effect { |
|
|
position: absolute; |
|
|
pointer-events: none; |
|
|
z-index: 20; |
|
|
} |
|
|
|
|
|
.particle { |
|
|
position: absolute; |
|
|
width: 10px; |
|
|
height: 10px; |
|
|
border-radius: 50%; |
|
|
animation: particleExplode 1s ease-out forwards; |
|
|
} |
|
|
|
|
|
@keyframes particleExplode { |
|
|
0% { transform: translate(0, 0) scale(1); opacity: 1; } |
|
|
100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<header> |
|
|
<div class="logo"> |
|
|
<i class="fas fa-dna"></i> |
|
|
Clone Evolution |
|
|
</div> |
|
|
<div class="built-with"> |
|
|
Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<div class="stats-bar"> |
|
|
<div class="stat"> |
|
|
<span class="stat-label">Level</span> |
|
|
<span class="stat-value" id="level">1</span> |
|
|
</div> |
|
|
<div class="stat"> |
|
|
<span class="stat-label">Score</span> |
|
|
<span class="stat-value" id="score">0</span> |
|
|
</div> |
|
|
<div class="stat"> |
|
|
<span class="stat-label">Clones</span> |
|
|
<span class="stat-value" id="cloneCount">0</span> |
|
|
</div> |
|
|
<div class="stat"> |
|
|
<span class="stat-label">Energy</span> |
|
|
<span class="stat-value" id="energy">100</span> |
|
|
</div> |
|
|
<div class="stat"> |
|
|
<span class="stat-label">Evolution</span> |
|
|
<span class="stat-value" id="evolutionStage">Base</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="game-container"> |
|
|
<div class="panel"> |
|
|
<h3 class="panel-title"><i class="fas fa-flask"></i> Consumables</h3> |
|
|
<div class="items-grid" id="consumablesGrid"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="panel game-arena" id="gameArena"> |
|
|
<div class="clone-counter"> |
|
|
<i class="fas fa-users"></i> |
|
|
<span id="arenaCloneCount">0</span> |
|
|
</div> |
|
|
<div class="arena-floor"></div> |
|
|
<div class="player" id="player"> |
|
|
<div class="player-face"> |
|
|
<div class="eye"></div> |
|
|
<div class="eye"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="panel"> |
|
|
<h3 class="panel-title"><i class="fas fa-chart-line"></i> Evolution Track</h3> |
|
|
<div class="evolution-track" id="evolutionTrack"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="xp-bar-container"> |
|
|
<div class="xp-label"> |
|
|
<span>XP</span> |
|
|
<span id="xpText">0 / 100</span> |
|
|
</div> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" id="xpBar" style="width: 0%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3 class="panel-title" style="margin-top: 1.5rem;"><i class="fas fa-bolt"></i> Abilities</h3> |
|
|
<div class="abilities-list" id="abilitiesList"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="controls"> |
|
|
<button class="control-btn" id="moveLeft" title="Move Left"> |
|
|
<i class="fas fa-arrow-left"></i> |
|
|
</button> |
|
|
<button class="control-btn" id="spawnClone" title="Spawn Clone (Cost: 20 Energy)"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
<button class="control-btn" id="attack" title="Attack"> |
|
|
<i class="fas fa-fist-raised"></i> |
|
|
</button> |
|
|
<button class="control-btn" id="moveRight" title="Move Right"> |
|
|
<i class="fas fa-arrow-right"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="notification" id="notification"></div> |
|
|
|
|
|
<div class="modal" id="welcomeModal"> |
|
|
<div class="modal-content"> |
|
|
<h2><i class="fas fa-dna"></i> Welcome to Clone Evolution!</h2> |
|
|
<p>You are a unique being with the power to create clones by consuming special items. Collect consumables to gain energy, spawn clones, defeat enemies, and evolve into more powerful forms!</p> |
|
|
<ul style="text-align: left; margin-bottom: 1.5rem; opacity: 0.8;"> |
|
|
<li>🍎 Collect consumables for energy & clone power</li> |
|
|
<li>👥 Spawn clones to help you fight</li> |
|
|
<li>⚔️ Defeat enemies to gain XP</li> |
|
|
<li>🧬 Evolve to unlock new abilities</li> |
|
|
</ul> |
|
|
<button class="modal-btn" onclick="startGame()">Start Game</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="modal" id="evolutionModal"> |
|
|
<div class="modal-content"> |
|
|
<h2 id="evolutionTitle"><i class="fas fa-star"></i> Evolution!</h2> |
|
|
<p id="evolutionDesc">You have evolved into a new form!</p> |
|
|
<button class="modal-btn" onclick="closeEvolutionModal()">Continue</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const gameState = { |
|
|
level: 1, |
|
|
score: 0, |
|
|
clones: [], |
|
|
energy: 100, |
|
|
maxEnergy: 100, |
|
|
xp: 0, |
|
|
xpToNext: 100, |
|
|
evolutionStage: 0, |
|
|
playerPosition: 50, |
|
|
enemies: [], |
|
|
consumables: [], |
|
|
abilities: [], |
|
|
unlockedAbilities: [0], |
|
|
cooldowns: {}, |
|
|
gameStarted: false |
|
|
}; |
|
|
|
|
|
|
|
|
const consumablesData = [ |
|
|
{ id: 1, name: 'Energy Orb', icon: '🔮', color: '#a29bfe', energy: 20, clonePower: 1, cost: 0 }, |
|
|
{ id: 2, name: 'Power Crystal', icon: '💎', color: '#00cec9', energy: 30, clonePower: 2, cost: 50 }, |
|
|
{ id: 3, name: 'Soul Essence', icon: '👻', color: '#fd79a8', energy: 40, clonePower: 3, cost: 100 }, |
|
|
{ id: 4, name: 'Dragon Heart', icon: '🔥', color: '#e17055', energy: 50, clonePower: 4, cost: 200 }, |
|
|
{ id: 5, name: 'Star Fragment', icon: '⭐', color: '#ffeaa7', energy: 60, clonePower: 5, cost: 350 }, |
|
|
{ id: 6, name: 'Void Shard', icon: '🌑', color: '#636e72', energy: 80, clonePower: 7, cost: 500 } |
|
|
]; |
|
|
|
|
|
|
|
|
const evolutionStages = [ |
|
|
{ name: 'Base Form', icon: '🧬', requirement: 0, bonus: 'Start your journey', class: '' }, |
|
|
{ name: 'Enhanced', icon: '💫', requirement: 100, bonus: '+25% Clone Power', class: 'evolved-1' }, |
|
|
{ name: 'Ascended', icon: '🌟', requirement: 300, bonus: '+50% Clone Power, Heal Ability', class: 'evolved-2' }, |
|
|
{ name: 'Transcendent', icon: '👑', requirement: 600, bonus: '+100% Clone Power, All Abilities', class: 'evolved-3' } |
|
|
]; |
|
|
|
|
|
|
|
|
const abilitiesData = [ |
|
|
{ id: 0, name: 'Clone Rush', icon: '⚡', desc: 'All clones attack at once', cooldown: 10, unlockLevel: 1 }, |
|
|
{ id: 1, name: 'Energy Shield', icon: '🛡️', desc: 'Protect from damage', cooldown: 15, unlockLevel: 2 }, |
|
|
{ id: 2, name: 'Clone Fusion', icon: '🔄', desc: 'Merge 2 clones into 1 powerful clone', cooldown: 20, unlockLevel: 3 }, |
|
|
{ id: 3, name: 'Mass Production', icon: '🏭', desc: 'Spawn 3 clones at once', cooldown: 25, unlockLevel: 4 } |
|
|
]; |
|
|
|
|
|
|
|
|
const player = document.getElementById('player'); |
|
|
const gameArena = document.getElementById('gameArena'); |
|
|
const notification = document.getElementById('notification'); |
|
|
|
|
|
|
|
|
function initGame() { |
|
|
renderConsumables(); |
|
|
renderEvolutionTrack(); |
|
|
renderAbilities(); |
|
|
document.getElementById('welcomeModal').classList.add('show'); |
|
|
} |
|
|
|
|
|
function startGame() { |
|
|
document.getElementById('welcomeModal').classList.remove('show'); |
|
|
gameState.gameStarted = true; |
|
|
spawnConsumables(); |
|
|
spawnEnemy(); |
|
|
gameLoop(); |
|
|
} |
|
|
|
|
|
function renderConsumables() { |
|
|
const grid = document.getElementById('consumablesGrid'); |
|
|
grid.innerHTML = consumablesData.map(item => ` |
|
|
<div class="item-card ${gameState.score < item.cost ? 'locked' : ''}" |
|
|
onclick="buyConsumable(${item.id})" |
|
|
data-id="${item.id}"> |
|
|
<div class="item-icon">${item.icon}</div> |
|
|
<div class="item-name">${item.name}</div> |
|
|
<div class="item-effect">+${item.energy} Energy, +${item.clonePower} Clone Power</div> |
|
|
<div class="item-cost">${item.cost === 0 ? 'Free' : item.cost + ' pts'}</div> |
|
|
</div> |
|
|
`).join(''); |
|
|
} |
|
|
|
|
|
function renderEvolutionTrack() { |
|
|
const track = document.getElementById('evolutionTrack'); |
|
|
track.innerHTML = evolutionStages.map((stage, index) => ` |
|
|
<div class="evolution-stage ${index === gameState.evolutionStage ? 'active' : ''} ${index > gameState.evolutionStage ? 'locked' : ''}"> |
|
|
<div class="evolution-icon">${stage.icon}</div> |
|
|
<div class="evolution-info"> |
|
|
<h4>${stage.name}</h4> |
|
|
<p>${stage.bonus}</p> |
|
|
<p style="color: var(--accent-color);">Requires: ${stage.requirement} XP</p> |
|
|
</div> |
|
|
</div> |
|
|
`).join(''); |
|
|
} |
|
|
|
|
|
function renderAbilities() { |
|
|
const list = document.getElementById('abilitiesList'); |
|
|
list.innerHTML = abilitiesData.map(ability => { |
|
|
const unlocked = gameState.level >= ability.unlockLevel; |
|
|
const onCooldown = gameState.cooldowns[ability.id] > 0; |
|
|
return ` |
|
|
<div class="ability ${!unlocked ? 'locked' : ''}" |
|
|
onclick="useAbility(${ability.id})" |
|
|
data-id="${ability.id}"> |
|
|
<div class="ability-icon">${ability.icon}</div> |
|
|
<div class="ability-info"> |
|
|
<div class="ability-name">${ability.name}</div> |
|
|
<div class="ability-desc">${ability.desc}</div> |
|
|
</div> |
|
|
<div class="ability-cooldown"> |
|
|
${onCooldown ? gameState.cooldowns[ability.id] + 's' : (unlocked ? 'Ready' : 'Lvl ' + ability.unlockLevel)} |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
}).join(''); |
|
|
} |
|
|
|
|
|
function buyConsumable(id) { |
|
|
const item = consumablesData.find(c => c.id === id); |
|
|
if (gameState.score >= item.cost) { |
|
|
gameState.score -= item.cost; |
|
|
gameState.energy = Math.min(gameState.maxEnergy, gameState.energy + item.energy); |
|
|
showNotification(`Consumed ${item.name}! +${item.energy} Energy`); |
|
|
|
|
|
|
|
|
spawnConsumableInArena(item); |
|
|
updateStats(); |
|
|
renderConsumables(); |
|
|
} else { |
|
|
showNotification('Not enough points!', 'error'); |
|
|
} |
|
|
} |
|
|
|
|
|
function spawnConsumableInArena(item) { |
|
|
const consumable = document.createElement('div'); |
|
|
consumable.className = 'consumable'; |
|
|
consumable.style.left = Math.random() * 80 + 10 + '%'; |
|
|
consumable.style.top = Math.random() * 50 + 20 + '%'; |
|
|
consumable.style.color = item.color; |
|
|
consumable.innerHTML = `<span class="consumable-icon">${item.icon}</span>`; |
|
|
consumable.dataset.id = item.id; |
|
|
consumable.dataset.power = item.clonePower; |
|
|
|
|
|
consumable.onclick = () => collectConsumable(consumable, item); |
|
|
|
|
|
gameArena.appendChild(consumable); |
|
|
gameState.consumables.push(consumable); |
|
|
} |
|
|
|
|
|
function spawnConsumables() { |
|
|
const randomItems = consumablesData.filter(i => i.cost === 0); |
|
|
for (let i = 0; i < 3; i++) { |
|
|
const item = randomItems[Math.floor(Math.random() * randomItems.length)]; |
|
|
spawnConsumableInArena(item); |
|
|
} |
|
|
} |
|
|
|
|
|
function collectConsumable(element, item) { |
|
|
gameState.energy = Math.min(gameState.maxEnergy, gameState.energy + item.energy); |
|
|
gameState.score += 10; |
|
|
gameState.xp += 5; |
|
|
|
|
|
createParticles(element.offsetLeft, element.offsetTop, item.color); |
|
|
showScorePopup(element.offsetLeft, element.offsetTop, '+10'); |
|
|
|
|
|
element.remove(); |
|
|
gameState.consumables = gameState.consumables.filter(c => c !== element); |
|
|
|
|
|
checkEvolution(); |
|
|
updateStats(); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
if (gameState.gameStarted) { |
|
|
const randomItem = consumablesData[Math.floor(Math.random() * consumablesData.length)]; |
|
|
spawnConsumableInArena(randomItem); |
|
|
} |
|
|
}, 3000); |
|
|
} |
|
|
|
|
|
function spawnClone() { |
|
|
if (gameState.energy >= 20) { |
|
|
gameState.energy -= 20; |
|
|
|
|
|
const evolutionMultiplier = 1 + (gameState.evolutionStage * 0.25); |
|
|
const clonePower = Math.floor(10 * evolutionMultiplier); |
|
|
|
|
|
const clone = document.createElement('div'); |
|
|
clone.className = 'clone'; |
|
|
|
|
|
const colors = ['#6c5ce7', '#00cec9', '#fd79a8', '#ffeaa7', '#00b894']; |
|
|
const color = colors[gameState.clones.length % colors.length]; |
|
|
clone.style.background = `linear-gradient(180deg, ${color}, ${adjustColor(color, -30)})`; |
|
|
clone.style.boxShadow = `0 0 15px ${color}`; |
|
|
|
|
|
const offset = (gameState.clones.length - Math.floor(gameState.clones.length / 2)) * 50; |
|
|
clone.style.left = `calc(50% + ${offset}px)`; |
|
|
clone.style.transform = 'translateX(-50%)'; |
|
|
|
|
|
clone.innerHTML = ` |
|
|
<div class="clone-face"> |
|
|
<div class="eye"></div> |
|
|
<div class="eye"></div> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
clone.dataset.power = clonePower; |
|
|
clone.dataset.hp = 50; |
|
|
|
|
|
gameArena.appendChild(clone); |
|
|
gameState.clones.push(clone); |
|
|
|
|
|
showNotification(`Clone spawned! Power: ${clonePower}`); |
|
|
updateStats(); |
|
|
} else { |
|
|
showNotification('Not enough energy!', 'error'); |
|
|
} |
|
|
} |
|
|
|
|
|
function spawnEnemy() { |
|
|
const enemy = document.createElement('div'); |
|
|
enemy.className = 'enemy'; |
|
|
enemy.style.left = Math.random() > 0.5 ? '10%' : '80%'; |
|
|
enemy.style.bottom = '100px'; |
|
|
|
|
|
const hp = 50 + (gameState.level * 20); |
|
|
enemy.dataset.hp = hp; |
|
|
enemy.dataset.maxHp = hp; |
|
|
|
|
|
enemy.innerHTML = ` |
|
|
<div class="enemy-face"> |
|
|
<div class="eye"></div> |
|
|
<div class="eye"></div> |
|
|
</div> |
|
|
<div class="hp-bar"> |
|
|
<div class="hp-fill" style="width: 100%"></div> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
gameArena.appendChild(enemy); |
|
|
gameState.enemies.push(enemy); |
|
|
} |
|
|
|
|
|
function attack() { |
|
|
if (gameState.enemies.length === 0) return; |
|
|
|
|
|
const totalPower = gameState.clones.reduce((sum, clone) => { |
|
|
return sum + parseInt(clone.dataset.power || 10); |
|
|
}, 10); |
|
|
|
|
|
gameState.enemies.forEach(enemy => { |
|
|
const currentHp = parseInt(enemy.dataset.hp); |
|
|
const newHp = currentHp - totalPower; |
|
|
enemy.dataset.hp = newHp; |
|
|
|
|
|
const maxHp = parseInt(enemy.dataset.maxHp); |
|
|
const hpPercent = Math.max(0, (newHp / maxHp) * 100); |
|
|
enemy.querySelector('.hp-fill').style.width = hpPercent + '%'; |
|
|
|
|
|
|
|
|
enemy.style.animation = 'none'; |
|
|
enemy.offsetHeight; |
|
|
enemy.style.animation = 'enemyMove 3s ease-in-out infinite'; |
|
|
|
|
|
if (newHp <= 0) { |
|
|
defeatEnemy(enemy); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
gameState.clones.forEach(clone => { |
|
|
clone.style.transform = 'translateX(-50%) scale(1.2)'; |
|
|
setTimeout(() => { |
|
|
clone.style.transform = 'translateX(-50%) scale(1)'; |
|
|
}, 200); |
|
|
}); |
|
|
} |
|
|
|
|
|
function defeatEnemy(enemy) { |
|
|
const points = 50 + (gameState. |
