Hugging Face's logo

Spaces:
rifco
/
astrapay
Running

App Files Community
astrapay / index.html
rifco's picture
rifco
Add 3 files
ed81007 verified
raw
history blame contribute delete
16.8 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Astrapay Pong Game</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
body {
font-family: 'Poppins', sans-serif;
overflow: hidden;
background-color: #0f172a;
}
#gameCanvas {
background-color: #1e293b;
position: relative;
overflow: hidden;
}
.astrapay-logo {
position: absolute;
opacity: 0.1;
animation: float 15s infinite linear;
}
@keyframes float {
0% { transform: translate(0, 0) rotate(0deg); }
25% { transform: translate(50px, 50px) rotate(5deg); }
50% { transform: translate(100px, 0) rotate(0deg); }
75% { transform: translate(50px, -50px) rotate(-5deg); }
100% { transform: translate(0, 0) rotate(0deg); }
}
.paddle {
position: absolute;
background: linear-gradient(90deg, #4f46e5, #7c3aed);
border-radius: 10px;
box-shadow: 0 0 15px rgba(124, 58, 237, 0.7);
}
.ball {
position: absolute;
background: linear-gradient(45deg, #f59e0b, #f97316);
border-radius: 50%;
box-shadow: 0 0 20px rgba(245, 158, 11, 0.8);
}
.score {
text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}
.start-screen, .game-over-screen {
background: rgba(15, 23, 42, 0.9);
backdrop-filter: blur(5px);
}
.btn-primary {
background: linear-gradient(90deg, #4f46e5, #7c3aed);
transition: all 0.3s ease;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(124, 58, 237, 0.4);
}
</style>
</head>
<body class="flex items-center justify-center min-h-screen text-white">
<div class="relative w-full max-w-4xl h-96 md:h-[32rem]">
<canvas id="gameCanvas" class="w-full h-full rounded-xl shadow-2xl"></canvas>
<!-- Start Screen -->
<div id="startScreen" class="start-screen absolute inset-0 flex flex-col items-center justify-center gap-6 rounded-xl">
<div class="text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-2">Astrapay Pong</h1>
<p class="text-lg text-gray-300">Use arrow keys or W/S to move your paddle</p>
</div>
<button id="startBtn" class="btn-primary px-8 py-3 rounded-full font-semibold text-lg">
Start Game
</button>
<div class="absolute bottom-6 text-gray-400 text-sm">
First to score 5 points wins!
</div>
</div>
<!-- Game Over Screen -->
<div id="gameOverScreen" class="game-over-screen hidden absolute inset-0 flex flex-col items-center justify-center gap-6 rounded-xl">
<h2 id="winnerText" class="text-4xl font-bold"></h2>
<div class="flex gap-8 text-center my-4">
<div>
<div class="text-2xl font-semibold" id="player1ScoreFinal">0</div>
<div class="text-gray-400">Player</div>
</div>
<div>
<div class="text-2xl font-semibold" id="player2ScoreFinal">0</div>
<div class="text-gray-400">Computer</div>
</div>
</div>
<button id="restartBtn" class="btn-primary px-8 py-3 rounded-full font-semibold text-lg">
Play Again
</button>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const startScreen = document.getElementById('startScreen');
const gameOverScreen = document.getElementById('gameOverScreen');
const startBtn = document.getElementById('startBtn');
const restartBtn = document.getElementById('restartBtn');
const winnerText = document.getElementById('winnerText');
const player1ScoreFinal = document.getElementById('player1ScoreFinal');
const player2ScoreFinal = document.getElementById('player2ScoreFinal');
// Set canvas size
function resizeCanvas() {
const container = canvas.parentElement;
canvas.width = container.clientWidth;
canvas.height = container.clientHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
// Game variables
let gameRunning = false;
let animationId;
let player1Score = 0;
let player2Score = 0;
// Paddle variables
const paddleWidth = 15;
const paddleHeight = 100;
const paddleOffset = 30;
const player1 = {
x: paddleOffset,
y: canvas.height / 2 - paddleHeight / 2,
width: paddleWidth,
height: paddleHeight,
speed: 8,
dy: 0
};
const player2 = {
x: canvas.width - paddleOffset - paddleWidth,
y: canvas.height / 2 - paddleHeight / 2,
width: paddleWidth,
height: paddleHeight,
speed: 6, // Slightly slower for computer
dy: 0
};
// Ball variables
const ball = {
x: canvas.width / 2,
y: canvas.height / 2,
radius: 10,
speed: 5,
dx: 5,
dy: 5
};
// Create floating Astrapay logos
function createAstrapayLogos() {
const colors = ['#4f46e5', '#7c3aed', '#f59e0b', '#f97316'];
for (let i = 0; i < 8; i++) {
const logo = document.createElement('div');
logo.className = 'astrapay-logo';
logo.innerHTML = `
<svg width="80" height="80" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.523 22 22 17.523 22 12C22 6.477 17.523 2 12 2Z" fill="${colors[i % colors.length]}"/>
<path d="M12 6C8.686 6 6 8.686 6 12C6 15.314 8.686 18 12 18C15.314 18 18 15.314 18 12C18 8.686 15.314 6 12 6Z" fill="white"/>
<path d="M12 10C10.895 10 10 10.895 10 12C10 13.105 10.895 14 12 14C13.105 14 14 13.105 14 12C14 10.895 13.105 10 12 10Z" fill="${colors[(i + 2) % colors.length]}"/>
</svg>
`;
logo.style.left = `${Math.random() * 80}%`;
logo.style.top = `${Math.random() * 80}%`;
logo.style.animationDuration = `${15 + Math.random() * 15}s`;
canvas.parentElement.appendChild(logo);
}
}
// Draw paddles
function drawPaddle(x, y, width, height) {
ctx.beginPath();
ctx.roundRect(x, y, width, height, 10);
ctx.fillStyle = '#7c3aed';
ctx.shadowColor = 'rgba(124, 58, 237, 0.7)';
ctx.shadowBlur = 15;
ctx.fill();
ctx.shadowBlur = 0;
}
// Draw ball
function drawBall(x, y, radius) {
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fillStyle = '#f59e0b';
ctx.shadowColor = 'rgba(245, 158, 11, 0.8)';
ctx.shadowBlur = 20;
ctx.fill();
ctx.shadowBlur = 0;
}
// Draw score
function drawScore() {
ctx.font = 'bold 32px Poppins';
ctx.fillStyle = 'white';
ctx.textAlign = 'center';
// Player 1 score
ctx.fillText(player1Score.toString(), canvas.width / 4, 50);
// Player 2 score
ctx.fillText(player2Score.toString(), canvas.width * 3/4, 50);
}
// Draw center line
function drawCenterLine() {
ctx.beginPath();
ctx.setLineDash([10, 10]);
ctx.moveTo(canvas.width / 2, 0);
ctx.lineTo(canvas.width / 2, canvas.height);
ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';
ctx.lineWidth = 2;
ctx.stroke();
ctx.setLineDash([]);
}
// Update paddle position
function updatePaddlePosition() {
// Player 1 movement
player1.y += player1.dy;
// Prevent paddle from going off screen
if (player1.y < 0) {
player1.y = 0;
} else if (player1.y + player1.height > canvas.height) {
player1.y = canvas.height - player1.height;
}
// Computer AI for player 2 (simple follow ball)
if (player2.y + player2.height / 2 < ball.y - 10) {
player2.dy = player2.speed;
} else if (player2.y + player2.height / 2 > ball.y + 10) {
player2.dy = -player2.speed;
} else {
player2.dy = 0;
}
player2.y += player2.dy;
// Prevent computer paddle from going off screen
if (player2.y < 0) {
player2.y = 0;
} else if (player2.y + player2.height > canvas.height) {
player2.y = canvas.height - player2.height;
}
}
// Update ball position
function updateBallPosition() {
ball.x += ball.dx;
ball.y += ball.dy;
// Wall collision (top/bottom)
if (ball.y - ball.radius < 0 || ball.y + ball.radius > canvas.height) {
ball.dy *= -1;
}
// Paddle collision
// Player 1 (left paddle)
if (
ball.x - ball.radius < player1.x + player1.width &&
ball.y > player1.y &&
ball.y < player1.y + player1.height
) {
const hitPosition = (ball.y - (player1.y + player1.height / 2)) / (player1.height / 2);
ball.dx = Math.abs(ball.dx) * 1.05; // Increase speed slightly
ball.dy = hitPosition * 5;
}
// Player 2 (right paddle)
if (
ball.x + ball.radius > player2.x &&
ball.y > player2.y &&
ball.y < player2.y + player2.height
) {
const hitPosition = (ball.y - (player2.y + player2.height / 2)) / (player2.height / 2);
ball.dx = -Math.abs(ball.dx) * 1.05; // Increase speed slightly
ball.dy = hitPosition * 5;
}
// Point scored
if (ball.x - ball.radius < 0) {
// Player 2 scores
player2Score++;
resetBall();
} else if (ball.x + ball.radius > canvas.width) {
// Player 1 scores
player1Score++;
resetBall();
}
// Check for winner
if (player1Score >= 5 || player2Score >= 5) {
endGame();
}
}
// Reset ball to center
function resetBall() {
ball.x = canvas.width / 2;
ball.y = canvas.height / 2;
ball.dx = player1Score > player2Score ? -5 : 5; // Alternate direction
ball.dy = (Math.random() * 4 - 2); // Random vertical direction
ball.speed = 5;
}
// Game loop
function gameLoop() {
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw game elements
drawCenterLine();
drawPaddle(player1.x, player1.y, player1.width, player1.height);
drawPaddle(player2.x, player2.y, player2.width, player2.height);
drawBall(ball.x, ball.y, ball.radius);
drawScore();
// Update positions
updatePaddlePosition();
updateBallPosition();
if (gameRunning) {
animationId = requestAnimationFrame(gameLoop);
}
}
// Start game
function startGame() {
player1Score = 0;
player2Score = 0;
startScreen.classList.add('hidden');
gameOverScreen.classList.add('hidden');
gameRunning = true;
resetBall();
gameLoop();
}
// End game
function endGame() {
gameRunning = false;
cancelAnimationFrame(animationId);
// Update game over screen
if (player1Score >= 5) {
winnerText.textContent = 'You Win!';
winnerText.className = 'text-4xl font-bold text-green-400';
} else {
winnerText.textContent = 'Computer Wins!';
winnerText.className = 'text-4xl font-bold text-red-400';
}
player1ScoreFinal.textContent = player1Score;
player2ScoreFinal.textContent = player2Score;
gameOverScreen.classList.remove('hidden');
}
// Event listeners
startBtn.addEventListener('click', () => {
createAstrapayLogos();
startGame();
});
restartBtn.addEventListener('click', startGame);
// Keyboard controls
document.addEventListener('keydown', (e) => {
// Player 1 controls (W/S or Arrow Up/Down)
if (e.key === 'ArrowUp' || e.key === 'w') {
player1.dy = -player1.speed;
} else if (e.key === 'ArrowDown' || e.key === 's') {
player1.dy = player1.speed;
}
});
document.addEventListener('keyup', (e) => {
if (
(e.key === 'ArrowUp' || e.key === 'w') && player1.dy < 0 ||
(e.key === 'ArrowDown' || e.key === 's') && player1.dy > 0
) {
player1.dy = 0;
}
});
});
</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=rifco/astrapay" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>