Basketball 1v1

Here's a simple 1v1 basketball game against AI using HTML, CSS, and JavaScript: Basketball 1v1

Player: 0

AI: 0

body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; font-family: Arial, sans-serif; } .game-container { width: 800px; height: 500px; position: relative; overflow: hidden; } .court { width: 100%; height: 100%; background-color: #1a6e1a; position: relative; border: 5px solid #333; } .player, .ai, .ball { position: absolute; border-radius: 50%; } .player { width: 40px; height: 40px; background-color: blue; bottom: 20px; left: 50px; } .ai { width: 40px; height: 40px; background-color: red; bottom: 20px; right: 50px; } .ball { width: 20px; height: 20px; background-color: orange; } .hoop { position: absolute; width: 60px; height: 10px; background-color: #333; top: 50px; right: 100px; border-radius: 5px; } .scoreboard { position: absolute; top: 10px; left: 10px; background-color: rgba(255, 255, 255, 0.7); padding: 10px; border-radius: 5px; font-weight: bold; } const player = document.getElementById('player'); const ai = document.getElementById('ai'); const ball = document.getElementById('ball'); const hoop = document.getElementById('hoop'); const playerScoreEl = document.getElementById('player-score'); const aiScoreEl = document.getElementById('ai-score'); let playerScore = 0; let aiScore = 0; let ballOwner = 'player'; let gameActive = true; // Initialize positions resetPositions(); // Event listeners document.addEventListener('keydown', handleKeyPress); function handleKeyPress(e) { if (!gameActive) return; const playerRect = player.getBoundingClientRect(); const ballRect = ball.getBoundingClientRect(); const courtRect = document.querySelector('.court').getBoundingClientRect(); // Movement if (e.key === 'ArrowLeft' && playerRect.left > courtRect.left + 10) { player.style.left = (parseInt(player.style.left) - 10) + 'px'; if (ballOwner === 'player') { ball.style.left = (parseInt(ball.style.left) - 10) + 'px'; } } if (e.key === 'ArrowRight' && playerRect.right < courtRect.right - 10) { player.style.left = (parseInt(player.style.left) + 10) + 'px'; if (ballOwner === 'player') { ball.style.left = (parseInt(ball.style.left) + 10) + 'px'; } } if (e.key === 'ArrowUp' && playerRect.top > courtRect.top + 10) { player.style.top = (parseInt(player.style.top) - 10) + 'px'; if (ballOwner === 'player') { ball.style.top = (parseInt(ball.style.top) - 10) + 'px'; } } if (e.key === 'ArrowDown' && playerRect.bottom < courtRect.bottom - 10) { player.style.top = (parseInt(player.style.top) + 10) + 'px'; if (ballOwner === 'player') { ball.style.top = (parseInt(ball.style.top) + 10) + 'px'; } } // Shooting if (e.key === ' ' && ballOwner === 'player') { shootBall('player'); } } function shootBall(shooter) { ballOwner = null; const ballRect = ball.getBoundingClientRect(); const hoopRect = hoop.getBoundingClientRect(); // Calculate trajectory const targetX = hoopRect.left + hoopRect.width / 2; const targetY = hoopRect.top + hoopRect.height / 2; const startX = ballRect.left + ballRect.width / 2; const startY = ballRect.top + ballRect.height / 2; const dx = targetX - startX; const dy = targetY - startY; const distance = Math.sqrt(dx * dx + dy * dy); const steps = distance / 5; let currentStep = 0; const gravity = 0.2; const shootInterval = setInterval(() => { if (currentStep >= steps) { clearInterval(shootInterval); checkScore(shooter); return; } currentStep++; const progress = currentStep / steps; const x = startX + dx * progress; const y = startY + dy * progress + gravity * currentStep * currentStep; ball.style.left = (x - ballRect.width / 2) + 'px'; ball.style.top = (y - ballRect.height / 2) + 'px'; // Check if ball hits the ground if (y > document.querySelector('.court').getBoundingClientRect().bottom - ballRect.height) { clearInterval(shootInterval); ballOwner = shooter === 'player' ? 'ai' : 'player'; resetBallPosition(); } }, 20); } function checkScore(shooter) { const ballRect = ball.getBoundingClientRect(); const hoopRect = hoop.getBoundingClientRect(); if ( ballRect.right > hoopRect.left && ballRect.left < hoopRect.right && ballRect.bottom > hoopRect.top && ballRect.top < hoopRect.bottom ) { if (shooter === 'player') { playerScore++; playerScoreEl.textContent = playerScore; } else { aiScore++; aiScoreEl.textContent = aiScore; } } ballOwner = shooter === 'player' ? 'ai' : 'player'; resetBallPosition(); if (ballOwner === 'ai') { setTimeout(aiTurn, 1000); } } function aiTurn() { if (!gameActive) return; // Simple AI: move towards ball if not in possession if (ballOwner !== 'ai') { const aiRect = ai.getBoundingClientRect(); const ballRect = ball.getBoundingClientRect(); const dx = ballRect.left - aiRect.left; const dy = ballRect.top - aiRect.top; // Move AI towards ball ai.style.left = (parseInt(ai.style.left) + Math.sign(dx) * 5) + 'px'; ai.style.top = (parseInt(ai.style.top) + Math.sign(dy) * 5) + 'px'; // Check if AI caught the ball if ( Math.abs(dx) < 30 && Math.abs(dy) < 30 ) { ballOwner = 'ai'; ball.style.left = (parseInt(ai.style.left) + 10) + 'px'; ball.style.top = (parseInt(ai.style.top) - 10) + 'px'; setTimeout(() => shootBall('ai'), 500); } else { setTimeout(aiTurn, 50); } } } function resetBallPosition() { if (ballOwner === 'player') { ball.style.left = (parseInt(player.style.left) + 10) + 'px'; ball.style.top = (parseInt(player.style.top) - 10) + 'px'; } else if (ballOwner === 'ai') { ball.style.left = (parseInt(ai.style.left) + 10) + 'px'; ball.style.top = (parseInt(ai.style.top) - 10) + 'px'; } } function resetPositions() { player.style.left = '50px'; player.style.top = '440px'; ai.style.left = '710px'; ai.style.top = '440px'; ballOwner = 'player'; resetBallPosition(); } Use arrow keys to move and space to shoot. The AI will automatically try to get the ball and shoot when it has possession.