Alphaomegallc.: Alpha updatehttps://claude.ai/public/artifacts/65cf9c1b-ae76-46be-b265-ded3dad459d6

https://alphaomegallc.blogspot.com/2025/05/alpha-updatehttpsclaudeaipublicartifact_22.html

<!DOCTYPE html>

<head>

<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>SCORE: <span id="score">0</span></div>

</div>

<div>LEVEL: <span id="level">1</span></div>

</div>

<div>ENERGY: <span id="energy">100</span>%</div>

</div>

</div>

<button class="control-btn" id="rightBtn">▶ RIGHT</button>

</div>

<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>

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>

Alphaomegallc.

Thursday, May 22, 2025

Alpha updatehttps://claude.ai/public/artifacts/65cf9c1b-ae76-46be-b265-ded3dad459d6

No comments:

Post a Comment

Batman alpha7 protocolhttps://claude.ai/public/artifacts/904390fd-57fd-41d4-b084-8f188e3eb738

Report Abuse

Labels