const DESIGN_WIDTH = 800; const DESIGN_HEIGHT = 600; if (typeof window.__P5_CLEANUP__ === "function") { window.__P5_CLEANUP__(); } const sketch = (p) => { // Game state let gameState = 'characterSelect'; // 'characterSelect', 'playing', 'gameOver' let selectedPlayer1 = 'green'; let selectedPlayer2 = 'red'; let vsCpu = false; const characters = ['green', 'red', 'blue']; let gameMode = 'Soccer'; const modes = ['Soccer', 'Hockey', 'Basketball', 'Classic']; let ballX = DESIGN_WIDTH / 2; let ballY = DESIGN_HEIGHT / 2; let ballVX = 3; let ballVY = 1.5; let player1Y = DESIGN_HEIGHT / 2 - 50; let player2Y = DESIGN_HEIGHT / 2 - 50; let score1 = 0; let score2 = 0; let angle = 0; let cheerTimer1 = 0; let cheerTimer2 = 0; const fans = [ { x: 150, y: 30, side: 'left' }, { x: 250, y: 30, side: 'left' }, { x: 550, y: 30, side: 'right' }, { x: 650, y: 30, side: 'right' }, { x: 200, y: DESIGN_HEIGHT - 30, side: 'left' }, { x: 600, y: DESIGN_HEIGHT - 30, side: 'right' } ]; let scaleFactor = 1; let offsetX = 0; let offsetY = 0; let resizeObserver = null; let resizeHandler = null; let teardown = null; const getContainer = () => document.getElementById("renderDiv"); const computeLayout = () => { const container = getContainer(); const width = Math.max(1, container ? container.clientWidth : window.innerWidth); const height = Math.max(1, container ? container.clientHeight : window.innerHeight); const fitScale = Math.max( 0.1, Math.min(width / DESIGN_WIDTH, height / DESIGN_HEIGHT) || 1 ); scaleFactor = fitScale; offsetX = (width - DESIGN_WIDTH * scaleFactor) / 2; offsetY = (height - DESIGN_HEIGHT * scaleFactor) / 2; return { width, height }; }; const resizeCanvasToContainer = () => { const { width, height } = computeLayout(); p.resizeCanvas(width, height); }; const toDesignSpace = (clientX, clientY) => ({ x: (clientX - offsetX) / scaleFactor, y: (clientY - offsetY) / scaleFactor, }); const clamp = (value, min, max) => Math.max(min, Math.min(max, value)); p.setup = () => { const { width, height } = computeLayout(); const renderer = p.createCanvas(width, height); renderer.parent("renderDiv"); p.pixelDensity(Math.min(2, window.devicePixelRatio || 1)); p.textFont('Arial'); const container = getContainer(); if (typeof ResizeObserver !== "undefined" && container) { resizeObserver = new ResizeObserver(() => { resizeCanvasToContainer(); }); resizeObserver.observe(container); } else { resizeHandler = () => resizeCanvasToContainer(); window.addEventListener("resize", resizeHandler); } teardown = () => { if (resizeObserver) { resizeObserver.disconnect(); resizeObserver = null; } if (resizeHandler) { window.removeEventListener("resize", resizeHandler); resizeHandler = null; } }; }; p.windowResized = () => { resizeCanvasToContainer(); }; p.mousePressed = () => { const mouse = toDesignSpace(p.mouseX, p.mouseY); if (gameState === 'characterSelect') { // Toggle CPU mode button area check if (mouse.x > DESIGN_WIDTH / 2 - 100 && mouse.x < DESIGN_WIDTH / 2 + 100 && mouse.y > 350 && mouse.y < 390) { vsCpu = !vsCpu; } } else if (gameState === 'playing') { // Reset button area check if (mouse.x > DESIGN_WIDTH / 2 - 50 && mouse.x < DESIGN_WIDTH / 2 + 50 && mouse.y > DESIGN_HEIGHT - 40 && mouse.y < DESIGN_HEIGHT - 10) { resetGame(); } } else if (gameState === 'gameOver') { resetGame(); } }; p.keyPressed = () => { if (gameState === 'characterSelect') { // Player 1 character selection (left side - WASD) if (p.key === 'w' || p.key === 'W') { const currentIdx1 = characters.indexOf(selectedPlayer1); selectedPlayer1 = characters[(currentIdx1 + 1) % characters.length]; } else if (p.key === 's' || p.key === 'S') { const currentIdx1 = characters.indexOf(selectedPlayer1); selectedPlayer1 = characters[(currentIdx1 - 1 + characters.length) % characters.length]; } // Player 2 character selection (right side - Arrow keys) else if (p.keyCode === p.UP_ARROW) { const currentIdx2 = characters.indexOf(selectedPlayer2); selectedPlayer2 = characters[(currentIdx2 + 1) % characters.length]; } else if (p.keyCode === p.DOWN_ARROW) { const currentIdx2 = characters.indexOf(selectedPlayer2); selectedPlayer2 = characters[(currentIdx2 - 1 + characters.length) % characters.length]; } // Mode selection with 'M' else if (p.key === 'm' || p.key === 'M') { const currentModeIdx = modes.indexOf(gameMode); gameMode = modes[(currentModeIdx + 1) % modes.length]; } // CPU toggle with 'C' else if (p.key === 'c' || p.key === 'C') { vsCpu = !vsCpu; } // Start game with SPACE else if (p.key === ' ' || p.keyCode === 32) { gameState = 'playing'; if (gameMode === 'Hockey') { ballVX = 5; ballVY = 2.5; } else if (gameMode === 'Basketball') { ballVX = 4.5; ballVY = 2.2; } else if (gameMode === 'Classic') { ballVX = 3; ballVY = 1.5; } else { ballVX = 4; ballVY = 2; } } } else if (gameState === 'gameOver') { if (p.key === ' ' || p.keyCode === 32) { resetGame(); } } else { // Game controls if (p.key === 'w' || p.key === 'W') { player1Y -= 15; } else if (p.key === 's' || p.key === 'S') { player1Y += 15; } if (p.keyCode === p.UP_ARROW) { player2Y -= 15; } else if (p.keyCode === p.DOWN_ARROW) { player2Y += 15; } player1Y = clamp(player1Y, 35, DESIGN_HEIGHT - 35); player2Y = clamp(player2Y, 35, DESIGN_HEIGHT - 35); } }; p.keyReleased = () => { // Continuous movement handling }; const getColor = (char) => { if (char === 'green') return [34, 197, 94]; if (char === 'red') return [239, 68, 68]; if (char === 'blue') return [96, 165, 250]; return [255, 255, 255]; }; p.draw = () => { if (gameState === 'characterSelect') { p.background(15, 23, 42); p.push(); p.translate(offsetX, offsetY); p.scale(scaleFactor); // Title p.fill(255); p.textSize(48); p.textAlign(p.CENTER); p.text("CHOOSE CHARACTERS", DESIGN_WIDTH / 2, 100); // Player 1 selection (Left) p.textSize(24); p.textAlign(p.LEFT); p.text("Player 1 (W/S):", 50, 200); let p1Color = getColor(selectedPlayer1); p.fill(...p1Color); p.circle(60, 250, 40); p.fill(255); p.text(selectedPlayer1.toUpperCase(), 120, 260); // Player 2 selection (Right) p.textAlign(p.RIGHT); p.text("Player 2 (Up/Down):", DESIGN_WIDTH - 50, 200); let p2Color = getColor(selectedPlayer2); p.fill(...p2Color); p.circle(DESIGN_WIDTH - 60, 250, 40); p.fill(255); p.text(selectedPlayer2.toUpperCase(), DESIGN_WIDTH - 120, 260); // Mode Selection UI p.textSize(28); p.textAlign(p.CENTER); p.fill(255, 255, 0); p.text("MODE: " + gameMode.toUpperCase(), DESIGN_WIDTH / 2, 320); p.textSize(16); p.fill(200); p.text("(Press 'M' to change mode)", DESIGN_WIDTH / 2, 345); // CPU Toggle UI p.push(); p.rectMode(p.CENTER); p.fill(vsCpu ? [100, 255, 100] : [100, 100, 100]); p.rect(DESIGN_WIDTH / 2, 370, 180, 35, 10); p.fill(0); p.textSize(20); p.text(vsCpu ? "VS CPU: ON" : "VS CPU: OFF", DESIGN_WIDTH / 2, 377); p.pop(); p.textSize(14); p.fill(180); p.text("(Press 'C' or Click to toggle)", DESIGN_WIDTH / 2, 395); // Instructions p.textSize(24); p.fill(255); p.text("First to 10 points wins!", DESIGN_WIDTH / 2, 440); p.textSize(20); p.fill(200); p.text("Press SPACE to start!", DESIGN_WIDTH / 2, 480); p.pop(); return; } if (gameState === 'gameOver') { p.background(15, 23, 42); p.push(); p.translate(offsetX, offsetY); p.scale(scaleFactor); p.textAlign(p.CENTER, p.CENTER); p.fill(255); p.textSize(64); p.textStyle(p.BOLD); let winner = score1 >= 10 ? (selectedPlayer1.toUpperCase() + " PLAYER") : (selectedPlayer2.toUpperCase() + (vsCpu ? " CPU" : " PLAYER")); let winnerColor = score1 >= 10 ? getColor(selectedPlayer1) : getColor(selectedPlayer2); p.fill(...winnerColor); p.text(winner + " WINS!", DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 - 50); p.fill(255); p.textSize(32); p.textStyle(p.NORMAL); p.text("Final Score: " + score1 + " - " + score2, DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 + 40); p.textSize(24); p.fill(255, 255, 0); p.text("Press SPACE or CLICK to play again", DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 + 120); p.pop(); return; } // Continuous key handling for smooth movement (playing state) // Player 1 (WASD) if (p.keyIsDown(87) || p.keyIsDown(83)) { // W or S if (p.keyIsDown(87)) player1Y -= 8; if (p.keyIsDown(83)) player1Y += 8; } // Player 2 (Arrow keys or CPU) if (vsCpu) { // Basic AI: Move towards the ball's Y position let cpuSpeed = gameMode === 'Hockey' ? 6 : 5; if (player2Y < ballY - 10) player2Y += cpuSpeed; else if (player2Y > ballY + 10) player2Y -= cpuSpeed; } else { if (p.keyIsDown(p.UP_ARROW) || p.keyIsDown(p.DOWN_ARROW)) { if (p.keyIsDown(p.UP_ARROW)) player2Y -= 8; if (p.keyIsDown(p.DOWN_ARROW)) player2Y += 8; } } player1Y = clamp(player1Y, 35, DESIGN_HEIGHT - 35); player2Y = clamp(player2Y, 35, DESIGN_HEIGHT - 35); p.background(15, 23, 42); p.push(); p.translate(offsetX, offsetY); p.scale(scaleFactor); // Fans fans.forEach(fan => { const color = fan.side === 'left' ? getColor(selectedPlayer1) : getColor(selectedPlayer2); const cheerScale = fan.side === 'left' ? (1 + cheerTimer1 * 0.1) : (1 + cheerTimer2 * 0.1); p.push(); p.translate(fan.x, fan.y); p.scale(cheerScale); // Face p.fill(...color); p.stroke(255); p.strokeWeight(2); p.ellipse(0, 0, 25, 25); // Eyes p.fill(255); p.ellipse(-6, -4, 4, 4); p.ellipse(6, -4, 4, 4); // Smile p.noFill(); p.arc(0, 4, 12, 8, 0, p.PI); // Arms p.stroke(...color); p.strokeWeight(3); p.line(-12, 0, -18, -8 + Math.sin(angle * 2 + fan.x) * 3); p.line(12, 0, 18, -8 + Math.sin(angle * 2 + fan.x + 2) * 3); p.pop(); }); // Field if (gameMode === 'Soccer') { p.fill(20, 100, 20); p.rect(0, 0, DESIGN_WIDTH, DESIGN_HEIGHT); p.fill(34, 139, 34); p.rect(20, 20, DESIGN_WIDTH - 40, DESIGN_HEIGHT - 40, 5); p.stroke(255); p.strokeWeight(3); p.noFill(); p.line(DESIGN_WIDTH / 2, 20, DESIGN_WIDTH / 2, DESIGN_HEIGHT - 20); p.circle(DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2, 100); p.noStroke(); } else if (gameMode === 'Hockey') { p.fill(180, 220, 255); p.rect(0, 0, DESIGN_WIDTH, DESIGN_HEIGHT); p.fill(240, 248, 255); p.rect(20, 20, DESIGN_WIDTH - 40, DESIGN_HEIGHT - 40, 50); p.stroke(255, 100, 100); p.strokeWeight(4); p.line(DESIGN_WIDTH / 2, 20, DESIGN_WIDTH / 2, DESIGN_HEIGHT - 20); p.stroke(100, 100, 255); p.line(DESIGN_WIDTH / 4, 20, DESIGN_WIDTH / 4, DESIGN_HEIGHT - 20); p.line(3 * DESIGN_WIDTH / 4, 20, 3 * DESIGN_WIDTH / 4, DESIGN_HEIGHT - 20); p.noFill(); p.circle(DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2, 120); p.noStroke(); } else if (gameMode === 'Basketball') { p.fill(160, 80, 45); p.rect(0, 0, DESIGN_WIDTH, DESIGN_HEIGHT); p.fill(210, 120, 60); p.rect(20, 20, DESIGN_WIDTH - 40, DESIGN_HEIGHT - 40, 5); p.stroke(255); p.strokeWeight(3); p.noFill(); p.line(DESIGN_WIDTH / 2, 20, DESIGN_WIDTH / 2, DESIGN_HEIGHT - 20); p.circle(DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2, 100); p.rect(20, DESIGN_HEIGHT / 2 - 100, 150, 200); p.rect(DESIGN_WIDTH - 170, DESIGN_HEIGHT / 2 - 100, 150, 200); p.noStroke(); } else { p.fill(20, 60, 20); p.rect(0, 0, DESIGN_WIDTH, DESIGN_HEIGHT); p.fill(96, 165, 250); p.rect(20, 20, DESIGN_WIDTH - 40, DESIGN_HEIGHT - 40, 20); p.noFill(); p.stroke(255); p.strokeWeight(3); p.circle(DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2, 80); p.noStroke(); } // Goals p.fill(0, 0, 0); p.rect(0, DESIGN_HEIGHT / 2 - 80, 20, 160); p.rect(DESIGN_WIDTH - 20, DESIGN_HEIGHT / 2 - 80, 20, 160); // Players with selected colors let p1Color = getColor(selectedPlayer1); let p2Color = getColor(selectedPlayer2); p.fill(...p1Color); p.circle(60, player1Y, 30); p.fill(...p2Color); p.circle(DESIGN_WIDTH - 60, player2Y, 30); // Ball / Puck if (gameMode === 'Soccer') { p.fill(255); p.circle(ballX, ballY, 30); p.fill(0); p.circle(ballX, ballY, 9); p.noFill(); p.stroke(0); p.strokeWeight(1); p.circle(ballX, ballY, 30); p.noStroke(); } else if (gameMode === 'Hockey') { p.fill(20, 20, 20); p.ellipse(ballX, ballY, 36, 27); } else if (gameMode === 'Basketball') { p.fill(230, 115, 0); p.circle(ballX, ballY, 30); p.stroke(0); p.strokeWeight(1.5); p.line(ballX - 15, ballY, ballX + 15, ballY); p.line(ballX, ballY - 15, ballX, ballY + 15); p.noFill(); p.arc(ballX - 22, ballY, 30, 30, -p.PI/3, p.PI/3); p.arc(ballX + 22, ballY, 30, 30, p.PI - p.PI/3, p.PI + p.PI/3); p.noStroke(); } else { p.fill(255, 255, 255); p.circle(ballX, ballY, 30); } // Scoreboard p.push(); // Semi-transparent background for scoreboard p.fill(0, 0, 0, 150); // Black with 150 alpha p.noStroke(); p.rectMode(p.CENTER); p.rect(DESIGN_WIDTH / 2, 60, 200, 80, 10); // Centered rectangle, rounded corners p.textSize(64); // Larger font size for scores p.textStyle(p.BOLD); p.textAlign(p.CENTER, p.CENTER); // Center both horizontally and vertically for text // Display Player 1's score in their color p.fill(...p1Color); p.text(score1, DESIGN_WIDTH / 2 - 50, 60); // Separator p.fill(255); p.text('-', DESIGN_WIDTH / 2, 60); // Display Player 2's score in their color p.fill(...p2Color); p.text(score2, DESIGN_WIDTH / 2 + 50, 60); p.textSize(12); p.fill(200); p.text("FIRST TO 10", DESIGN_WIDTH / 2, 90); p.textStyle(p.NORMAL); // Reset text style p.pop(); // Dynamic instructions p.fill(255, 255, 0); p.textSize(16); p.textAlign(p.LEFT); p.text(`WASD: Player 1 (${selectedPlayer1.toUpperCase()})`, 10, DESIGN_HEIGHT - 30); p.textAlign(p.RIGHT); const p2Label = vsCpu ? `CPU (${selectedPlayer2.toUpperCase()})` : `Arrows: Player 2 (${selectedPlayer2.toUpperCase()})`; p.text(p2Label, DESIGN_WIDTH - 10, DESIGN_HEIGHT - 30); // Reset Button p.push(); p.rectMode(p.CENTER); p.fill(150, 0, 0); p.stroke(255); p.strokeWeight(2); p.rect(DESIGN_WIDTH / 2, DESIGN_HEIGHT - 25, 100, 30, 5); p.fill(255); p.textAlign(p.CENTER, p.CENTER); p.textSize(16); p.textStyle(p.BOLD); p.text("RESET", DESIGN_WIDTH / 2, DESIGN_HEIGHT - 25); p.pop(); // Lucas Games branding p.fill(255); p.textSize(12); p.textAlign(p.RIGHT, p.BOTTOM); p.text("Lucas Games", DESIGN_WIDTH - 5, DESIGN_HEIGHT - 5); p.pop(); // Update game logic ballX += ballVX; ballY += ballVY; // Ball collision with top/bottom walls (clamping to keep inside) if (ballY < 35) { ballY = 35; ballVY *= -1; } else if (ballY > DESIGN_HEIGHT - 35) { ballY = DESIGN_HEIGHT - 35; ballVY *= -1; } // Ball collision with player 1 if (ballX < 100 && ballX > 40 && Math.abs(ballY - player1Y) < 30) { ballVX = Math.abs(ballVX) + 1; ballVY += (ballY - player1Y) * 0.1; ballX = 100; // Prevent getting stuck inside player } // Ball collision with player 2 if (ballX > DESIGN_WIDTH - 100 && ballX < DESIGN_WIDTH - 40 && Math.abs(ballY - player2Y) < 30) { ballVX = -Math.abs(ballVX) - 1; ballVY += (ballY - player2Y) * 0.1; ballX = DESIGN_WIDTH - 100; // Prevent getting stuck inside player } // Bounce off side walls (outside the goal area) const goalRange = 80; const isInsideGoalY = Math.abs(ballY - DESIGN_HEIGHT / 2) < goalRange; if (ballX < 35 && !isInsideGoalY) { ballX = 35; ballVX *= -1; } else if (ballX > DESIGN_WIDTH - 35 && !isInsideGoalY) { ballX = DESIGN_WIDTH - 35; ballVX *= -1; } // Goal scoring if (ballX < 0 && isInsideGoalY) { score2++; cheerTimer2 = 30; if (score2 >= 10) { gameState = 'gameOver'; } else { resetBall(); } } else if (ballX > DESIGN_WIDTH && isInsideGoalY) { score1++; cheerTimer1 = 30; if (score1 >= 10) { gameState = 'gameOver'; } else { resetBall(); } } // Safety clamp for extreme cases ballX = clamp(ballX, -50, DESIGN_WIDTH + 50); // Update cheer timers if (cheerTimer1 > 0) cheerTimer1--; if (cheerTimer2 > 0) cheerTimer2--; angle += 0.01; }; const resetGame = () => { score1 = 0; score2 = 0; player1Y = DESIGN_HEIGHT / 2 - 50; player2Y = DESIGN_HEIGHT / 2 - 50; gameState = 'characterSelect'; resetBall(); }; const resetBall = () => { ballX = DESIGN_WIDTH / 2; ballY = DESIGN_HEIGHT / 2; let speed = (gameMode === 'Hockey' || gameMode === 'Basketball') ? 10 : 6; ballVX = (Math.random() > 0.5 ? 1 : -1) * (speed / 2 + Math.random() * (speed / 2)); ballVY = (Math.random() - 0.5) * speed; }; const originalRemove = p.remove.bind(p); p.remove = () => { if (typeof teardown === "function") { teardown(); teardown = null; } originalRemove(); }; }; const instance = new window.p5(sketch, "renderDiv"); window.__P5_CLEANUP__ = () => { try { instance.remove(); } catch (error) { console.warn("Failed to remove p5 instance", error); } };

2 Player ping pong🎆

How to Play