Pong Duel: A Real-time Battle

{"name":"Pong Duel: A Real-time Battle","description":"Get ready for a classic showdown in Pong Duel, a simple yet addictive two-player game built with p5.js! Challenge your friends in real-time as you control paddles to bounce the ball back and forth. With easy controls and engaging gameplay, it's the perfect project to sharpen your programming skills while having fun!","photo":null,"view_count":1,"fork_count":0,"expires_at":null,"created_at":"2025-01-10T23:56:52.197381Z","updated_at":"2025-01-10T23:56:52.197384Z","user_id":70,"status":"DELETED","parent_id":null,"id":5470,"user":{"photo":null,"email":"kristen@jippity.pro","recess_id":"0c22a63e-e8fa-453f-a493-d113532a13c2","created_at":"2024-03-23T19:20:56.974481Z","reset_token":"GD2dODEjNUbAH88Yx-1HMTa4uc_OUtvTa0c5D-VKUhw","stripe_customer_id":"cus_RPbovGjLueUufv","seats":200,"username":"kris10","id":70,"password_hash":"$2b$12$abwA8Crfrc22ANEFpZErHeQDLvhr9RJOD0lMNLh7PJGrAn7M//qEC","updated_at":"2024-03-23T19:20:56.974485Z","reset_token_expiry":"2025-01-14T23:32:05.455609","subscription_status":"active"},"code":{"script.js":"// Ably setup\nconst ably = new Ably.Realtime('xHo3Tg.h-HByA:N27fgF_FIOEkbnfCYToauOTcdh-8F2LsehJAwu37DIo');\n\n// Global variables for paddles and ball\nlet leftPaddle;\n\nlet rightPaddle;\n\nlet ball;\n\nlet isHost = false;\n\n// Flag to determine if this player is the host\nlet gameCode;\n\nconst channel = ably.channels.get('pong-duel');\n\nlet gameInitialized = false;\n\nlet gameState = 'start';\n\nlet gameCodeInput;\n\n// Global variable to act as a timer for publishing\nlet lastPublishTime = 0;\n\nfunction setup() {\n createCanvas(800, 600);\n background(135, 206, 235); // Sky blue background\n\n // Create an input field for the game code\n gameCodeInput = createInput('');\n gameCodeInput.position(width / 2 - 100, height / 2 + 20); // Position the input field\n gameCodeInput.size(200); // Set the size of the input field\n gameCodeInput.hide(); // Hide the input field initially\n}\n\nfunction draw() {\n if (gameState === 'start') {\n drawStartScreen(); // Show the start screen\n } else if (gameState === 'host') {\n drawHostScreen(); // Show the host screen with game code and start button\n } else if (gameState === 'game') {\n drawGame(); // Show the game\n }\n}\n\nclass Paddle {\n constructor(x, y, channel, playerId) {\n this.x = x;\n this.y = y;\n this.targetY = y;\n this.oldY = y;\n this.width = 20;\n this.height = 100;\n this.speed = 5;\n this.channel = channel;\n this.playerId = playerId;\n this.updateInterval = 50; // Time between updates in milliseconds\n this.timeSinceLastUpdate = 0;\n }\n\n display() {\n rect(this.x, this.y, this.width, this.height);\n }\n\n move(upKey, downKey) {\n let moved = false;\n\n if ((this.playerId === 'player1' && isHost) || (this.playerId === 'player2' && !isHost)) {\n if (keyIsDown(upKey) && this.y > 0) {\n this.y -= this.speed;\n moved = true;\n } else if (keyIsDown(downKey) && this.y < height - this.height) {\n this.y += this.speed;\n moved = true;\n }\n\n if (millis() - lastPublishTime > this.updateInterval) {\n if (moved) {\n this.channel.publish('paddleMove', { y: this.y, playerId: this.playerId });\n }\n }\n } else {\n // Smoother linear interpolation for guest\n this.timeSinceLastUpdate += deltaTime;\n let lerpFactor = min(this.timeSinceLastUpdate / this.updateInterval, 1);\n this.y = lerp(this.oldY, this.targetY, lerpFactor);\n }\n }\n}\n\nclass Ball {\n constructor() {\n this.x = 400;\n this.y = 300;\n this.radius = 15;\n this.speedX = 4;\n this.speedY = 4;\n this.targetX = 400;\n this.targetY = 300;\n this.oldX = 400;\n this.oldY = 300;\n this.updateInterval = 50; // Time between updates in milliseconds\n this.timeSinceLastUpdate = 0;\n }\n\n display() {\n ellipse(this.x, this.y, this.radius * 2, this.radius * 2);\n }\n\n move() {\n if (isHost) {\n this.x += this.speedX;\n this.y += this.speedY;\n\n // Ball collision with top and bottom walls\n if (this.y - this.radius <= 0 || this.y + this.radius >= height) {\n this.speedY *= -1;\n }\n\n // Improved collision detection with left paddle\n if (this.x - this.radius <= leftPaddle.x + leftPaddle.width &&\n this.x > leftPaddle.x &&\n this.y >= leftPaddle.y && this.y <= leftPaddle.y + leftPaddle.height) {\n this.speedX *= -1;\n this.x = leftPaddle.x + leftPaddle.width + this.radius; // Adjust position to prevent sticking\n }\n\n // Improved collision detection with right paddle\n if (this.x + this.radius >= rightPaddle.x &&\n this.x < rightPaddle.x + rightPaddle.width &&\n this.y >= rightPaddle.y && this.y <= rightPaddle.y + rightPaddle.height) {\n this.speedX *= -1;\n this.x = rightPaddle.x - this.radius; // Adjust position to prevent sticking\n }\n\n // Ball collision with left and right walls\n if (this.x - this.radius <= 0 || this.x + this.radius >= width) {\n // Reset ball to the center\n this.x = width / 2;\n this.y = height / 2;\n this.speedX *= -1; // Change direction\n }\n\n // Publish ball position every 50ms\n if (millis() - lastPublishTime > this.updateInterval) {\n channel.publish('ballMove', { x: this.x, y: this.y });\n lastPublishTime = millis();\n }\n } else {\n // Smoother linear interpolation for guest\n this.timeSinceLastUpdate += deltaTime;\n let lerpFactor = min(this.timeSinceLastUpdate / this.updateInterval, 1);\n this.x = lerp(this.oldX, this.targetX, lerpFactor);\n this.y = lerp(this.oldY, this.targetY, lerpFactor);\n }\n }\n\n updatePosition(data) {\n this.oldX = this.targetX;\n this.oldY = this.targetY;\n this.targetX = data.x;\n this.targetY = data.y;\n this.timeSinceLastUpdate = 0;\n }\n}\n\n// Show join input\nfunction showJoinInput() {\n // Show the input for the game code\n}\n\n// Generate a simple 6-character game code\nfunction generateGameCode() {\n return Math.random().toString(36).substr(2, 6).toUpperCase();\n}\n\n// Host game function\nfunction hostGame() {\n gameCode = generateGameCode(); // Generate a new game code\n console.log(`Game Code: ${gameCode}`); // Log the game code for sharing\n isHost = true; // Set this player as the host\n gameState = 'host'; // Change state to show host controls\n document.getElementById('gameCodeDisplay').innerText = `Game Code: ${gameCode}`; // Display the game code\n document.getElementById('gameCodeDisplay').style.display = 'block'; // Show the game code\n document.getElementById('startGameButton').style.display = 'block'; // Show the start game button\n}\n\n// Draw the host screen\nfunction drawHostScreen() {\n background(135, 206, 235); // Sky blue background\n textAlign(CENTER);\n textSize(32);\n fill(255); // White text\n text(\"Game Code: \" + gameCode, width / 2, height / 2 - 20);\n text(\"Press 'Start Game' to begin!\", width / 2, height / 2 + 20);\n}\n\n// Modify the mousePressed function to handle joining a game\nfunction mousePressed() {\n if (gameState === 'start') {\n if (mouseX > width / 2 - 100 && mouseX < width / 2 + 100 && mouseY > height / 2 - 60 && mouseY < height / 2 - 20) {\n hostGame(); // Call the host game function\n } else if (mouseX > width / 2 - 100 && mouseX < width / 2 + 100 && mouseY > height / 2 + 20 && mouseY < height / 2 + 60) {\n gameCodeInput.show(); // Show the input field for the game code\n gameCodeInput.value(''); // Clear the input field\n gameState = 'join'; // Change state to joining\n }\n } else if (gameState === 'join') {\n joinGame(); // Call the join game function when the input is used\n }\n}\n\n// Join game function\nfunction joinGame() {\n gameCode = gameCodeInput.value(); // Get the value from the input field\n\n // Check if the game code is valid (this is optional)\n if (gameCode) {\n initializeGame(); // Start the game\n gameState = 'game'; // Change state to game\n gameCodeInput.hide();\n } else {\n alert(\"Please enter a valid game code.\"); // Alert if the game code is invalid\n }\n}\n\nfunction drawGame() {\n background(135, 206, 235);\n\n if (leftPaddle && rightPaddle && ball) {\n leftPaddle.display();\n leftPaddle.move(87, 83);\n\n rightPaddle.display();\n rightPaddle.move(87, 83);\n\n ball.display();\n ball.move();\n }\n}\n\nfunction drawStartScreen() {\n if (gameState === 'game') {\n return; // If the game has started, do not draw the start screen\n }\n\n background(135, 206, 235); // Sky blue background\n textAlign(CENTER);\n textSize(48);\n fill(255); // White text\n text(\"Pong Duel\", width / 2, height / 4);\n\n textSize(32);\n text(\"Host Game\", width / 2, height / 2 - 20);\n text(\"Join Game\", width / 2, height / 2 + 40);\n}\n\n// Start game function\nfunction startGame() {\n if (gameCode) { // Ensure game code is valid\n initializeGame(); // Start the game\n document.getElementById('gameCodeDisplay').style.display = 'none'; // Hide the game code display\n document.getElementById('startGameButton').style.display = 'none'; // Hide the start game button\n gameCodeInput.hide(); // Hide the game code input field\n } else {\n alert(\"Game code is invalid. Please try again.\"); // Alert if the game code is invalid\n }\n}\n\nfunction initializeGame() {\n leftPaddle = new Paddle(50, height / 2 - 50, channel, 'player1');\n rightPaddle = new Paddle(width - 70, height / 2 - 50, channel, 'player2');\n ball = new Ball();\n\n channel.subscribe('paddleMove', (message) => {\n if (message.data.playerId === 'player1' && !isHost) {\n leftPaddle.oldY = leftPaddle.targetY;\n leftPaddle.targetY = message.data.y;\n leftPaddle.timeSinceLastUpdate = 0;\n } else if (message.data.playerId === 'player2' && isHost) {\n rightPaddle.oldY = rightPaddle.targetY;\n rightPaddle.targetY = message.data.y;\n rightPaddle.timeSinceLastUpdate = 0;\n }\n });\n\n if (!isHost) {\n channel.subscribe('ballMove', (message) => {\n ball.updatePosition(message.data);\n });\n }\n\n gameState = 'game';\n}\n\n","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n\n \n \n Pong Duel: A Real-time Battle\n \n \n \n\n\n\n \n \n \n\n\n"},"chat_history":[],"assets":[],"messages_sent":58,"comments":[],"steps":[]}