https://alphaomegallc.blogspot.com/2025/05/alpha-updatehttpsclaudeaipublicartifact_22.html <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TRON Battle Arena</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Orbitron', monospace;
background: linear-gradient(45deg, #000011, #001122, #000033);
color: #00FFFF;
overflow: hidden;
height: 100vh;
}
.game-container {
position: relative;
width: 100vw;
height: 100vh;
background:
radial-gradient(circle at 20% 20%, rgba(0, 255, 255, 0.3) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 102, 0, 0.3) 0%, transparent 50%),
linear-gradient(90deg, transparent 49%, rgba(0, 255, 255, 0.1) 50%, transparent 51%),
linear-gradient(0deg, transparent 49%, rgba(0, 255, 255, 0.1) 50%, transparent 51%);
background-size: 100% 100%, 100% 100%, 50px 50px, 50px 50px;
animation: gridPulse 3s ease-in-out infinite alternate;
}
@keyframes gridPulse {
0% { opacity: 0.8; }
100% { opacity: 1; }
}
.hud {
position: absolute;
top: 20px;
left: 20px;
z-index: 100;
display: flex;
gap: 30px;
}
.hud-panel {
background: rgba(0, 0, 0, 0.8);
border: 2px solid #00FFFF;
padding: 15px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
animation: hudGlow 2s ease-in-out infinite alternate;
}
@keyframes hudGlow {
0% { box-shadow: 0 0 20px rgba(0, 255, 255, 0.5); }
100% { box-shadow: 0 0 30px rgba(0, 255, 255, 0.8); }
}
.game-canvas {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.light-cycle {
position: absolute;
width: 40px;
height: 20px;
background: linear-gradient(90deg, #00FFFF, #0088FF);
border-radius: 10px;
box-shadow: 0 0 15px #00FFFF;
transition: all 0.1s linear;
z-index: 10;
}
.light-cycle::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, #00FFFF, transparent);
border-radius: 10px;
animation: cycleGlow 0.5s ease-in-out infinite alternate;
}
@keyframes cycleGlow {
0% { opacity: 0.5; }
100% { opacity: 1; }
}
.light-trail {
position: absolute;
background: #00FFFF;
box-shadow: 0 0 10px #00FFFF;
z-index: 5;
animation: trailFade 1s ease-out forwards;
}
@keyframes trailFade {
0% { opacity: 1; }
100% { opacity: 0.3; }
}
.enemy-robot {
position: absolute;
width: 30px;
height: 30px;
background: linear-gradient(45deg, #FF6600, #FF3300);
border-radius: 5px;
box-shadow: 0 0 15px #FF6600;
z-index: 10;
animation: robotPulse 1s ease-in-out infinite;
}
@keyframes robotPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.energy-blast {
position: absolute;
width: 8px;
height: 8px;
background: radial-gradient(circle, #FFFF00, #FF6600);
border-radius: 50%;
box-shadow: 0 0 10px #FFFF00;
animation: blastMove 2s linear forwards;
}
@keyframes blastMove {
0% { opacity: 1; }
100% { opacity: 0; }
}
.explosion {
position: absolute;
width: 60px;
height: 60px;
background: radial-gradient(circle, #FFFF00, #FF6600, transparent);
border-radius: 50%;
animation: explode 0.5s ease-out forwards;
z-index: 15;
}
@keyframes explode {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(3);
opacity: 0;
}
}
.controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 100;
}
.control-btn {
background: rgba(0, 0, 0, 0.8);
border: 2px solid #00FFFF;
color: #00FFFF;
padding: 15px 20px;
border-radius: 10px;
font-family: 'Orbitron', monospace;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}
.control-btn:hover {
background: rgba(0, 255, 255, 0.2);
box-shadow: 0 0 25px rgba(0, 255, 255, 0.6);
transform: translateY(-2px);
}
.control-btn:active {
transform: translateY(0);
box-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
}
.game-over {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.9);
border: 3px solid #FF6600;
padding: 40px;
border-radius: 20px;
text-align: center;
z-index: 1000;
display: none;
box-shadow: 0 0 40px rgba(255, 102, 0, 0.8);
}
.game-over h2 {
color: #FF6600;
font-size: 2.5em;
margin-bottom: 20px;
text-shadow: 0 0 10px #FF6600;
}
.restart-btn {
background: linear-gradient(45deg, #FF6600, #FF3300);
border: none;
color: white;
padding: 15px 30px;
border-radius: 10px;
font-family: 'Orbitron', monospace;
font-size: 1.2em;
font-weight: bold;
cursor: pointer;
margin-top: 20px;
transition: all 0.3s;
box-shadow: 0 0 20px rgba(255, 102, 0, 0.5);
}
.restart-btn:hover {
transform: translateY(-3px);
box-shadow: 0 0 30px rgba(255, 102, 0, 0.8);
}
.particle {
position: absolute;
width: 2px;
height: 2px;
background: #00FFFF;
border-radius: 50%;
pointer-events: none;
animation: particleFloat 3s linear infinite;
}
@keyframes particleFloat {
0% {
opacity: 1;
transform: translateY(0) rotate(0deg);
}
100% {
opacity: 0;
transform: translateY(-100px) rotate(360deg);
}
}
</style>
</head>
<body>
<div class="game-container">
<div class="hud">
<div class="hud-panel">
<div>SCORE: <span id="score">0</span></div>
</div>
<div class="hud-panel">
<div>LEVEL: <span id="level">1</span></div>
</div>
<div class="hud-panel">
<div>ENERGY: <span id="energy">100</span>%</div>
</div>
</div>
<div class="game-canvas" id="gameCanvas">
<div class="light-cycle" id="player"></div>
</div>
<div class="controls">
<button class="control-btn" id="leftBtn">◀ LEFT</button>
<button class="control-btn" id="upBtn">▲ UP</button>
<button class="control-btn" id="downBtn">▼ DOWN</button>
<button class="control-btn" id="rightBtn">▶ RIGHT</button>
<button class="control-btn" id="fireBtn">π₯ FIRE</button>
</div>
<div class="game-over" id="gameOver">
<h2>SYSTEM TERMINATED</h2>
<p>Your light cycle has been derezzed!</p>
<p>Final Score: <span id="finalScore">0</span></p>
<button class="restart-btn" onclick="restartGame()">REBOOT SYSTEM</button>
</div>
</div>
<script>
class TronBattleGame {
constructor() {
this.canvas = document.getElementById('gameCanvas');
this.player = document.getElementById('player');
this.score = 0;
this.level = 1;
this.energy = 100;
this.gameRunning = true;
this.enemies = [];
this.blasts = [];
this.trails = [];
this.particles = [];
this.playerPos = { x: 100, y: 300 };
this.playerDir = { x: 1, y: 0 };
this.playerSpeed = 3;
this.keys = {};
this.lastTrailTime = 0;
this.init();
}
init() {
this.updatePlayerPosition();
this.bindEvents();
this.spawnEnemies();
this.gameLoop();
this.createParticles();
}
bindEvents() {
// Keyboard controls
document.addEventListener('keydown', (e) => {
this.keys[e.key] = true;
});
document.addEventListener('keyup', (e) => {
this.keys[e.key] = false;
});
// Touch controls
document.getElementById('leftBtn').addEventListener('click', () => {
this.playerDir = { x: -1, y: 0 };
});
document.getElementById('rightBtn').addEventListener('click', () => {
this.playerDir = { x: 1, y: 0 };
});
document.getElementById('upBtn').addEventListener('click', () => {
this.playerDir = { x: 0, y: -1 };
});
document.getElementById('downBtn').addEventListener('click', () => {
this.playerDir = { x: 0, y: 1 };
});
document.getElementById('fireBtn').addEventListener('click', () => {
this.fireBlast();
});
}
handleInput() {
if (this.keys['ArrowLeft'] || this.keys['a']) {
this.playerDir = { x: -1, y: 0 };
}
if (this.keys['ArrowRight'] || this.keys['d']) {
this.playerDir = { x: 1, y: 0 };
}
if (this.keys['ArrowUp'] || this.keys['w']) {
this.playerDir = { x: 0, y: -1 };
}
if (this.keys['ArrowDown'] || this.keys['s']) {
this.playerDir = { x: 0, y: 1 };
}
if (this.keys[' '] || this.keys['Enter']) {
this.fireBlast();
}
}
updatePlayer() {
this.playerPos.x += this.playerDir.x * this.playerSpeed;
this.playerPos.y += this.playerDir.y * this.playerSpeed;
// Screen wrapping
if (this.playerPos.x < 0) this.playerPos.x = window.innerWidth - 40;
if (this.playerPos.x > window.innerWidth - 40) this.playerPos.x = 0;
if (this.playerPos.y < 0) this.playerPos.y = window.innerHeight - 20;
if (this.playerPos.y > window.innerHeight - 20) this.playerPos.y = 0;
this.updatePlayerPosition();
this.createTrail();
}
updatePlayerPosition() {
this.player.style.left = this.playerPos.x + 'px';
this.player.style.top = this.playerPos.y + 'px';
// Rotate player based on direction
let angle = Math.atan2(this.playerDir.y, this.playerDir.x) * 180 / Math.PI;
this.player.style.transform = `rotate(${angle}deg)`;
}
createTrail() {
const now = Date.now();
if (now - this.lastTrailTime > 50) {
const trail = document.createElement('div');
trail.className = 'light-trail';
trail.style.left = (this.playerPos.x + 20) + 'px';
trail.style.top = (this.playerPos.y + 10) + 'px';
trail.style.width = '4px';
trail.style.height = '4px';
this.canvas.appendChild(trail);
this.trails.push(trail);
this.lastTrailTime = now;
// Remove old trails
setTimeout(() => {
if (trail.parentNode) {
trail.parentNode.removeChild(trail);
}
}, 1000);
}
}
spawnEnemies() {
setInterval(() => {
if (!this.gameRunning) return;
const enemy = document.createElement('div');
enemy.className = 'enemy-robot';
enemy.style.left = Math.random() * (window.innerWidth - 30) + 'px';
enemy.style.top = Math.random() * (window.innerHeight - 30) + 'px';
this.canvas.appendChild(enemy);
this.enemies.push({
element: enemy,
x: parseFloat(enemy.style.left),
y: parseFloat(enemy.style.top),
dx: (Math.random() - 0.5) * 2,
dy: (Math.random() - 0.5) * 2
});
}, 2000 - (this.level * 100));
}
updateEnemies() {
this.enemies.forEach((enemy, index) => {
enemy.x += enemy.dx;
enemy.y += enemy.dy;
// Bounce off walls
if (enemy.x <= 0 || enemy.x >= window.innerWidth - 30) enemy.dx *= -1;
if (enemy.y <= 0 || enemy.y >= window.innerHeight - 30) enemy.dy *= -1;
enemy.element.style.left = enemy.x + 'px';
enemy.element.style.top = enemy.y + 'px';
// Check collision with player
if (this.checkCollision(this.playerPos.x, this.playerPos.y, 40, 20,
enemy.x, enemy.y, 30, 30)) {
this.gameOver();
}
});
}
fireBlast() {
if (this.energy < 10) return;
this.energy -= 10;
document.getElementById('energy').textContent = this.energy;
const blast = document.createElement('div');
blast.className = 'energy-blast';
blast.style.left = (this.playerPos.x + 20) + 'px';
blast.style.top = (this.playerPos.y + 10) + 'px';
this.canvas.appendChild(blast);
this.blasts.push({
element: blast,
x: this.playerPos.x + 20,
y: this.playerPos.y + 10,
dx: this.playerDir.x * 8,
dy: this.playerDir.y * 8
});
}
updateBlasts() {
this.blasts.forEach((blast, index) => {
blast.x += blast.dx;
blast.y += blast.dy;
blast.element.style.left = blast.x + 'px';
blast.element.style.top = blast.y + 'px';
// Remove blasts that go off screen
if (blast.x < 0 || blast.x > window.innerWidth ||
blast.y < 0 || blast.y > window.innerHeight) {
blast.element.remove();
this.blasts.splice(index, 1);
return;
}
// Check collision with enemies
this.enemies.forEach((enemy, enemyIndex) => {
if (this.checkCollision(blast.x, blast.y, 8, 8,
enemy.x, enemy.y, 30, 30)) {
this.createExplosion(enemy.x + 15, enemy.y + 15);
enemy.element.remove();
this.enemies.splice(enemyIndex, 1);
blast.element.remove();
this.blasts.splice(index, 1);
this.score += 100;
document.getElementById('score').textContent = this.score;
if (this.score % 1000 === 0) {
this.level++;
document.getElementById('level').textContent = this.level;
}
}
});
});
}
checkCollision(x1, y1, w1, h1, x2, y2, w2, h2) {
return x1 < x2 + w2 && x1 + w1 > x2 && y1 < y2 + h2 && y1 + h1 > y2;
}
createExplosion(x, y) {
const explosion = document.createElement('div');
explosion.className = 'explosion';
explosion.style.left = (x - 30) + 'px';
explosion.style.top = (y - 30) + 'px';
this.canvas.appendChild(explosion);
setTimeout(() => {
explosion.remove();
}, 500);
}
createParticles() {
setInterval(() => {
if (!this.gameRunning) return;
for (let i = 0; i < 3; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
particle.style.left = Math.random() * window.innerWidth + 'px';
particle.style.top = window.innerHeight + 'px';
this.canvas.appendChild(particle);
setTimeout(() => {
particle.remove();
}, 3000);
}
}, 500);
}
regenerateEnergy() {
if (this.energy < 100) {
this.energy += 0.5;
document.getElementById('energy').textContent = Math.floor(this.energy);
}
}
gameOver() {
this.gameRunning = false;
document.getElementById('finalScore').textContent = this.score;
document.getElementById('gameOver').style.display = 'block';
}
gameLoop() {
if (!this.gameRunning) return;
this.handleInput();
this.updatePlayer();
this.updateEnemies();
this.updateBlasts();
this.regenerateEnergy();
requestAnimationFrame(() => this.gameLoop());
}
}
let game;
function startGame() {
game = new TronBattleGame();
}
function restartGame() {
// Clear all elements
document.querySelectorAll('.enemy-robot, .energy-blast, .light-trail, .explosion, .particle').forEach(el => el.remove());
document.getElementById('gameOver').style.display = 'none';
// Reset scores
document.getElementById('score').textContent = '0';
document.getElementById('level').textContent = '1';https://claude.ai/public/artifacts/65cf9c1b-ae76-46be-b265-ded3dad459d6
https://getnitricboost.net/discovery#aff=Alph7affl
document.getElementById('energy').textContent = '100';
startGame();
}
// Start the game when page loads
window.addEventListener('load', startGame);
</script>
</body>
</html>