Spaces:

andreaschandra
/

cybernetic-pong-x

Running

App Files Files Community

cybernetic-pong-x / index.html

andreaschandra

Add 2 files

7cdee6b verified 15 days ago

raw

history blame contribute delete

23.9 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Cybernetic Pong X</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

	body {
	font-family: 'Orbitron', sans-serif;
	background-color: #0a0a1a;
	overflow: hidden;
	color: #00fffc;
	}

	#gameCanvas {
	background-color: #000022;
	border: 2px solid #00fffc;
	box-shadow: 0 0 20px #00fffc, inset 0 0 20px #00fffc;
	}

	.particle {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	}

	.glow-text {
	text-shadow: 0 0 10px #00fffc, 0 0 20px #00fffc;
	}

	.cyber-btn {
	background: linear-gradient(45deg, #00fffc, #0088ff);
	border: none;
	color: #000;
	font-weight: bold;
	transition: all 0.3s;
	box-shadow: 0 0 15px #00fffc;
	}

	.cyber-btn:hover {
	transform: scale(1.05);
	box-shadow: 0 0 25px #00fffc;
	}

	.grid-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:
	linear-gradient(rgba(0, 255, 252, 0.1) 1px, transparent 1px),
	linear-gradient(90deg, rgba(0, 255, 252, 0.1) 1px, transparent 1px);
	background-size: 30px 30px;
	pointer-events: none;
	}

	.score-display {
	background: rgba(0, 20, 40, 0.7);
	border: 2px solid #00fffc;
	box-shadow: 0 0 15px #00fffc;
	}
	</style>
	</head>
	<body class="flex flex-col items-center justify-center min-h-screen">
	<div class="grid-overlay"></div>

	<h1 class="text-5xl font-bold mb-6 glow-text">CYBERNETIC PONG X</h1>

	<div class="relative">
	<canvas id="gameCanvas" width="800" height="500" class="mb-4"></canvas>

	<div id="playerScore" class="score-display absolute top-4 left-4 px-4 py-2 rounded-lg text-2xl font-bold">0</div>
	<div id="aiScore" class="score-display absolute top-4 right-4 px-4 py-2 rounded-lg text-2xl font-bold">0</div>

	<div id="startScreen" class="absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-80">
	<h2 class="text-4xl font-bold mb-8 glow-text">READY FOR CYBER COMBAT?</h2>
	<button id="startBtn" class="cyber-btn px-8 py-3 rounded-full text-xl mb-4">
	<i class="fas fa-play mr-2"></i> INITIATE
	</button>
	<div class="flex space-x-4">
	<button id="easyBtn" class="cyber-btn px-4 py-2 rounded-full">EASY MODE</button>
	<button id="mediumBtn" class="cyber-btn px-4 py-2 rounded-full">NORMAL MODE</button>
	<button id="hardBtn" class="cyber-btn px-4 py-2 rounded-full">HACKER MODE</button>
	</div>
	</div>

	<div id="gameOverScreen" class="absolute inset-0 hidden flex-col items-center justify-center bg-black bg-opacity-80">
	<h2 id="gameOverText" class="text-4xl font-bold mb-8 glow-text"></h2>
	<button id="restartBtn" class="cyber-btn px-8 py-3 rounded-full text-xl">
	<i class="fas fa-redo mr-2"></i> REBOOT
	</button>
	</div>
	</div>

	<div class="flex space-x-8 mt-6">
	<div class="flex items-center">
	<i class="fas fa-keyboard text-2xl mr-2 glow-text"></i>
	<span class="text-xl">W/S: Move Paddle</span>
	</div>
	<div class="flex items-center">
	<i class="fas fa-bolt text-2xl mr-2 glow-text"></i>
	<span class="text-xl">SPACE: Power Shot</span>
	</div>
	</div>

	<script>
	document.addEventListener('DOMContentLoaded', () => {
	const canvas = document.getElementById('gameCanvas');
	const ctx = canvas.getContext('2d');
	const playerScoreDisplay = document.getElementById('playerScore');
	const aiScoreDisplay = document.getElementById('aiScore');
	const startScreen = document.getElementById('startScreen');
	const gameOverScreen = document.getElementById('gameOverScreen');
	const gameOverText = document.getElementById('gameOverText');
	const startBtn = document.getElementById('startBtn');
	const restartBtn = document.getElementById('restartBtn');
	const easyBtn = document.getElementById('easyBtn');
	const mediumBtn = document.getElementById('mediumBtn');
	const hardBtn = document.getElementById('hardBtn');

	// Game variables
	let gameRunning = false;
	let difficulty = 5; // Default medium difficulty
	let playerScore = 0;
	let aiScore = 0;
	let powerCharge = 0;
	let powerActive = false;

	// Paddle and ball properties
	const paddleWidth = 15;
	const paddleHeight = 100;
	const ballSize = 15;

	let playerPaddle = {
	x: 30,
	y: canvas.height / 2 - paddleHeight / 2,
	width: paddleWidth,
	height: paddleHeight,
	speed: 8,
	dy: 0
	};

	let aiPaddle = {
	x: canvas.width - 30 - paddleWidth,
	y: canvas.height / 2 - paddleHeight / 2,
	width: paddleWidth,
	height: paddleHeight,
	speed: difficulty,
	dy: 0
	};

	let ball = {
	x: canvas.width / 2,
	y: canvas.height / 2,
	width: ballSize,
	height: ballSize,
	dx: 5,
	dy: 5,
	speed: 5,
	trail: []
	};

	// Particles for explosions
	let particles = [];

	// Event listeners
	startBtn.addEventListener('click', startGame);
	restartBtn.addEventListener('click', restartGame);
	easyBtn.addEventListener('click', () => setDifficulty(3));
	mediumBtn.addEventListener('click', () => setDifficulty(5));
	hardBtn.addEventListener('click', () => setDifficulty(8));

	document.addEventListener('keydown', keyDownHandler);
	document.addEventListener('keyup', keyUpHandler);

	function setDifficulty(level) {
	difficulty = level;
	aiPaddle.speed = level;

	// Update active button style
	[easyBtn, mediumBtn, hardBtn].forEach(btn => btn.classList.remove('bg-purple-600'));
	if (level === 3) easyBtn.classList.add('bg-purple-600');
	if (level === 5) mediumBtn.classList.add('bg-purple-600');
	if (level === 8) hardBtn.classList.add('bg-purple-600');
	}

	function keyDownHandler(e) {
	if (!gameRunning) return;

	if (e.key === 'w' \|\| e.key === 'W') {
	playerPaddle.dy = -playerPaddle.speed;
	} else if (e.key === 's' \|\| e.key === 'S') {
	playerPaddle.dy = playerPaddle.speed;
	} else if (e.key === ' ' && powerCharge >= 100) {
	activatePowerShot();
	}
	}

	function keyUpHandler(e) {
	if (e.key === 'w' \|\| e.key === 'W' \|\| e.key === 's' \|\| e.key === 'S') {
	playerPaddle.dy = 0;
	}
	}

	function activatePowerShot() {
	powerActive = true;
	powerCharge = 0;

	// Create particles for power activation
	for (let i = 0; i < 30; i++) {
	createParticle(
	playerPaddle.x + playerPaddle.width,
	playerPaddle.y + playerPaddle.height / 2,
	'#00fffc',
	true
	);
	}

	// Ball gets super speed temporarily
	ball.dx = 15 * Math.sign(ball.dx);
	ball.dy = 15 * Math.sign(ball.dy);

	setTimeout(() => {
	powerActive = false;
	ball.dx = 5 * Math.sign(ball.dx);
	ball.dy = 5 * Math.sign(ball.dy);
	}, 1000);
	}

	function startGame() {
	gameRunning = true;
	startScreen.classList.add('hidden');
	resetGame();
	requestAnimationFrame(gameLoop);
	}

	function restartGame() {
	gameOverScreen.classList.add('hidden');
	playerScore = 0;
	aiScore = 0;
	updateScore();
	resetGame();
	requestAnimationFrame(gameLoop);
	}

	function resetGame() {
	ball.x = canvas.width / 2;
	ball.y = canvas.height / 2;
	ball.dx = 5 * (Math.random() > 0.5 ? 1 : -1);
	ball.dy = 5 * (Math.random() > 0.5 ? 1 : -1);
	ball.trail = [];

	playerPaddle.y = canvas.height / 2 - paddleHeight / 2;
	aiPaddle.y = canvas.height / 2 - paddleHeight / 2;

	powerCharge = 0;
	powerActive = false;
	}

	function gameLoop() {
	if (!gameRunning) return;

	clearCanvas();
	update();
	draw();

	requestAnimationFrame(gameLoop);
	}

	function clearCanvas() {
	ctx.fillStyle = '#000022';
	ctx.fillRect(0, 0, canvas.width, canvas.height);

	// Draw grid lines
	ctx.strokeStyle = 'rgba(0, 255, 252, 0.1)';
	ctx.lineWidth = 1;

	// Vertical lines
	for (let x = 0; x < canvas.width; x += 30) {
	ctx.beginPath();
	ctx.moveTo(x, 0);
	ctx.lineTo(x, canvas.height);
	ctx.stroke();
	}

	// Horizontal lines
	for (let y = 0; y < canvas.height; y += 30) {
	ctx.beginPath();
	ctx.moveTo(0, y);
	ctx.lineTo(canvas.width, y);
	ctx.stroke();
	}

	// Center line
	ctx.strokeStyle = 'rgba(0, 255, 252, 0.3)';
	ctx.setLineDash([10, 10]);
	ctx.beginPath();
	ctx.moveTo(canvas.width / 2, 0);
	ctx.lineTo(canvas.width / 2, canvas.height);
	ctx.stroke();
	ctx.setLineDash([]);
	}

	function update() {
	// Update player paddle position
	playerPaddle.y += playerPaddle.dy;

	// Keep player paddle in bounds
	if (playerPaddle.y < 0) {
	playerPaddle.y = 0;
	} else if (playerPaddle.y + playerPaddle.height > canvas.height) {
	playerPaddle.y = canvas.height - playerPaddle.height;
	}

	// AI paddle follows ball with some imperfection
	const aiPaddleCenter = aiPaddle.y + aiPaddle.height / 2;
	const ballCenter = ball.y + ball.height / 2;

	// Add some randomness to AI difficulty
	const aiError = Math.random() * (difficulty * 5);

	if (aiPaddleCenter < ballCenter - aiError) {
	aiPaddle.dy = aiPaddle.speed;
	} else if (aiPaddleCenter > ballCenter + aiError) {
	aiPaddle.dy = -aiPaddle.speed;
	} else {
	aiPaddle.dy = 0;
	}

	aiPaddle.y += aiPaddle.dy;

	// Keep AI paddle in bounds
	if (aiPaddle.y < 0) {
	aiPaddle.y = 0;
	} else if (aiPaddle.y + aiPaddle.height > canvas.height) {
	aiPaddle.y = canvas.height - aiPaddle.height;
	}

	// Update ball position
	ball.x += ball.dx;
	ball.y += ball.dy;

	// Add current position to trail (for cool effect)
	ball.trail.push({x: ball.x, y: ball.y});
	if (ball.trail.length > 10) {
	ball.trail.shift();
	}

	// Ball collision with top and bottom walls
	if (ball.y < 0 \|\| ball.y + ball.height > canvas.height) {
	ball.dy = -ball.dy;
	createImpactParticles(ball.x, ball.y);
	}

	// Ball collision with paddles
	if (
	ball.x < playerPaddle.x + playerPaddle.width &&
	ball.x + ball.width > playerPaddle.x &&
	ball.y < playerPaddle.y + playerPaddle.height &&
	ball.y + ball.height > playerPaddle.y
	) {
	// Calculate angle based on where ball hits paddle
	const hitPosition = (ball.y - playerPaddle.y) / playerPaddle.height;
	const angle = (hitPosition - 0.5) * Math.PI / 2;

	ball.dx = Math.abs(ball.dx) + 0.2; // Increase speed slightly
	ball.dy = Math.sin(angle) * ball.speed;

	// Charge power on hit
	powerCharge = Math.min(100, powerCharge + 20);

	createImpactParticles(playerPaddle.x + playerPaddle.width, ball.y);
	}

	if (
	ball.x < aiPaddle.x + aiPaddle.width &&
	ball.x + ball.width > aiPaddle.x &&
	ball.y < aiPaddle.y + aiPaddle.height &&
	ball.y + ball.height > aiPaddle.y
	) {
	// Calculate angle based on where ball hits paddle
	const hitPosition = (ball.y - aiPaddle.y) / aiPaddle.height;
	const angle = (hitPosition - 0.5) * Math.PI / 2;

	ball.dx = -Math.abs(ball.dx) - 0.2; // Increase speed slightly
	ball.dy = Math.sin(angle) * ball.speed;

	createImpactParticles(aiPaddle.x, ball.y);
	}

	// Ball out of bounds (score)
	if (ball.x < 0) {
	aiScore++;
	updateScore();
	createExplosion(ball.x, ball.y);
	resetBall();
	} else if (ball.x + ball.width > canvas.width) {
	playerScore++;
	updateScore();
	createExplosion(ball.x, ball.y);
	resetBall();
	}

	// Update particles
	updateParticles();

	// Check for game over
	if (playerScore >= 5 \|\| aiScore >= 5) {
	endGame();
	}
	}

	function resetBall() {
	ball.x = canvas.width / 2;
	ball.y = canvas.height / 2;
	ball.dx = 5 * (Math.random() > 0.5 ? 1 : -1);
	ball.dy = 5 * (Math.random() > 0.5 ? 1 : -1);
	ball.trail = [];

	// Small delay before next round
	gameRunning = false;
	setTimeout(() => {
	gameRunning = true;
	}, 1000);
	}

	function updateScore() {
	playerScoreDisplay.textContent = playerScore;
	aiScoreDisplay.textContent = aiScore;
	}

	function endGame() {
	gameRunning = false;
	gameOverScreen.classList.remove('hidden');

	if (playerScore > aiScore) {
	gameOverText.textContent = "SYSTEM DOMINATION COMPLETE";
	gameOverText.style.color = "#00ff00";
	} else {
	gameOverText.textContent = "SYSTEM FAILURE DETECTED";
	gameOverText.style.color = "#ff0033";
	}
	}

	function draw() {
	// Draw ball trail
	for (let i = 0; i < ball.trail.length; i++) {
	const alpha = i / ball.trail.length;
	ctx.fillStyle = `rgba(0, 255, 252, ${alpha * 0.5})`;
	ctx.beginPath();
	ctx.arc(ball.trail[i].x + ball.width / 2, ball.trail[i].y + ball.height / 2, ball.width / 2 * alpha, 0, Math.PI * 2);
	ctx.fill();
	}

	// Draw ball
	const gradient = ctx.createRadialGradient(
	ball.x + ball.width / 2, ball.y + ball.height / 2, 0,
	ball.x + ball.width / 2, ball.y + ball.height / 2, ball.width / 2
	);
	gradient.addColorStop(0, powerActive ? '#ff00ff' : '#00fffc');
	gradient.addColorStop(1, powerActive ? '#ff0000' : '#0088ff');

	ctx.fillStyle = gradient;
	ctx.beginPath();
	ctx.arc(ball.x + ball.width / 2, ball.y + ball.height / 2, ball.width / 2, 0, Math.PI * 2);
	ctx.fill();

	// Draw player paddle
	const paddleGradient = ctx.createLinearGradient(
	playerPaddle.x, playerPaddle.y,
	playerPaddle.x + playerPaddle.width, playerPaddle.y + playerPaddle.height
	);
	paddleGradient.addColorStop(0, '#00fffc');
	paddleGradient.addColorStop(1, '#0088ff');

	ctx.fillStyle = paddleGradient;
	ctx.fillRect(playerPaddle.x, playerPaddle.y, playerPaddle.width, playerPaddle.height);

	// Draw AI paddle
	const aiPaddleGradient = ctx.createLinearGradient(
	aiPaddle.x, aiPaddle.y,
	aiPaddle.x + aiPaddle.width, aiPaddle.y + aiPaddle.height
	);
	aiPaddleGradient.addColorStop(0, '#ff00ff');
	aiPaddleGradient.addColorStop(1, '#ff0033');

	ctx.fillStyle = aiPaddleGradient;
	ctx.fillRect(aiPaddle.x, aiPaddle.y, aiPaddle.width, aiPaddle.height);

	// Draw power meter
	ctx.fillStyle = 'rgba(0, 20, 40, 0.7)';
	ctx.fillRect(20, canvas.height - 30, 200, 20);

	ctx.fillStyle = powerCharge >= 100 ? '#ff00ff' : '#00fffc';
	ctx.fillRect(20, canvas.height - 30, 200 * (powerCharge / 100), 20);

	ctx.strokeStyle = '#00fffc';
	ctx.strokeRect(20, canvas.height - 30, 200, 20);

	ctx.fillStyle = '#00fffc';
	ctx.font = '14px Orbitron';
	ctx.fillText('POWER SHOT', 25, canvas.height - 35);

	if (powerCharge >= 100) {
	ctx.fillStyle = '#ff00ff';
	ctx.font = 'bold 14px Orbitron';
	ctx.fillText('READY!', 150, canvas.height - 35);
	}

	// Draw particles
	drawParticles();
	}

	function createImpactParticles(x, y) {
	for (let i = 0; i < 10; i++) {
	createParticle(x, y, '#00fffc');
	}
	}

	function createExplosion(x, y) {
	for (let i = 0; i < 50; i++) {
	createParticle(x, y, i % 2 === 0 ? '#ff00ff' : '#00fffc', true);
	}
	}

	function createParticle(x, y, color, isExplosion = false) {
	const size = Math.random() * 4 + 2;
	const angle = Math.random() * Math.PI * 2;
	const speed = isExplosion ? Math.random() * 5 + 2 : Math.random() * 3 + 1;

	particles.push({
	x: x,
	y: y,
	size: size,
	color: color,
	dx: Math.cos(angle) * speed,
	dy: Math.sin(angle) * speed,
	life: isExplosion ? 60 : 30,
	maxLife: isExplosion ? 60 : 30
	});
	}

	function updateParticles() {
	for (let i = particles.length - 1; i >= 0; i--) {
	const p = particles[i];

	p.x += p.dx;
	p.y += p.dy;
	p.life--;

	// Apply gravity to explosion particles
	if (p.life < p.maxLife / 2) {
	p.dy += 0.1;
	}

	if (p.life <= 0) {
	particles.splice(i, 1);
	}
	}
	}

	function drawParticles() {
	for (const p of particles) {
	const alpha = p.life / p.maxLife;
	ctx.fillStyle = `${p.color.replace(')', `, ${alpha})`).replace('rgb', 'rgba')}`;
	ctx.beginPath();
	ctx.arc(p.x, p.y, p.size * alpha, 0, Math.PI * 2);
	ctx.fill();
	}
	}

	// Set default difficulty
	setDifficulty(5);
	});
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=andreaschandra/cybernetic-pong-x" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>