Hugging Face's logo

Spaces:
Ravisil
/
pong-ai
Running

App Files Community
pong-ai / index.html
Ravisil's picture
Ravisil
Add 2 files
d397566 verified
raw
history blame contribute delete
28 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI PONG SHOWDOWN</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #0a0a1a;
font-family: 'Orbitron', sans-serif;
color: #00fffc;
overflow: hidden;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#game-container {
position: relative;
width: 100%;
max-width: 800px;
height: auto;
aspect-ratio: 8/5;
border: 2px solid #00fffc;
box-shadow: 0 0 20px #00fffc, inset 0 0 20px #00fffc;
overflow: hidden;
background-color: rgba(0, 0, 20, 0.7);
}
#game-canvas {
width: 100%;
height: 100%;
background-color: transparent;
display: block;
}
#score {
display: flex;
justify-content: space-between;
width: 100%;
max-width: 800px;
margin-bottom: 20px;
font-size: clamp(16px, 3vw, 24px);
text-shadow: 0 0 10px #00fffc;
}
.score-display {
padding: clamp(5px, 1.5vw, 10px) clamp(10px, 4vw, 30px);
background-color: rgba(0, 255, 252, 0.1);
border: 1px solid #00fffc;
border-radius: 5px;
}
#settings-panel {
position: absolute;
top: 10px;
right: 10px;
z-index: 20;
display: flex;
flex-direction: column;
gap: 5px;
}
#start-screen, #game-over {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 20, 0.8);
z-index: 10;
}
h1 {
font-size: clamp(24px, 6vw, 48px);
margin-bottom: clamp(15px, 4vw, 30px);
text-shadow: 0 0 15px #00fffc;
letter-spacing: 3px;
text-align: center;
}
button {
background-color: transparent;
color: #00fffc;
border: 2px solid #00fffc;
padding: clamp(10px, 2.5vw, 15px) clamp(15px, 4vw, 30px);
font-family: 'Orbitron', sans-serif;
font-size: clamp(14px, 3vw, 18px);
cursor: pointer;
margin: clamp(5px, 1.5vw, 10px);
transition: all 0.3s;
text-shadow: 0 0 5px #00fffc;
box-shadow: 0 0 10px #00fffc;
}
button:hover {
background-color: rgba(0, 255, 252, 0.2);
transform: scale(1.05);
}
.sm-btn {
padding: 5px 10px;
font-size: 12px;
margin: 0;
}
#game-over {
display: none;
}
#grid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
linear-gradient(rgba(0, 255, 252, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 255, 252, 0.05) 1px, transparent 1px);
background-size: 20px 20px;
z-index: -1;
}
.particle {
position: absolute;
width: 2px;
height: 2px;
background-color: #00fffc;
border-radius: 50%;
pointer-events: none;
z-index: -1;
}
#instructions {
margin-top: clamp(10px, 3vw, 20px);
font-size: clamp(10px, 2vw, 14px);
color: rgba(0, 255, 252, 0.7);
text-align: center;
padding: 0 10px;
}
.ai-selector {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
}
.ai-option {
display: flex;
align-items: center;
gap: 10px;
}
.ai-option input {
accent-color: #00fffc;
}
/* Custom toggle switch */
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 255, 252, 0.2);
transition: .4s;
border: 1px solid #00fffc;
}
.slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 3px;
background-color: #00fffc;
transition: .4s;
}
input:checked + .slider {
background-color: rgba(0, 255, 252, 0.4);
}
input:checked + .slider:before {
transform: translateX(26px);
}
.slider.round {
border-radius: 24px;
}
.slider.round:before {
border-radius: 50%;
}
/* Difficulty settings */
.difficulty-selector {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
}
.difficulty-option {
display: flex;
align-items: center;
gap: 10px;
}
/* Media queries for smaller screens */
@media (max-width: 600px) {
#settings-panel {
top: 5px;
right: 5px;
}
button.sm-btn {
font-size: 10px;
padding: 3px 6px;
}
}
</style>
</head>
<body>
<div id="score">
<div id="left-ai-score" class="score-display">AI-1: 0</div>
<div id="right-ai-score" class="score-display">AI-2: 0</div>
</div>
<div id="game-container">
<div id="grid"></div>
<canvas id="game-canvas"></canvas>
<div id="settings-panel">
<button id="pause-btn" class="sm-btn">⏸ PAUSE</button>
<button id="speed-btn" class="sm-btn">⚡ 1X</button>
</div>
<div id="start-screen">
<h1>AI PONG SHOWDOWN</h1>
<div class="ai-selector">
<div class="ai-option">
<label class="switch">
<input type="checkbox" id="human-player-toggle">
<span class="slider round"></span>
</label>
<span>Human Player?</span>
</div>
</div>
<div class="difficulty-selector">
<h3>AI DIFFICULTY:</h3>
<div class="difficulty-option">
<input type="radio" id="easy" name="difficulty" value="easy" checked>
<label for="easy">Easy</label>
</div>
<div class="difficulty-option">
<input type="radio" id="medium" name="difficulty" value="medium">
<label for="medium">Medium</label>
</div>
<div class="difficulty-option">
<input type="radio" id="hard" name="difficulty" value="hard">
<label for="hard">Hard</label>
</div>
</div>
<button id="start-button">START SHOWDOWN</button>
<div id="instructions">
OBSERVE THE AI BATTLE OR PLAY AGAINST THEM<br>
FIRST TO SCORE 5 WINS
</div>
</div>
<div id="game-over">
<h1 id="result-text">AI-1 VICTORY!</h1>
<button id="restart-button">NEW SHOWDOWN</button>
</div>
</div>
<audio id="paddle-hit" src="data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YU..."></audio>
<audio id="wall-hit" src="data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YU..."></audio>
<audio id="score-sound" src="data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YU..."></audio>
<script>
// Game elements
const canvas = document.getElementById('game-canvas');
const ctx = canvas.getContext('2d');
const startScreen = document.getElementById('start-screen');
const gameOverScreen = document.getElementById('game-over');
const resultText = document.getElementById('result-text');
const startButton = document.getElementById('start-button');
const restartButton = document.getElementById('restart-button');
const leftScoreDisplay = document.getElementById('left-ai-score');
const rightScoreDisplay = document.getElementById('right-ai-score');
const pauseBtn = document.getElementById('pause-btn');
const speedBtn = document.getElementById('speed-btn');
const humanPlayerToggle = document.getElementById('human-player-toggle');
// Audio elements
const paddleHitSound = document.getElementById('paddle-hit');
const wallHitSound = document.getElementById('wall-hit');
const scoreSound = document.getElementById('score-sound');
// Game variables
let gameRunning = false;
let gamePaused = false;
let leftScore = 0;
let rightScore = 0;
const winningScore = 5;
let gameSpeed = 1;
let humanPlayer = false;
let aiStrength = 'medium';
// Resize canvas to container size
function resizeCanvas() {
const container = document.getElementById('game-container');
canvas.width = container.clientWidth;
canvas.height = container.clientHeight;
}
window.addEventListener('resize', () => {
resizeCanvas();
resetPositions();
});
// Initialize canvas size
resizeCanvas();
// Paddle variables
let paddleWidth, paddleHeight, paddleSpeed;
function calculateDimensions() {
paddleWidth = Math.max(10, canvas.width * 0.015);
paddleHeight = Math.max(60, canvas.height * 0.2);
paddleSpeed = canvas.height * 0.012;
}
const leftPaddle = {
x: 30,
y: 0,
width: 0,
height: 0,
dy: 0
};
const rightPaddle = {
x: 0,
y: 0,
width: 0,
height: 0,
dy: 0
};
// Ball variables
let ballSize;
let ball = {
x: 0,
y: 0,
width: 0,
height: 0,
dx: 0,
dy: 0
};
function resetPositions() {
calculateDimensions();
// Set paddle positions
leftPaddle.width = paddleWidth;
leftPaddle.height = paddleHeight;
leftPaddle.y = canvas.height / 2 - paddleHeight / 2;
leftPaddle.x = canvas.width * 0.03;
rightPaddle.width = paddleWidth;
rightPaddle.height = paddleHeight;
rightPaddle.y = canvas.height / 2 - paddleHeight / 2;
rightPaddle.x = canvas.width - (canvas.width * 0.03) - paddleWidth;
// Set ball size based on canvas dimensions
ballSize = Math.max(8, Math.min(canvas.width * 0.015, canvas.height * 0.02));
ball.width = ballSize;
ball.height = ballSize;
resetBall();
}
// AI Personality profiles
const aiProfiles = {
easy: {
reactionDelay: 0.5,
accuracy: 0.7,
prediction: 0.4,
speedMultiplier: 0.7
},
medium: {
reactionDelay: 0.3,
accuracy: 0.85,
prediction: 0.6,
speedMultiplier: 0.85
},
hard: {
reactionDelay: 0.1,
accuracy: 0.95,
prediction: 0.8,
speedMultiplier: 1.0
}
};
// Trail effect variables
const trail = [];
const maxTrailLength = 10;
// Create particles for background
function createParticles() {
const particles = [];
const particleCount = Math.floor(canvas.width * canvas.height / 2000);
for (let i = 0; i < particleCount; i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
size: Math.random() * 2 + 1,
speed: Math.random() * 2 + 1
});
}
return particles;
}
let particles = createParticles();
// Draw functions
function drawPaddle(x, y, width, height, color = '#00fffc') {
ctx.fillStyle = color;
ctx.shadowBlur = 15;
ctx.shadowColor = color;
ctx.fillRect(x, y, width, height);
ctx.shadowBlur = 0;
}
function drawBall(x, y, width, height, color = '#ff00f7') {
ctx.fillStyle = color;
ctx.shadowBlur = 15;
ctx.shadowColor = color;
ctx.beginPath();
ctx.arc(x + width / 2, y + height / 2, width / 2, 0, Math.PI * 2);
ctx.fill();
ctx.shadowBlur = 0;
}
function drawTrail() {
for (let i = 0; i < trail.length; i++) {
const opacity = i / trail.length;
ctx.fillStyle = `rgba(255, 0, 247, ${opacity})`;
ctx.beginPath();
ctx.arc(trail[i].x, trail[i].y, ballSize / 2 * opacity, 0, Math.PI * 2);
ctx.fill();
}
}
function drawParticles() {
particles.forEach(particle => {
ctx.fillStyle = `rgba(0, 255, 252, ${Math.random() * 0.5})`;
ctx.fillRect(particle.x, particle.y, particle.size, particle.size);
// Move particles
particle.y += particle.speed;
if (particle.y > canvas.height) {
particle.y = 0;
particle.x = Math.random() * canvas.width;
}
});
}
function drawCenterLine() {
ctx.strokeStyle = 'rgba(0, 255, 252, 0.2)';
ctx.lineWidth = 2;
ctx.setLineDash([10, 10]);
ctx.beginPath();
ctx.moveTo(canvas.width / 2, 0);
ctx.lineTo(canvas.width / 2, canvas.height);
ctx.stroke();
ctx.setLineDash([]);
}
// AI decision making
function decideAIMovement(paddle, ball, isLeftPaddle, profile) {
const paddleCenter = paddle.y + paddle.height / 2;
const ballCenter = ball.y + ball.height / 2;
// Add some prediction based on ball direction
let predictedY = ballCenter;
if (profile.prediction > 0) {
if (ball.dx !== 0) {
const framesToContact = Math.abs((paddle.x - ball.x) / ball.dx);
predictedY = ballCenter + (ball.dy * framesToContact * profile.prediction);
}
}
// Keep prediction within bounds
predictedY = Math.max(0, Math.min(canvas.height, predictedY));
// Add some randomness to the AI's accuracy
const targetY = predictedY + (Math.random() - 0.5) * paddle.height * (1 - profile.accuracy);
// Move paddle towards the target
if (paddleCenter < targetY - 10) {
return paddleSpeed * profile.speedMultiplier;
} else if (paddleCenter > targetY + 10) {
return -paddleSpeed * profile.speedMultiplier;
} else {
return 0;
}
}
// Game logic
function update() {
if (gamePaused) return;
// AI movement
const difficulty = document.querySelector('input[name="difficulty"]:checked').value;
const profile = aiProfiles[difficulty];
// Left paddle AI (unless human player is enabled)
if (!humanPlayer || !gameRunning) {
leftPaddle.dy = decideAIMovement(leftPaddle, ball, true, profile);
}
// Right paddle AI (always controlled by AI in this mode)
rightPaddle.dy = decideAIMovement(rightPaddle, ball, false, profile);
// Move paddles
leftPaddle.y += leftPaddle.dy * gameSpeed;
rightPaddle.y += rightPaddle.dy * gameSpeed;
// Keep paddles within canvas
if (leftPaddle.y < 0) leftPaddle.y = 0;
if (leftPaddle.y + leftPaddle.height > canvas.height) {
leftPaddle.y = canvas.height - leftPaddle.height;
}
if (rightPaddle.y < 0) rightPaddle.y = 0;
if (rightPaddle.y + rightPaddle.height > canvas.height) {
rightPaddle.y = canvas.height - rightPaddle.height;
}
// Move ball
ball.x += ball.dx * gameSpeed;
ball.y += ball.dy * gameSpeed;
// Add current ball position to trail
trail.push({ x: ball.x + ball.width / 2, y: ball.y + ball.height / 2 });
if (trail.length > maxTrailLength) {
trail.shift();
}
// Ball collision with top and bottom walls
if (ball.y < 0 || ball.y + ball.height > canvas.height) {
ball.dy = -ball.dy;
wallHitSound.currentTime = 0;
wallHitSound.play();
}
// Ball collision with paddles
if (
ball.x < leftPaddle.x + leftPaddle.width &&
ball.x + ball.width > leftPaddle.x &&
ball.y < leftPaddle.y + leftPaddle.height &&
ball.y + ball.height > leftPaddle.y
) {
// Calculate angle based on where ball hits paddle
const hitPosition = (ball.y + ball.height / 2) - (leftPaddle.y + leftPaddle.height / 2);
const normalizedHit = hitPosition / (leftPaddle.height / 2);
ball.dy = normalizedHit * 5 * (humanPlayer ? 1.2 : 1); // More angle when human plays
ball.dx = Math.abs(ball.dx); // Ensure ball moves right
ball.dx *= humanPlayer ? 1.1 : 1.05; // Human gets slightly more speed
paddleHitSound.currentTime = 0;
paddleHitSound.play();
// Add some randomness
ball.dy += (Math.random() * 2 - 1) * 0.5;
}
if (
ball.x < rightPaddle.x + rightPaddle.width &&
ball.x + ball.width > rightPaddle.x &&
ball.y < rightPaddle.y + rightPaddle.height &&
ball.y + ball.height > rightPaddle.y
) {
// Calculate angle based on where ball hits paddle
const hitPosition = (ball.y + ball.height / 2) - (rightPaddle.y + rightPaddle.height / 2);
const normalizedHit = hitPosition / (rightPaddle.height / 2);
ball.dy = normalizedHit * 5;
ball.dx = -Math.abs(ball.dx); // Ensure ball moves left
ball.dx *= 1.05;
paddleHitSound.currentTime = 0;
paddleHitSound.play();
// Add some randomness
ball.dy += (Math.random() * 2 - 1) * 0.5;
}
// Ball out of bounds (scoring)
if (ball.x + ball.width < 0) {
// Right AI scores
rightScore++;
rightScoreDisplay.textContent = `AI-2: ${rightScore}`;
resetBall();
scoreSound.currentTime = 0;
scoreSound.play();
if (rightScore >= winningScore) {
endGame(false);
}
}
if (ball.x > canvas.width) {
// Left AI scores
leftScore++;
leftScoreDisplay.textContent = `AI-1: ${leftScore}`;
resetBall();
scoreSound.currentTime = 0;
scoreSound.play();
if (leftScore >= winningScore) {
endGame(true);
}
}
}
function resetBall() {
ball.x = canvas.width / 2 - ball.width / 2;
ball.y = canvas.height / 2 - ball.height / 2;
// Random direction favoring the losing side (if human is playing)
if (humanPlayer && leftScore !== rightScore) {
const direction = leftScore < rightScore ? 1 : -1;
ball.dx = direction * 5;
} else {
// Random direction for AI vs AI
ball.dx = (Math.random() > 0.5 ? 1 : -1) * 5;
}
ball.dy = (Math.random() * 4 - 2);
// Clear trail
trail.length = 0;
}
function render() {
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw background elements
drawParticles();
drawCenterLine();
// Draw game elements with different colors for human player
drawTrail();
drawPaddle(
leftPaddle.x,
leftPaddle.y,
leftPaddle.width,
leftPaddle.height,
humanPlayer ? '#00ff9d' : '#00fffc'
);
drawPaddle(
rightPaddle.x,
rightPaddle.y,
rightPaddle.width,
rightPaddle.height,
'#ff00f7'
);
drawBall(ball.x, ball.y, ball.width, ball.height);
}
function gameLoop() {
if (gameRunning && !gamePaused) {
update();
render();
requestAnimationFrame(gameLoop);
}
}
// Game control functions
function startGame() {
humanPlayer = humanPlayerToggle.checked;
leftScore = 0;
rightScore = 0;
leftScoreDisplay.textContent = `AI-1: ${leftScore}`;
rightScoreDisplay.textContent = humanPlayer ? `YOU: ${rightScore}` : `AI-2: ${rightScore}`;
resetPositions();
startScreen.style.display = 'none';
gameOverScreen.style.display = 'none';
gameRunning = true;
gamePaused = false;
gameLoop();
}
function endGame(leftWon) {
gameRunning = false;
gameOverScreen.style.display = 'flex';
if (humanPlayer) {
resultText.textContent = leftWon ? "AI DEFEATED YOU!" : "YOU DEFEATED AI!";
} else {
resultText.textContent = leftWon ? "AI-1 IS VICTORIOUS!" : "AI-2 IS VICTORIOUS!";
}
}
function togglePause() {
gamePaused = !gamePaused;
pauseBtn.textContent = gamePaused ? "▶ RESUME" : "⏸ PAUSE";
if (gameRunning && !gamePaused) {
gameLoop();
}
}
function cycleGameSpeed() {
const speeds = [1, 1.5, 2, 3];
const currentIndex = speeds.indexOf(gameSpeed);
const nextIndex = (currentIndex + 1) % speeds.length;
gameSpeed = speeds[nextIndex];
speedBtn.textContent = `⚡ ${gameSpeed}X`;
}
// Event listeners
startButton.addEventListener('click', startGame);
restartButton.addEventListener('click', startGame);
pauseBtn.addEventListener('click', togglePause);
speedBtn.addEventListener('click', cycleGameSpeed);
humanPlayerToggle.addEventListener('change', function() {
rightScoreDisplay.textContent = this.checked ? `YOU: ${rightScore}` : `AI-2: ${rightScore}`;
});
// Keyboard controls (only if human player is enabled)
document.addEventListener('keydown', (e) => {
if (!humanPlayer || !gameRunning) return;
if (e.key === 'ArrowUp') {
leftPaddle.dy = -paddleSpeed * gameSpeed;
} else if (e.key === 'ArrowDown') {
leftPaddle.dy = paddleSpeed * gameSpeed;
}
});
document.addEventListener('keyup', (e) => {
if (!humanPlayer || !gameRunning) return;
if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
leftPaddle.dy = 0;
}
});
// Mouse controls (only if human player is enabled)
canvas.addEventListener('mousemove', (e) => {
if (!humanPlayer || !gameRunning) return;
const rect = canvas.getBoundingClientRect();
const mouseY = e.clientY - rect.top - leftPaddle.height / 2;
if (mouseY >= 0 && mouseY <= canvas.height - leftPaddle.height) {
leftPaddle.y = mouseY;
}
});
// Initialize
resetPositions();
particles = createParticles();
</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=Ravisil/pong-ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>