Spaces:

victor
/

neon-pong-ai

Running

App Files Files Community

victor HF Staff commited on Mar 25

Commit

5898d93

verified ·

1 Parent(s): b5af9f5

Add index.html

Browse files

Files changed (1) hide show

index.html +838 -18

index.html CHANGED Viewed

@@ -1,19 +1,839 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Neon Pong AI Challenge</title>
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Press+Start+2P&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --neon-blue: #08f;
+            --neon-pink: #f0f;
+            --neon-purple: #90f;
+            --bg-dark: #111;
+            --bg-darker: #070710;
+            --text: #fff;
+            --glow: 0 0 10px;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Orbitron', sans-serif;
+            background: var(--bg-darker);
+            color: var(--text);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            position: relative;
+        }
+        body::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(circle at center, transparent 0%, var(--bg-dark) 80%);
+            pointer-events: none;
+            z-index: -2;
+        }
+        .game-title {
+            font-family: 'Press Start 2P', cursive;
+            font-size: 2.5rem;
+            margin-bottom: 20px;
+            text-align: center;
+            color: var(--neon-blue);
+            text-shadow: var(--glow) var(--neon-blue), 0 0 20px var(--neon-blue);
+            animation: pulse 2s infinite alternate;
+        }
+        @keyframes pulse {
+            from {
+                opacity: 1;
+            }
+            to {
+                opacity: 0.7;
+            }
+        }
+        .game-container {
+            position: relative;
+            width: 800px;
+            height: 500px;
+            margin: 20px auto;
+            border: 3px solid var(--neon-purple);
+            box-shadow: var(--glow) var(--neon-purple), inset var(--glow) var(--neon-purple);
+            border-radius: 10px;
+            overflow: hidden;
+            background: var(--bg-dark);
+        }
+        #gameCanvas {
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+        .center-line {
+            position: absolute;
+            top: 0;
+            left: 50%;
+            width: 2px;
+            height: 100%;
+            background: linear-gradient(transparent 0%, var(--neon-purple) 50%, transparent 100%);
+            opacity: 0.5;
+        }
+        .score-container {
+            display: flex;
+            justify-content: space-between;
+            width: 800px;
+            margin-bottom: 20px;
+        }
+        .score-box {
+            background: rgba(0, 0, 0, 0.5);
+            border: 2px solid var(--neon-blue);
+            border-radius: 10px;
+            padding: 15px 30px;
+            text-align: center;
+            box-shadow: var(--glow) var(--neon-blue);
+        }
+        .score-title {
+            font-size: 1rem;
+            margin-bottom: 5px;
+            color: var(--neon-blue);
+        }
+        .score {
+            font-size: 2rem;
+            font-family: 'Press Start 2P', cursive;
+        }
+        .controls {
+            margin-top: 20px;
+            display: flex;
+            gap: 15px;
+        }
+        .btn {
+            background: transparent;
+            color: var(--text);
+            border: 2px solid var(--neon-pink);
+            padding: 10px 20px;
+            font-family: 'Orbitron', sans-serif;
+            font-size: 1rem;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            box-shadow: 0 0 5px var(--neon-pink);
+        }
+        .btn:hover {
+            background: var(--neon-pink);
+            color: var(--bg-dark);
+            box-shadow: 0 0 15px var(--neon-pink);
+            transform: translateY(-2px);
+        }
+        .btn:active {
+            transform: translateY(0);
+        }
+        .btn-start {
+            border-color: var(--neon-blue);
+            box-shadow: 0 0 5px var(--neon-blue);
+        }
+        .btn-start:hover {
+            background: var(--neon-blue);
+            color: var(--bg-dark);
+            box-shadow: 0 0 15px var(--neon-blue);
+        }
+        .settings {
+            margin-top: 30px;
+            width: 800px;
+            background: rgba(0, 0, 0, 0.3);
+            border: 1px solid var(--neon-purple);
+            border-radius: 10px;
+            padding: 15px;
+        }
+        .settings-title {
+            color: var(--neon-purple);
+            margin-bottom: 10px;
+            font-size: 1.2rem;
+            text-shadow: 0 0 5px var(--neon-purple);
+        }
+        .slider-container {
+            margin-bottom: 10px;
+        }
+        .slider-label {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 5px;
+        }
+        .slider {
+            width: 100%;
+            -webkit-appearance: none;
+            height: 8px;
+            background: rgba(255, 255, 255, 0.1);
+            outline: none;
+            border-radius: 4px;
+        }
+        .slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            background: var(--neon-blue);
+            cursor: pointer;
+            box-shadow: 0 0 5px var(--neon-blue);
+        }
+        .match-history {
+            margin-top: 30px;
+            width: 800px;
+            background: rgba(0, 0, 0, 0.3);
+            border: 1px solid var(--neon-pink);
+            border-radius: 10px;
+            padding: 15px;
+            max-height: 200px;
+            overflow-y: auto;
+        }
+        .history-title {
+            color: var(--neon-pink);
+            margin-bottom: 10px;
+            font-size: 1.2rem;
+            text-shadow: 0 0 5px var(--neon-pink);
+        }
+        .history-item {
+            padding: 8px 0;
+            border-bottom: 1px dashed var(--neon-pink);
+            opacity: 0;
+            animation: fadeIn 0.5s forwards;
+        }
+        @keyframes fadeIn {
+            to {
+                opacity: 1;
+            }
+        }
+        .particle {
+            position: absolute;
+            border-radius: 50%;
+            pointer-events: none;
+            z-index: -1;
+        }
+        .mobile-controls {
+            display: none;
+            width: 100%;
+            padding: 20px;
+            justify-content: space-between;
+        }
+        .mobile-btn {
+            width: 100px;
+            height: 60px;
+            background: rgba(144, 0, 255, 0.2);
+            border: 2px solid var(--neon-purple);
+            color: white;
+            font-family: 'Orbitron', sans-serif;
+            border-radius: 10px;
+            box-shadow: 0 0 10px var(--neon-purple);
+        }
+        @media (max-width: 850px) {
+            .game-container, .score-container, .settings, .match-history {
+                width: 95%;
+                max-width: 400px;
+            }
+            .game-title {
+                font-size: 1.5rem;
+            }
+            .mobile-controls {
+                display: flex;
+            }
+        }
+        @media (max-width: 500px) {
+            .score-box {
+                padding: 10px 15px;
+            }
+            .score-title {
+                font-size: 0.8rem;
+            }
+            .score {
+                font-size: 1.5rem;
+            }
+        }
+        .game-message {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(0, 0, 0, 0.8);
+            color: var(--neon-blue);
+            padding: 20px 40px;
+            border-radius: 10px;
+            font-size: 1.5rem;
+            text-align: center;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s;
+            border: 2px solid var(--neon-blue);
+            box-shadow: 0 0 20px var(--neon-blue);
+            z-index: 10;
+        }
+        .game-message.show {
+            opacity: 1;
+            animation: pulse 1.5s infinite;
+        }
+    </style>
+</head>
+<body>
+    <h1 class="game-title">NEON PONG AI CHALLENGE</h1>
+    <div class="score-container">
+        <div class="score-box">
+            <div class="score-title">PLAYER</div>
+            <div class="score" id="playerScore">0</div>
+        </div>
+        <div class="score-box">
+            <div class="score-title">AI</div>
+            <div class="score" id="aiScore">0</div>
+        </div>
+    </div>
+    <div class="game-container">
+        <div class="center-line"></div>
+        <canvas id="gameCanvas"></canvas>
+        <div class="game-message" id="gameMessage">GAME OVER<br><span style="font-size:1rem">Click Start to Play Again</span></div>
+    </div>
+    <div class="mobile-controls">
+        <button class="mobile-btn" id="mobileUp">↑</button>
+        <button class="mobile-btn" id="mobileDown">↓</button>
+    </div>
+    <div class="controls">
+        <button class="btn btn-start" id="startBtn">START</button>
+        <button class="btn" id="pauseBtn">PAUSE</button>
+        <button class="btn" id="resetBtn">RESET</button>
+    </div>
+    <div class="settings">
+        <h3 class="settings-title">GAME SETTINGS</h3>
+        <div class="slider-container">
+            <div class="slider-label">
+                <span>Ball Speed</span>
+                <span id="ballSpeedValue">5</span>
+            </div>
+            <input type="range" min="1" max="10" value="5" class="slider" id="ballSpeedSlider">
+        </div>
+        <div class="slider-container">
+            <div class="slider-label">
+                <span>AI Difficulty</span>
+                <span id="aiDifficultyValue">5</span>
+            </div>
+            <input type="range" min="1" max="10" value="5" class="slider" id="aiDifficultySlider">
+        </div>
+    </div>
+    <div class="match-history">
+        <h3 class="history-title">MATCH HISTORY</h3>
+        <div id="historyList"></div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            // Canvas setup
+            const canvas = document.getElementById('gameCanvas');
+            const ctx = canvas.getContext('2d');
+            canvas.width = canvas.offsetWidth;
+            canvas.height = canvas.offsetHeight;
+            // Game elements
+            const paddleWidth = 15;
+            const paddleHeight = 100;
+            const ballSize = 12;
+            const borderOffset = 20;
+            const maxAngle = Math.PI / 3; // 60 degrees max bounce angle
+            // Game state
+            const state = {
+                playerScore: 0,
+                aiScore: 0,
+                gameRunning: false,
+                gamePaused: false,
+                winner: null,
+                history: [],
+                ballSpeed: 5,
+                aiDifficulty: 5
+            };
+            // Game objects
+            const player = {
+                x: borderOffset,
+                y: canvas.height / 2 - paddleHeight / 2,
+                width: paddleWidth,
+                height: paddleHeight,
+                speed: 8,
+                color: '#08f',
+                movingUp: false,
+                movingDown: false
+            };
+            const ai = {
+                x: canvas.width - borderOffset - paddleWidth,
+                y: canvas.height / 2 - paddleHeight / 2,
+                width: paddleWidth,
+                height: paddleHeight,
+                speed: 6,
+                color: '#f0f',
+                reactionDelay: 150 // ms
+            };
+            const ball = {
+                x: canvas.width / 2,
+                y: canvas.height / 2,
+                size: ballSize,
+                speedX: 0,
+                speedY: 0,
+                color: '#fff',
+                maxSpeed: 15
+            };
+            // DOM elements
+            const playerScoreDisplay = document.getElementById('playerScore');
+            const aiScoreDisplay = document.getElementById('aiScore');
+            const startBtn = document.getElementById('startBtn');
+            const pauseBtn = document.getElementById('pauseBtn');
+            const resetBtn = document.getElementById('resetBtn');
+            const ballSpeedSlider = document.getElementById('ballSpeedSlider');
+            const ballSpeedValue = document.getElementById('ballSpeedValue');
+            const aiDifficultySlider = document.getElementById('aiDifficultySlider');
+            const aiDifficultyValue = document.getElementById('aiDifficultyValue');
+            const historyList = document.getElementById('historyList');
+            const gameMessage = document.getElementById('gameMessage');
+            const mobileUpBtn = document.getElementById('mobileUp');
+            const mobileDownBtn = document.getElementById('mobileDown');
+            // Event listeners
+            startBtn.addEventListener('click', startGame);
+            pauseBtn.addEventListener('click', togglePause);
+            resetBtn.addEventListener('click', resetGame);
+            ballSpeedSlider.addEventListener('input', updateBallSpeed);
+            aiDifficultySlider.addEventListener('input', updateAiDifficulty);
+            // Mobile controls
+            mobileUpBtn.addEventListener('touchstart', () => player.movingUp = true);
+            mobileUpBtn.addEventListener('touchend', () => player.movingUp = false);
+            mobileUpBtn.addEventListener('mousedown', () => player.movingUp = true);
+            mobileUpBtn.addEventListener('mouseup', () => player.movingUp = false);
+            mobileDownBtn.addEventListener('touchstart', () => player.movingDown = true);
+            mobileDownBtn.addEventListener('touchend', () => player.movingDown = false);
+            mobileDownBtn.addEventListener('mousedown', () => player.movingDown = true);
+            mobileDownBtn.addEventListener('mouseup', () => player.movingDown = false);
+            // Keyboard controls
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'ArrowUp' || e.key === 'w') player.movingUp = true;
+                if (e.key === 'ArrowDown' || e.key === 's') player.movingDown = true;
+                if (e.key === ' ') togglePause();
+            });
+            document.addEventListener('keyup', (e) => {
+                if (e.key === 'ArrowUp' || e.key === 'w') player.movingUp = false;
+                if (e.key === 'ArrowDown' || e.key === 's') player.movingDown = false;
+            });
+            // Window resize
+            window.addEventListener('resize', () => {
+                canvas.width = canvas.offsetWidth;
+                canvas.height = canvas.offsetHeight;
+                // Re-center paddles and ball
+                player.y = canvas.height / 2 - paddleHeight / 2;
+                ai.y = canvas.height / 2 - paddleHeight / 2;
+                ball.x = canvas.width / 2;
+                ball.y = canvas.height / 2;
+            });
+            // Game functions
+            function startGame() {
+                if (state.gameRunning) return;
+                resetPositions();
+                ball.speedX = state.ballSpeed * (Math.random() > 0.5 ? 1 : -1);
+                ball.speedY = (Math.random() * 2 - 1) * state.ballSpeed;
+                state.gameRunning = true;
+                state.gamePaused = false;
+                state.winner = null;
+                gameMessage.classList.remove('show');
+                animate();
+            }
+            function resetGame() {
+                state.playerScore = 0;
+                state.aiScore = 0;
+                state.gameRunning = false;
+                state.gamePaused = false;
+                state.winner = null;
+                updateScoreboard();
+                resetPositions();
+                gameMessage.classList.remove('show');
+                // Clear the animation frame if it's running
+                cancelAnimationFrame(animationId);
+            }
+            function togglePause() {
+                if (!state.gameRunning) return;
+                state.gamePaused = !state.gamePaused;
+                if (!state.gamePaused) {
+                    animate();
+                }
+            }
+            function resetPositions() {
+                player.y = canvas.height / 2 - paddleHeight / 2;
+                ai.y = canvas.height / 2 - paddleHeight / 2;
+                ball.x = canvas.width / 2;
+                ball.y = canvas.height / 2;
+                ball.speedX = 0;
+                ball.speedY = 0;
+            }
+            function updateBallSpeed() {
+                state.ballSpeed = parseInt(ballSpeedSlider.value);
+                ballSpeedValue.textContent = state.ballSpeed;
+            }
+            function updateAiDifficulty() {
+                state.aiDifficulty = parseInt(aiDifficultySlider.value);
+                aiDifficultyValue.textContent = state.aiDifficulty;
+                // Update AI speed based on difficulty (1-10 map to 3-10 speed)
+                ai.speed = 3 + (state.aiDifficulty / 10) * 7;
+                // Update reaction delay (faster AI reacts quicker)
+                ai.reactionDelay = 200 - (state.aiDifficulty * 15);
+            }
+            function checkCollision() {
+                // Ball collision with walls
+                if (ball.y <= 0 || ball.y >= canvas.height - ball.size) {
+                    ball.speedY = -ball.speedY;
+                    createParticles(ball.x, ball.y, 5, ball.color);
+                }
+                // Ball collision with player paddle
+                if (
+                    ball.x <= player.x + player.width &&
+                    ball.x >= player.x &&
+                    ball.y + ball.size >= player.y &&
+                    ball.y <= player.y + player.height
+                ) {
+                    // Calculate bounce angle based on where ball hits paddle
+                    const hitPosition = (ball.y - player.y) / player.height;
+                    const bounceAngle = maxAngle * (hitPosition - 0.5) * 2;
+                    ball.speedX = Math.cos(bounceAngle) * state.ballSpeed;
+                    ball.speedY = Math.sin(bounceAngle) * state.ballSpeed;
+                    // Make the ball faster after each hit (but cap at max speed)
+                    const speed = Math.sqrt(ball.speedX * ball.speedX + ball.speedY * ball.speedY);
+                    if (speed < ball.maxSpeed) {
+                        ball.speedX *= 1.05;
+                        ball.speedY *= 1.05;
+                    }
+                    createParticles(ball.x, ball.y, 10, player.color);
+                }
+                // Ball collision with AI paddle
+                if (
+                    ball.x + ball.size >= ai.x &&
+                    ball.x <= ai.x + ai.width &&
+                    ball.y + ball.size >= ai.y &&
+                    ball.y <= ai.y + ai.height
+                ) {
+                    // Calculate bounce angle based on where ball hits paddle
+                    const hitPosition = (ball.y - ai.y) / ai.height;
+                    const bounceAngle = maxAngle * (hitPosition - 0.5) * 2;
+                    ball.speedX = -Math.cos(bounceAngle) * state.ballSpeed;
+                    ball.speedY = Math.sin(bounceAngle) * state.ballSpeed;
+                    // Make the ball faster after each hit (but cap at max speed)
+                    const speed = Math.sqrt(ball.speedX * ball.speedX + ball.speedY * ball.speedY);
+                    if (speed < ball.maxSpeed) {
+                        ball.speedX *= 1.05;
+                        ball.speedY *= 1.05;
+                    }
+                    createParticles(ball.x, ball.y, 10, ai.color);
+                }
+                // Score points
+                if (ball.x <= 0) {
+                    // AI scores
+                    state.aiScore++;
+                    updateScoreboard();
+                    scorePoint(false);
+                } else if (ball.x >= canvas.width) {
+                    // Player scores
+                    state.playerScore++;
+                    updateScoreboard();
+                    scorePoint(true);
+                }
+            }
+            function scorePoint(isPlayer) {
+                resetPositions();
+                state.gameRunning = false;
+                // Add to history
+                const now = new Date();
+                const timeString = now.toLocaleTimeString();
+                const dateString = now.toLocaleDateString();
+                const newEntry = {
+                    timestamp: `${dateString} ${timeString}`,
+                    playerScore: state.playerScore,
+                    aiScore: state.aiScore,
+                    winner: state.playerScore > state.aiScore ? 'Player' : 'AI'
+                };
+                state.history.unshift(newEntry);
+                updateHistoryList();
+                // Check for game over (first to 5 points)
+                if (state.playerScore >= 5 || state.aiScore >= 5) {
+                    state.winner = state.playerScore > state.aiScore ? 'Player' : 'AI';
+                    gameMessage.textContent = state.playerScore > state.aiScore
+                        ? 'YOU WIN!'
+                        : 'AI WINS!';
+                    gameMessage.textContent += '\n<span style="font-size:1rem">Click Start to Play Again</span>';
+                    gameMessage.classList.add('show');
+                } else {
+                    // Small delay before serving again
+                    setTimeout(() => {
+                        startGame();
+                    }, 1000);
+                }
+            }
+            function updateScoreboard() {
+                playerScoreDisplay.textContent = state.playerScore;
+                aiScoreDisplay.textContent = state.aiScore;
+            }
+            function updateHistoryList() {
+                historyList.innerHTML = '';
+                state.history.slice(0, 10).forEach((match, index) => {
+                    const item = document.createElement('div');
+                    item.className = 'history-item';
+                    item.style.animationDelay = `${index * 0.1}s`;
+                    item.innerHTML = `
+                        <strong>${match.timestamp}</strong> -
+                        Player: ${match.playerScore} | AI: ${match.aiScore} -
+                        <span style="color: ${match.winner === 'Player' ? '#08f' : '#f0f'}">${match.winner} won</span>
+                    `;
+                    historyList.appendChild(item);
+                });
+            }
+            let lastAiUpdate = 0;
+            function updateAI(currentTime) {
+                // Only update AI every reactionDelay ms for more "human-like" behavior
+                if (currentTime - lastAiUpdate < ai.reactionDelay) return;
+                lastAiUpdate = currentTime;
+                // AI prediction with error based on difficulty
+                const predictY = ball.y + (ball.speedY * (ai.x - ball.x) / ball.speedX);
+                const errorRange = 100 - (state.aiDifficulty * 8);
+                const error = (Math.random() - 0.5) * errorRange;
+                const targetY = predictY + error;
+                // Move AI paddle towards predicted position
+                const paddleCenter = ai.y + ai.height / 2;
+                if (paddleCenter < targetY - ai.height / 4) {
+                    ai.y += ai.speed;
+                } else if (paddleCenter > targetY + ai.height / 4) {
+                    ai.y -= ai.speed;
+                }
+                // Keep AI paddle within bounds
+                ai.y = Math.max(0, Math.min(canvas.height - ai.height, ai.y));
+            }
+            function updatePlayer() {
+                if (player.movingUp) {
+                    player.y -= player.speed;
+                } else if (player.movingDown) {
+                    player.y += player.speed;
+                }
+                // Keep player paddle within bounds
+                player.y = Math.max(0, Math.min(canvas.height - player.height, player.y));
+            }
+            function updateBall() {
+                ball.x += ball.speedX;
+                ball.y += ball.speedY;
+            }
+            const particles = [];
+            function createParticles(x, y, count, color) {
+                for (let i = 0; i < count; i++) {
+                    particles.push({
+                        x,
+                        y,
+                        size: Math.random() * 4 + 2,
+                        speedX: (Math.random() - 0.5) * 6,
+                        speedY: (Math.random() - 0.5) * 6,
+                        color,
+                        life: 30 + Math.random() * 20,
+                        alpha: 1
+                    });
+                }
+            }
+            function updateParticles() {
+                for (let i = particles.length - 1; i >= 0; i--) {
+                    const p = particles[i];
+                    p.x += p.speedX;
+                    p.y += p.speedY;
+                    p.life--;
+                    p.alpha = p.life / 50;
+                    if (p.life <= 0) {
+                        particles.splice(i, 1);
+                    }
+                }
+            }
+            function draw() {
+                // Clear canvas
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+                // Draw background grid
+                ctx.strokeStyle = 'rgba(144, 0, 255, 0.05)';
+                ctx.lineWidth = 1;
+                // Vertical grid
+                for (let x = borderOffset; x < canvas.width; x += 40) {
+                    ctx.beginPath();
+                    ctx.moveTo(x, 0);
+                    ctx.lineTo(x, canvas.height);
+                    ctx.stroke();
+                }
+                // Horizontal grid
+                for (let y = 0; y < canvas.height; y += 40) {
+                    ctx.beginPath();
+                    ctx.moveTo(0, y);
+                    ctx.lineTo(canvas.width, y);
+                    ctx.stroke();
+                }
+                // Draw paddles with glow effect
+                // Player paddle
+                ctx.shadowColor = player.color;
+                ctx.shadowBlur = 15;
+                ctx.fillStyle = player.color;
+                ctx.fillRect(player.x, player.y, player.width, player.height);
+                // AI paddle
+                ctx.shadowColor = ai.color;
+                ctx.fillStyle = ai.color;
+                ctx.fillRect(ai.x, ai.y, ai.width, ai.height);
+                // Reset shadow
+                ctx.shadowBlur = 0;
+                // Draw ball with glow effect
+                ctx.shadowColor = ball.color;
+                ctx.shadowBlur = 15;
+                ctx.fillStyle = ball.color;
+                ctx.beginPath();
+                ctx.arc(ball.x + ball.size/2, ball.y + ball.size/2, ball.size/2, 0, Math.PI * 2);
+                ctx.fill();
+                ctx.shadowBlur = 0;
+                // Draw trail behind ball
+                ctx.strokeStyle = `rgba(255, 255, 255, 0.3)`;
+                ctx.lineWidth = 2;
+                ctx.beginPath();
+                ctx.moveTo(ball.x + ball.size/2, ball.y + ball.size/2);
+                ctx.lineTo(
+                    ball.x + ball.size/2 - ball.speedX * 2,
+                    ball.y + ball.size/2 - ball.speedY * 2
+                );
+                ctx.stroke();
+                // Draw particles
+                particles.forEach(p => {
+                    ctx.fillStyle = `${p.color.replace(')', `, ${p.alpha})`).replace('rgb', 'rgba')}`;
+                    ctx.beginPath();
+                    ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+                    ctx.fill();
+                });
+            }
+            let animationId;
+            function animate(timestamp = 0) {
+                if (state.gamePaused || !state.gameRunning) return;
+                // Update game state
+                updatePlayer();
+                updateAI(timestamp);
+                updateBall();
+                updateParticles();
+                checkCollision();
+                // Draw everything
+                draw();
+                animationId = requestAnimationFrame(animate);
+            }
+            // Initialize controls
+            updateBallSpeed();
+            updateAiDifficulty();
+        });
+    </script>
+</body>
 </html>