Pong Game

0 - 0

Use Arrow Keys to move, 'T' to move the net.

body { margin: 0; overflow: hidden; background-color: #222; color: white; font-family: sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; position: relative; /* Needed for absolute positioning of score */ } canvas { display: block; border: 1px solid white; /* Visualize game area */ } #score { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); font-size: 2em; z-index: 10; } #info { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-size: 1em; color: #aaa; z-index: 10; } import * as THREE from 'three'; // --- Constants --- const PADDLE_WIDTH = 0.2; const PADDLE_HEIGHT = 1.5; const BALL_RADIUS = 0.15; const COURT_WIDTH = 10; const COURT_HEIGHT = 6; const PADDLE_SPEED = 0.1; const BALL_SPEED_X = 0.08; const BALL_SPEED_Y_INITIAL = 0.05; const OPPONENT_SPEED = 0.04; const NET_HEIGHT = 1.0; const NET_WIDTH = 0.1; const NET_SPEED = 0.05; // --- Game State --- let playerScore = 0; let opponentScore = 0; let ballVelocity = new THREE.Vector2(BALL_SPEED_X, BALL_SPEED_Y_INITIAL); const keysPressed = {}; // --- Scene Setup --- const scene = new THREE.Scene(); scene.background = new THREE.Color(0x111111); // Use OrthographicCamera for a 2D-like view const aspect = window.innerWidth / window.innerHeight; const frustumSize = COURT_HEIGHT * 1.1; // Add some padding const camera = new THREE.OrthographicCamera( frustumSize * aspect / -2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / -2, 0.1, 100 ); camera.position.z = 10; const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(renderer.domElement); // --- Game Elements --- const paddleMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff }); const ballMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 }); const netMaterial = new THREE.MeshBasicMaterial({ color: 0x00ffff }); // Player Paddle const playerPaddleGeo = new THREE.BoxGeometry(PADDLE_WIDTH, PADDLE_HEIGHT, 0.1); const playerPaddle = new THREE.Mesh(playerPaddleGeo, paddleMaterial); playerPaddle.position.x = -COURT_WIDTH / 2 + PADDLE_WIDTH; scene.add(playerPaddle); // Opponent Paddle const opponentPaddleGeo = new THREE.BoxGeometry(PADDLE_WIDTH, PADDLE_HEIGHT, 0.1); const opponentPaddle = new THREE.Mesh(opponentPaddleGeo, paddleMaterial); opponentPaddle.position.x = COURT_WIDTH / 2 - PADDLE_WIDTH; scene.add(opponentPaddle); // Ball const ballGeo = new THREE.SphereGeometry(BALL_RADIUS, 16, 16); const ball = new THREE.Mesh(ballGeo, ballMaterial); scene.add(ball); // Net (the "weird little line") const netGeo = new THREE.BoxGeometry(NET_WIDTH, NET_HEIGHT, 0.1); const net = new THREE.Mesh(netGeo, netMaterial); net.position.x = 0; scene.add(net); // --- Lighting (optional for MeshBasicMaterial, but good practice) --- const ambientLight = new THREE.AmbientLight(0xffffff, 1.0); scene.add(ambientLight); // --- Score Display --- const playerScoreElement = document.getElementById('player-score'); const opponentScoreElement = document.getElementById('opponent-score'); function updateScoreDisplay() { playerScoreElement.textContent = playerScore; opponentScoreElement.textContent = opponentScore; } // --- Reset Ball --- function resetBall(direction = 1) { ball.position.set(0, 0, 0); // Randomize initial Y direction slightly const randomY = (Math.random() - 0.5) * BALL_SPEED_Y_INITIAL * 2; ballVelocity.set(BALL_SPEED_X * direction, randomY); } // --- Input Handling --- document.addEventListener('keydown', (event) => { keysPressed[event.key.toLowerCase()] = true; }); document.addEventListener('keyup', (event) => { keysPressed[event.key.toLowerCase()] = false; }); function handleInput() { const halfPaddleHeight = PADDLE_HEIGHT / 2; const halfCourtHeight = COURT_HEIGHT / 2; // Player Paddle Movement (Up/Down) if (keysPressed['arrowup'] && playerPaddle.position.y < halfCourtHeight - halfPaddleHeight) { playerPaddle.position.y += PADDLE_SPEED; } if (keysPressed['arrowdown'] && playerPaddle.position.y > -halfCourtHeight + halfPaddleHeight) { playerPaddle.position.y -= PADDLE_SPEED; } // Player Paddle Movement (Left/Right - slightly different interpretation) // Move paddle slightly in/out from the edge const basePlayerX = -COURT_WIDTH / 2 + PADDLE_WIDTH; const maxPlayerX = basePlayerX + 1.0; // How far player can move right const minPlayerX = basePlayerX - 0.5; // How far player can move left if (keysPressed['arrowright'] && playerPaddle.position.x < maxPlayerX) { playerPaddle.position.x += PADDLE_SPEED * 0.5; // Slower horizontal movement } if (keysPressed['arrowleft'] && playerPaddle.position.x > minPlayerX) { playerPaddle.position.x -= PADDLE_SPEED * 0.5; } // Net Movement const halfNetHeight = NET_HEIGHT / 2; if (keysPressed['t']) { // Cycle net position up and down net.position.y += NET_SPEED; if (net.position.y > halfCourtHeight - halfNetHeight) { net.position.y = -halfCourtHeight + halfNetHeight; // Wrap around } } } // --- Opponent AI --- function updateOpponent() { const halfPaddleHeight = PADDLE_HEIGHT / 2; const halfCourtHeight = COURT_HEIGHT / 2; const targetY = ball.position.y; const currentY = opponentPaddle.position.y; const dy = targetY - currentY; // Move opponent paddle towards the ball's y position if (Math.abs(dy) > OPPONENT_SPEED) { opponentPaddle.position.y += Math.sign(dy) * OPPONENT_SPEED; } // Clamp opponent paddle position opponentPaddle.position.y = Math.max(-halfCourtHeight + halfPaddleHeight, Math.min(halfCourtHeight - halfPaddleHeight, opponentPaddle.position.y)); } // --- Collision Detection --- function checkCollisions() { const halfCourtHeight = COURT_HEIGHT / 2; const halfCourtWidth = COURT_WIDTH / 2; const halfPaddleHeight = PADDLE_HEIGHT / 2; const halfNetHeight = NET_HEIGHT / 2; // Ball vs Top/Bottom Walls if (ball.position.y + BALL_RADIUS > halfCourtHeight) { ball.position.y = halfCourtHeight - BALL_RADIUS; // Clamp position ballVelocity.y *= -1; playerScore--; // Lose point if ball goes too far up/down updateScoreDisplay(); console.log("Ball hit top - point lost"); } else if (ball.position.y - BALL_RADIUS < -halfCourtHeight) { ball.position.y = -halfCourtHeight + BALL_RADIUS; // Clamp position ballVelocity.y *= -1; playerScore--; // Lose point if ball goes too far up/down updateScoreDisplay(); console.log("Ball hit bottom - point lost"); } // Ball vs Player Paddle const playerBox = new THREE.Box3().setFromObject(playerPaddle); const ballBox = new THREE.Box3().setFromObject(ball); // Use Box3 for simpler AABB check if (ballBox.intersectsBox(playerBox) && ballVelocity.x < 0) { ballVelocity.x *= -1; // Adjust Y velocity based on where it hit the paddle ("R control" interpretation) const hitPosRatio = (ball.position.y - playerPaddle.position.y) / halfPaddleHeight; ballVelocity.y += hitPosRatio * 0.05; // Add some vertical spin ballVelocity.y = Math.min(Math.max(ballVelocity.y, -BALL_SPEED_X * 1.5), BALL_SPEED_X * 1.5); // Clamp vertical speed ball.position.x = playerPaddle.position.x + PADDLE_WIDTH / 2 + BALL_RADIUS; // Prevent sticking console.log("Ball hit player paddle"); } // Ball vs Opponent Paddle const opponentBox = new THREE.Box3().setFromObject(opponentPaddle); if (ballBox.intersectsBox(opponentBox) && ballVelocity.x > 0) { ballVelocity.x *= -1; const hitPosRatio = (ball.position.y - opponentPaddle.position.y) / halfPaddleHeight; ballVelocity.y += hitPosRatio * 0.05; ballVelocity.y = Math.min(Math.max(ballVelocity.y, -BALL_SPEED_X * 1.5), BALL_SPEED_X * 1.5); ball.position.x = opponentPaddle.position.x - PADDLE_WIDTH / 2 - BALL_RADIUS; // Prevent sticking console.log("Ball hit opponent paddle"); } // Ball vs Net const netBox = new THREE.Box3().setFromObject(net); if (ballBox.intersectsBox(netBox)) { // More complex bounce: check which side it hit from if (ball.position.x < net.position.x && ballVelocity.x > 0) { // Hit from left ballVelocity.x *= -1; ball.position.x = net.position.x - NET_WIDTH / 2 - BALL_RADIUS; } else if (ball.position.x > net.position.x && ballVelocity.x < 0) { // Hit from right ballVelocity.x *= -1; ball.position.x = net.position.x + NET_WIDTH / 2 + BALL_RADIUS; } // Optionally bounce off top/bottom of net too if (ball.position.y > net.position.y && ballVelocity.y < 0) { // Hit from top ballVelocity.y *= -1; ball.position.y = net.position.y + NET_HEIGHT / 2 + BALL_RADIUS; } else if (ball.position.y < net.position.y && ballVelocity.y > 0) { // Hit from bottom ballVelocity.y *= -1; ball.position.y = net.position.y - NET_HEIGHT / 2 - BALL_RADIUS; } console.log("Ball hit net"); } // Ball vs Left/Right Walls (Scoring) if (ball.position.x + BALL_RADIUS > halfCourtWidth) { playerScore++; updateScoreDisplay(); resetBall(-1); // Ball goes towards player console.log("Opponent missed - player scores"); } else if (ball.position.x - BALL_RADIUS < -halfCourtWidth) { opponentScore++; updateScoreDisplay(); resetBall(1); // Ball goes towards opponent console.log("Player missed - opponent scores"); } } // --- Window Resize --- function onWindowResize() { const newAspect = window.innerWidth / window.innerHeight; camera.left = frustumSize * newAspect / -2; camera.right = frustumSize * newAspect / 2; camera.top = frustumSize / 2; camera.bottom = frustumSize / -2; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } window.addEventListener('resize', onWindowResize); // --- Animation Loop --- function animate() { requestAnimationFrame(animate); handleInput(); updateOpponent(); // Update ball position ball.position.x += ballVelocity.x; ball.position.y += ballVelocity.y; checkCollisions(); renderer.render(scene, camera); } // --- Start Game --- resetBall(); updateScoreDisplay(); animate();