<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ancient Geometric Superhero Battle Arena</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
background: radial-gradient(circle at center, #0a0a0a 0%, #1a0a2e 50%, #16213e 100%);
overflow: hidden;
font-family: 'Arial', sans-serif;
cursor: none;
}
.hud {
position: absolute;
top: 20px;
left: 20px;
color: #00ffff;
font-size: 18px;
font-weight: bold;
text-shadow: 0 0 10px #00ffff;
z-index: 100;
background: rgba(0, 0, 0, 0.7);
padding: 15px;
border-radius: 10px;
border: 2px solid #00ffff;
backdrop-filter: blur(10px);
}
.power-meter {
position: absolute;
top: 20px;
right: 20px;
width: 200px;
height: 30px;
border: 3px solid #ff0080;
border-radius: 15px;
background: rgba(0, 0, 0, 0.8);
overflow: hidden;
backdrop-filter: blur(10px);
}
.power-fill {
height: 100%;
background: linear-gradient(90deg, #ff0080, #ff4040, #ffff00);
width: 0%;
animation: powerPulse 2s ease-in-out infinite alternate;
box-shadow: 0 0 20px #ff0080;
}
@keyframes powerPulse {
0% { width: 60%; }
100% { width: 95%; }
}
.battle-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #ffffff;
font-size: 48px;
font-weight: bold;
text-align: center;
text-shadow: 0 0 30px #ffffff;
animation: titleGlow 3s ease-in-out infinite alternate;
pointer-events: none;
z-index: 50;
}
@keyframes titleGlow {
0% {
text-shadow: 0 0 30px #ffffff, 0 0 60px #00ffff;
transform: translate(-50%, -50%) scale(1);
}
100% {
text-shadow: 0 0 50px #ff0080, 0 0 100px #ffff00;
transform: translate(-50%, -50%) scale(1.05);
}
}
#battleCanvas {
display: block;
filter: contrast(1.2) saturate(1.3) brightness(1.1);
}
.controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: #ffffff;
text-align: center;
font-size: 14px;
background: rgba(0, 0, 0, 0.7);
padding: 10px 20px;
border-radius: 25px;
border: 1px solid #00ffff;
backdrop-filter: blur(10px);
}
</style>
</head>
<body>
<div class="hud">
🔥 ANCIENT WARRIORS ACTIVATED<br>
⚡ POWER LEVEL: MAXIMUM<br>
💎 CRYSTAL CORE: STABLE<br>
🌀 MAGNETIC FIELD: ACTIVE
</div>
<div class="power-meter">
<div class="power-fill"></div>
</div>
<div class="battle-title">
GEOMETRIC LEGENDS<br>
<span style="font-size: 24px; color: #00ffff;">ANCIENT SHAPES • ROBOTIC SOULS</span>
</div>
<div class="controls">
Move mouse to control camera • Click to unleash energy blasts
</div>
<canvas id="battleCanvas"></canvas>
<script>
// Scene setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('battleCanvas'), antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.2;
// Fog for atmosphere
scene.fog = new THREE.Fog(0x0a0a0a, 10, 100);
// Lighting setup
const ambientLight = new THREE.AmbientLight(0x404040, 0.3);
scene.add(ambientLight);
// Dynamic colored lights
const lights = [];
const lightColors = [0x00ffff, 0xff0080, 0xffff00, 0x8000ff, 0xff4040];
for (let i = 0; i < 5; i++) {
const light = new THREE.PointLight(lightColors[i], 2, 50);
light.position.set(
(Math.random() - 0.5) * 60,
Math.random() * 20 + 10,
(Math.random() - 0.5) * 60
);
light.castShadow = true;
scene.add(light);
lights.push(light);
}
// Superhero materials with advanced effects
const createHeroMaterial = (color, emissive) => {
return new THREE.MeshPhysicalMaterial({
color: color,
emissive: emissive,
emissiveIntensity: 0.3,
metalness: 0.8,
roughness: 0.2,
clearcoat: 1,
clearcoatRoughness: 0.1,
transparent: true,
opacity: 0.9
});
};
// Crystal materials
const createCrystalMaterial = (color) => {
return new THREE.MeshPhysicalMaterial({
color: color,
transmission: 0.8,
opacity: 0.7,
metalness: 0,
roughness: 0,
ior: 2.4,
thickness: 0.5,
transparent: true,
clearcoat: 1
});
};
// Ancient Geometric Superheroes
const heroes = [];
// Hero 1: Tetrahedron Warrior - "APEX"
const tetraGeometry = new THREE.TetrahedronGeometry(3, 2);
const tetraHero = new THREE.Mesh(tetraGeometry, createHeroMaterial(0x00ffff, 0x004466));
tetraHero.position.set(-15, 5, 0);
tetraHero.userData = { name: 'APEX', power: 'Lightning Strike', speed: 0.05 };
scene.add(tetraHero);
heroes.push(tetraHero);
// Hero 2: Octahedron Guardian - "PRISM"
const octaGeometry = new THREE.OctahedronGeometry(3, 2);
const octaHero = new THREE.Mesh(octaGeometry, createHeroMaterial(0xff0080, 0x660033));
octaHero.position.set(15, 5, 0);
octaHero.userData = { name: 'PRISM', power: 'Energy Shield', speed: 0.03 };
scene.add(octaHero);
heroes.push(octaHero);
// Hero 3: Icosahedron Mystic - "COSMOS"
const icosaGeometry = new THREE.IcosahedronGeometry(3, 1);
const icosaHero = new THREE.Mesh(icosaGeometry, createHeroMaterial(0xffff00, 0x666600));
icosaHero.position.set(0, 8, -15);
icosaHero.userData = { name: 'COSMOS', power: 'Cosmic Blast', speed: 0.04 };
scene.add(icosaHero);
heroes.push(icosaHero);
// Hero 4: Dodecahedron Titan - "INFINITY"
const dodecaGeometry = new THREE.DodecahedronGeometry(3, 1);
const dodecaHero = new THREE.Mesh(dodecaGeometry, createHeroMaterial(0x8000ff, 0x330066));
dodecaHero.position.set(0, 8, 15);
dodecaHero.userData = { name: 'INFINITY', power: 'Reality Warp', speed: 0.02 };
scene.add(dodecaHero);
heroes.push(dodecaHero);
// Floating crystals and bismuth structures
const crystals = [];
for (let i = 0; i < 20; i++) {
const crystalGeometry = new THREE.ConeGeometry(0.5, 2, 6);
const crystalMaterial = createCrystalMaterial(lightColors[i % lightColors.length]);
const crystal = new THREE.Mesh(crystalGeometry, crystalMaterial);
crystal.position.set(
(Math.random() - 0.5) * 80,
Math.random() * 20 + 5,
(Math.random() - 0.5) * 80
);
crystal.rotation.set(
Math.random() * Math.PI,
Math.random() * Math.PI,
Math.random() * Math.PI
);
scene.add(crystal);
crystals.push(crystal);
}
// Bismuth-like stepped structures
const bismuthStructures = [];
for (let i = 0; i < 8; i++) {
const group = new THREE.Group();
for (let j = 0; j < 5; j++) {
const size = (5 - j) * 0.5;
const geometry = new THREE.BoxGeometry(size, 0.3, size);
const material = new THREE.MeshPhysicalMaterial({
color: new THREE.Color().setHSL((i * 0.125 + j * 0.05) % 1, 0.8, 0.6),
metalness: 1,
roughness: 0.1,
clearcoat: 1
});
const cube = new THREE.Mesh(geometry, material);
cube.position.y = j * 0.3;
group.add(cube);
}
group.position.set(
(Math.random() - 0.5) * 60,
0,
(Math.random() - 0.5) * 60
);
scene.add(group);
bismuthStructures.push(group);
}
// Particle system for magical effects
const particleGeometry = new THREE.BufferGeometry();
const particleCount = 1000;
const positions = new Float32Array(particleCount * 3);
const colors = new Float32Array(particleCount * 3);
const velocities = new Float32Array(particleCount * 3);
for (let i = 0; i < particleCount; i++) {
positions[i * 3] = (Math.random() - 0.5) * 100;
positions[i * 3 + 1] = Math.random() * 30;
positions[i * 3 + 2] = (Math.random() - 0.5) * 100;
const color = new THREE.Color(lightColors[Math.floor(Math.random() * lightColors.length)]);
colors[i * 3] = color.r;
colors[i * 3 + 1] = color.g;
colors[i * 3 + 2] = color.b;
velocities[i * 3] = (Math.random() - 0.5) * 0.02;
velocities[i * 3 + 1] = Math.random() * 0.01;
velocities[i * 3 + 2] = (Math.random() - 0.5) * 0.02;
}
particleGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
particleGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
const particleMaterial = new THREE.PointsMaterial({
size: 0.5,
vertexColors: true,
transparent: true,
opacity: 0.8,
blending: THREE.AdditiveBlending
});
const particles = new THREE.Points(particleGeometry, particleMaterial);
scene.add(particles);
// Camera setup
camera.position.set(0, 15, 30);
camera.lookAt(0, 5, 0);
// Mouse controls
let mouseX = 0, mouseY = 0;
let targetRotationX = 0, targetRotationY = 0;
document.addEventListener('mousemove', (event) => {
mouseX = (event.clientX - window.innerWidth / 2) / (window.innerWidth / 2);
mouseY = (event.clientY - window.innerHeight / 2) / (window.innerHeight / 2);
});
// Click for energy blast effect
document.addEventListener('click', () => {
// Create energy blast effect
const blastGeometry = new THREE.SphereGeometry(0.5, 16, 16);
const blastMaterial = new THREE.MeshBasicMaterial({
color: 0xffffff,
transparent: true,
opacity: 1
});
const blast = new THREE.Mesh(blastGeometry, blastMaterial);
blast.position.copy(camera.position);
scene.add(blast);
// Animate blast
let scale = 0;
const animateBlast = () => {
scale += 0.5;
blast.scale.setScalar(scale);
blast.material.opacity = Math.max(0, 1 - scale / 10);
if (blast.material.opacity > 0) {
requestAnimationFrame(animateBlast);
} else {
scene.remove(blast);
}
};
animateBlast();
});
// Animation loop
let time = 0;
function animate() {
requestAnimationFrame(animate);
time += 0.016;
// Camera movement based on mouse
targetRotationX = mouseY * 0.3;
targetRotationY = mouseX * 0.3;
camera.position.x += (Math.sin(targetRotationY) * 30 - camera.position.x) * 0.05;
camera.position.z += (Math.cos(targetRotationY) * 30 - camera.position.z) * 0.05;
camera.position.y += (15 + targetRotationX * 10 - camera.position.y) * 0.05;
camera.lookAt(0, 5, 0);
// Animate heroes with magnetic levitation effect
heroes.forEach((hero, index) => {
const speed = hero.userData.speed;
const offset = index * Math.PI * 0.5;
// Rotation and levitation
hero.rotation.x += speed;
hero.rotation.y += speed * 1.5;
hero.rotation.z += speed * 0.8;
// Magnetic levitation (floating up and down)
hero.position.y += Math.sin(time * 2 + offset) * 0.02;
// Orbital motion
const radius = 8;
hero.position.x += Math.cos(time * 0.5 + offset) * 0.02;
hero.position.z += Math.sin(time * 0.5 + offset) * 0.02;
// Pulsing glow effect
hero.material.emissiveIntensity = 0.3 + Math.sin(time * 3 + offset) * 0.2;
});
// Animate lights for dynamic effects
lights.forEach((light, index) => {
const offset = index * Math.PI * 0.4;
light.position.x += Math.sin(time + offset) * 0.1;
light.position.z += Math.cos(time + offset) * 0.1;
light.intensity = 2 + Math.sin(time * 2 + offset) * 0.5;
});
// Animate crystals
crystals.forEach((crystal, index) => {
crystal.rotation.x += 0.01;
crystal.rotation.y += 0.015;
crystal.position.y += Math.sin(time * 1.5 + index) * 0.01;
});
// Animate bismuth structures
bismuthStructures.forEach((structure, index) => {
structure.rotation.y += 0.005;
structure.children.forEach((child, childIndex) => {
child.material.color.setHSL(
(time * 0.1 + index * 0.125 + childIndex * 0.05) % 1,
0.8,
0.6
);
});
});
// Animate particles
const positions = particles.geometry.attributes.position.array;
for (let i = 0; i < particleCount; i++) {
positions[i * 3] += velocities[i * 3];
positions[i * 3 + 1] += velocities[i * 3 + 1];
positions[i * 3 + 2] += velocities[i * 3 + 2];
// Reset particles that go too far
if (Math.abs(positions[i * 3]) > 50 || positions[i * 3 + 1] > 30) {
positions[i * 3] = (Math.random() - 0.5) * 100;
positions[i * 3 + 1] = 0;
positions[i * 3 + 2] = (Math.random() - 0.5) * 100;
}
}
particles.geometry.attributes.position.needsUpdate = true;
renderer.render(scene, camera);
}
// Handle window resize
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
// Start animation
animate();
// Remove title after 5 secondshttps://claude.ai/public/artifacts/77db5283-fb08-462d-98c9-8485496fad43
setTimeout(() => {
const title = document.querySelector('.battle-title');
title.style.opacity = '0';
title.style.transition = 'opacity 2s';https://claude.ai/public/artifacts/77db5283-fb08-462d-98c9-8485496fad43
}, 5000);
</script>
</body>
</html>
.png)
No comments:
Post a Comment