Ping Pong Showdown

{"name":"Ping Pong Showdown [Cato bugfix]","description":"Get ready for an exciting Ping Pong Showdown! Challenge your friends or play against the computer in this fast-paced, addictive game. With vibrant visuals and smooth controls, you'll be hooked in no time!","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/wltoomoc5fqalttvkxk7","view_count":52,"fork_count":0,"expires_at":null,"created_at":"2025-08-06T08:52:39.509231Z","updated_at":"2025-08-06T08:52:39.509232Z","user_id":246,"status":"DELETED","parent_id":2746,"id":2795,"user":{"photo":null,"email":"kristen@recess.gg","recess_id":"c4ad84f6-113d-480b-bc29-80549518b3ee","created_at":"2024-10-31T20:27:47.342142Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"chicothedog","id":246,"password_hash":"$2b$12$QgZsBBZ/7CFyOhVkfVhTNeoe4jAY.pIJOieTXeg0HWS23ZcCpiAeO","updated_at":"2024-10-31T20:27:47.342148Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"// Global variables\nlet paddleLeft, paddleRight, ball, paddleLeftSpeed, paddleRightSpeed;\nlet ballSpeedX, ballSpeedY;\nlet scoreLeft, scoreRight;\nlet gameState;\nlet gameMode;\nlet leftPaddleMessage, rightPaddleMessage;\nlet leftPaddleMessageTime, rightPaddleMessageTime;\n\nconst messages = [\"Ouch!\", \"Ow!\", \"That hurt!\", \"Why'd you hit me?\", \"Stop that!\", \"Just let me win so I don't have pain!\", \"War!\"];\nlet burgerImage, hitSound;\n\nfunction preload() {\n burgerImage = loadImage(\"@asset('burger')\");\n hitSound = loadSound(\"@asset('beatSynthPlusDrums')\");\n}\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(0, 255, 0); // Set the background to green\n\n // Initialize paddles and ball\n initializeGameElements();\n\n // Initialize scores\n scoreLeft = 0;\n scoreRight = 0;\n\n // Initialize game state\n gameState = 'controls'; // Possible states: 'controls', 'start', 'selectMode', 'select1PlayerMode', 'play', 'gameOver'\n gameMode = null; // Possible modes: '1PlayerNoBot', '1PlayerBot', '2Players'\n\n // Initialize paddle messages\n leftPaddleMessage = \"\";\n rightPaddleMessage = \"\";\n\n // Add touch event listeners for mobile controls\n addTouchControls();\n}\n\nfunction draw() {\n background(0, 255, 0); // Set the background to green\n\n switch (gameState) {\n case 'controls':\n drawControlsScreen();\n break;\n case 'start':\n drawStartMenu();\n break;\n case 'selectMode':\n drawModeSelectionMenu();\n break;\n case 'select1PlayerMode':\n draw1PlayerModeSelectionMenu();\n break;\n case 'play':\n playGame();\n break;\n case 'gameOver':\n drawGameOverScreen();\n break;\n }\n\n // Display paddle messages\n displayPaddleMessages();\n}\n\nfunction windowResized() {\n resizeCanvas(windowWidth, windowHeight);\n initializeGameElements();\n}\n\nfunction initializeGameElements() {\n paddleLeft = { x: 222, y: height / 2 - 66.67, width: 13.33, height: 133.33 }; // 3 times smaller\n if (gameMode !== 'Practice') {\n paddleRight = { x: width - 232, y: height / 2 - 66.67, width: 13.33, height: 133.33 }; // 3 times smaller\n }\n ball = { x: width / 2, y: height / 2, diameter: 80 };\n\n paddleLeftSpeed = 0;\n paddleRightSpeed = 0;\n\n ballSpeedX = 5;\n ballSpeedY = 3;\n}\n\nfunction drawControlsScreen() {\n textAlign(CENTER, CENTER);\n textSize(64); // 1.00 times bigger\n fill(0);\n text('Controls', width / 2, height / 2 - 120);\n textSize(48); // 1.00 times bigger\n text('Player 1: W and S to move', width / 2, height / 2 - 40);\n text('Player 2: Up and Down Arrows to move', width / 2, height / 2 + 40);\n text('Press Enter to Continue', width / 2, height / 2 + 120);\n}\n\nfunction drawStartMenu() {\n textAlign(CENTER, CENTER);\n textSize(64); // 1.00 times bigger\n fill(0);\n text('Ping Pong Showdown', width / 2, height / 2 - 80);\n text('Press Enter to Start', width / 2, height / 2);\n}\n\nfunction drawModeSelectionMenu() {\n textAlign(CENTER, CENTER);\n textSize(64); // 1.00 times bigger\n fill(0);\n text('Select Mode', width / 2, height / 2 - 160);\n text('1 Player', width / 2, height / 2 - 80);\n text('2 Players', width / 2, height / 2);\n}\n\nfunction draw1PlayerModeSelectionMenu() {\n textAlign(CENTER, CENTER);\n textSize(64); // 1.00 times bigger\n fill(0);\n text('1 Player Mode', width / 2, height / 2 - 160);\n text('Press B for Bot', width / 2, height / 2 - 80);\n text('Press N for No Bot', width / 2, height / 2);\n text('Press P for Practice', width / 2, height / 2 + 80);\n}\n\nfunction drawGameOverScreen() {\n textAlign(CENTER, CENTER);\n textSize(64); // 1.00 times bigger\n fill(0);\n text('Game Over!', width / 2, height / 2 - 80);\n text(`Player ${scoreLeft >= 5 ? '1' : '2'} Wins!`, width / 2, height / 2);\n text('Press Enter to Restart', width / 2, height / 2 + 80);\n}\n\nfunction playGame() {\n const rightControls = document.querySelector('.right-controls');\n\n if (rightControls) {\n rightControls.style.display = (gameMode === '1PlayerBot' || gameMode === 'Practice') ? 'none' : 'flex';\n }\n\n // Draw the table (background color)\n fill(0, 255, 0); // Green color for the table\n rect(0, 0, width, height);\n\n // Draw the net\n stroke(0); // Black color for the net\n strokeWeight(8); // 4 times thicker\n for (let i = 0; i < height; i += 80) { // 4 times bigger spacing\n line(width / 2, i, width / 2, i + 40); // 4 times bigger lines\n }\n noStroke();\n\n // Display scores\n textSize(64); // 1.00 times bigger\n fill(255);\n text(scoreLeft, width / 4, 50);\n if (gameMode !== 'Practice') {\n text(scoreRight, 3 * width / 4, 50);\n }\n\n // Move paddles\n paddleLeft.y += paddleLeftSpeed;\n\n if (gameMode === '2Players') {\n paddleRight.y += paddleRightSpeed;\n } else if (gameMode === '1PlayerBot') {\n // Simple bot logic: follow the ball's Y position, 70% speed\n const botSpeed = (ball.y - paddleRight.y - paddleRight.height / 2) * 0.7;\n paddleRight.y += botSpeed;\n } else if (gameMode === '1PlayerNoBot' || gameMode === 'Practice') {\n paddleRight.y = paddleLeft.y;\n }\n\n // Constrain paddles within the canvas\n paddleLeft.y = constrain(paddleLeft.y, 0, height - paddleLeft.height);\n if (gameMode !== 'Practice') {\n paddleRight.y = constrain(paddleRight.y, 0, height - paddleRight.height);\n }\n\n // Draw left paddle\n fill(255); // White color for the paddles\n rect(paddleLeft.x, paddleLeft.y, paddleLeft.width, paddleLeft.height);\n\n // Draw right paddle if not in practice mode\n if (gameMode !== 'Practice') {\n rect(paddleRight.x, paddleRight.y, paddleRight.width, paddleRight.height);\n }\n\n // Move the ball\n ball.x += ballSpeedX;\n ball.y += ballSpeedY;\n\n // Bounce the ball off the top and bottom edges\n if (ball.y <= 0 || ball.y >= height) {\n ballSpeedY *= -1;\n }\n\n // Bounce the ball off the paddles with better mechanics\n if (ball.x - ball.diameter / 2 <= paddleLeft.x + paddleLeft.width &&\n ball.x + ball.diameter / 2 > paddleLeft.x && // Ensure ball is in front of the paddle\n ball.y >= paddleLeft.y && ball.y <= paddleLeft.y + paddleLeft.height) {\n ballSpeedX *= -1;\n let hitPos = ball.y - (paddleLeft.y + paddleLeft.height / 2);\n ballSpeedY = hitPos * 0.1; // Adjust the bounce based on where it hits the paddle\n showPaddleMessage('left');\n // Play sound if it's not already playing\n if (!hitSound.isPlaying()) {\n hitSound.play();\n }\n }\n\n if (gameMode !== 'Practice' && ball.x + ball.diameter / 2 >= paddleRight.x &&\n ball.x - ball.diameter / 2 < paddleRight.x + paddleRight.width && // Ensure ball is in front of the paddle\n ball.y >= paddleRight.y && ball.y <= paddleRight.y + paddleRight.height) {\n ballSpeedX *= -1;\n let hitPos = ball.y - (paddleRight.y + paddleRight.height / 2);\n ballSpeedY = hitPos * 0.1; // Adjust the bounce based on where it hits the paddle\n showPaddleMessage('right');\n // Play sound if it's not already playing\n if (!hitSound.isPlaying()) {\n hitSound.play();\n }\n }\n\n // Bounce off the left and right walls in practice mode\n if (gameMode === 'Practice') {\n if (ball.x - ball.diameter / 2 <= 0 || ball.x + ball.diameter / 2 >= width) {\n ballSpeedX *= -1;\n }\n } else {\n // Check for scoring\n if (ball.x < 0) {\n scoreRight++;\n if (scoreRight >= 5) {\n gameState = 'gameOver';\n } else {\n resetBall();\n }\n } else if (ball.x > width) {\n scoreLeft++;\n if (scoreLeft >= 5) {\n gameState = 'gameOver';\n } else {\n resetBall();\n }\n }\n }\n\n // Draw the ball\n image(burgerImage, ball.x - ball.diameter / 2, ball.y - ball.diameter / 2, ball.diameter, ball.diameter);\n}\n\nfunction keyPressed() {\n if (gameState === 'controls' && keyCode === ENTER) {\n gameState = 'start';\n } else if (gameState === 'start' && keyCode === ENTER) {\n gameState = 'selectMode';\n } else if (gameState === 'selectMode') {\n if (key === '1') {\n gameState = 'select1PlayerMode';\n } else if (key === '2') {\n gameMode = '2Players';\n gameState = 'play';\n }\n } else if (gameState === 'select1PlayerMode') {\n if (key === 'B' || key === 'b') {\n gameMode = '1PlayerBot';\n gameState = 'play';\n } else if (key === 'N' || key === 'n') {\n gameMode = '1PlayerNoBot';\n gameState = 'play';\n } else if (key === 'P' || key === 'p') {\n gameMode = 'Practice';\n initializeGameElements(); // Reinitialize game elements for practice mode\n gameState = 'play';\n }\n } else if (gameState === 'gameOver' && keyCode === ENTER) {\n resetGame();\n gameState = 'start';\n } else {\n // Paddle control code\n if (key === 'W' || key === 'w') {\n paddleLeftSpeed = -5;\n if (gameMode === '1PlayerNoBot' || gameMode === 'Practice') paddleRightSpeed = -5;\n } else if (key === 'S' || key === 's') {\n paddleLeftSpeed = 5;\n if (gameMode === '1PlayerNoBot' || gameMode === 'Practice') paddleRightSpeed = 5;\n }\n\n if (keyCode === UP_ARROW) {\n paddleRightSpeed = -5;\n } else if (keyCode === DOWN_ARROW) {\n paddleRightSpeed = 5;\n }\n }\n}\n\nfunction keyReleased() {\n if (key === 'W' || key === 'w' || key === 'S' || key === 's') {\n paddleLeftSpeed = 0;\n if (gameMode === '1PlayerNoBot' || gameMode === 'Practice') paddleRightSpeed = 0;\n }\n\n if (keyCode === UP_ARROW || keyCode === DOWN_ARROW) {\n paddleRightSpeed = 0;\n }\n}\n\nfunction resetBall() {\n ball.x = width / 2;\n ball.y = height / 2;\n ballSpeedX *= -1; // Change direction\n}\n\nfunction resetGame() {\n scoreLeft = 0;\n scoreRight = 0;\n resetBall();\n initializeGameElements();\n}\n\nfunction showPaddleMessage(paddle) {\n const message = messages[Math.floor(Math.random() * messages.length)]; // Randomize message selection\n if (paddle === 'left') {\n leftPaddleMessage = message;\n leftPaddleMessageTime = millis();\n } else if (paddle === 'right') {\n rightPaddleMessage = message;\n rightPaddleMessageTime = millis();\n }\n}\n\nfunction displayPaddleMessages() {\n textSize(40); // 1.00 times bigger\n fill(255, 0, 0);\n if (leftPaddleMessage && millis() - leftPaddleMessageTime < 5000) {\n text(leftPaddleMessage, paddleLeft.x + paddleLeft.width / 2, paddleLeft.y - 20);\n } else {\n leftPaddleMessage = \"\";\n }\n if (rightPaddleMessage && millis() - rightPaddleMessageTime < 5000) {\n text(rightPaddleMessage, paddleRight.x + paddleRight.width / 2, paddleRight.y - 20);\n } else {\n rightPaddleMessage = \"\";\n }\n}\n\nfunction addTouchControls() {\n let touchStartY;\n\n function handleTouchStart(e) {\n touchStartY = e.touches[0].clientY;\n }\n\n function handleTouchMove(e) {\n const touchCurrentY = e.touches[0].clientY;\n const touchDeltaY = touchCurrentY - touchStartY;\n\n // Move left paddle with touch\n if (touchCurrentY < window.innerHeight / 2) {\n paddleLeft.y += touchDeltaY;\n } else if (gameMode !== 'Practice') {\n paddleRight.y += touchDeltaY;\n }\n\n // Constrain paddles within the canvas\n paddleLeft.y = constrain(paddleLeft.y, 0, height - paddleLeft.height);\n if (gameMode !== 'Practice') {\n paddleRight.y = constrain(paddleRight.y, 0, height - paddleRight.height);\n }\n\n touchStartY = touchCurrentY; // Update start position\n }\n\n window.addEventListener('touchstart', handleTouchStart, false);\n window.addEventListener('touchmove', handleTouchMove, false);\n}","style.css":"body {\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n background-color: #f0f0f0;\n}\n\n.canvas {\n border: none;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.controls {\n position: absolute;\n bottom: 20px;\n width: 100%;\n display: flex;\n justify-content: space-between;\n}\n\n.left-controls, .right-controls {\n display: flex;\n flex-direction: column;\n}\n\n.arrow-button {\n width: 60px;\n height: 60px;\n font-size: 24px;\n margin: 5px;\n border: none;\n background-color: #ddd;\n border-radius: 10px;\n cursor: pointer;\n}\n\n.arrow-button:active {\n background-color: #bbb;\n}\n\n.highlighted {\n background-color: #00f; /* Blue color for highlighting */\n color: #fff; /* White text color */\n}","index.html":"\n\n\n\n \n \n Ping Pong Showdown\n \n \n \n\n\n\n \n\n\n"},"chat_history":[{"message":"Let's get started!","project_id":2795,"created_at":"2024-08-19T17:47:19.952710Z","output_tokens":null,"sender":"human","code_id":136812,"deleted":0,"input_tokens":null,"id":66533},{"message":"Awesome! Let's get this Ping Pong Showdown even more exciting! 🚀\n\nHere are some features we can consider adding to your game:\n\n1. **Power-ups**: Add power-ups that appear randomly on the screen and give players temporary advantages (e.g., increased paddle size, speed boost, etc.).\n2. **Different Ball Types**: Introduce different ball types, like a faster ball or a ball that changes direction randomly.\n3. **Sound Effects**: Enhance the game with additional sound effects for scoring, hitting the ball, etc.\n4. **Visual Effects**: Add more visual effects like particle effects when the ball hits the paddle.\n5. **Game Customization**: Allow players to customize their paddles or the ball with different skins or colors.\n\nWhich features would you like to add first? Or do you have any other ideas? Let me know so we can start working on it! 😊","project_id":2795,"created_at":"2024-08-19T17:47:19.963263Z","output_tokens":null,"sender":"ai","code_id":136812,"deleted":0,"input_tokens":null,"id":66534},{"message":"LOG: \n🌸 p5.js says: There's an error due to \"loadSound\" not being defined in the current scope (on line 15 in a1ed1b84-9bca-4862-b734-f78f2ecec056 [blob:https://jippity.pro/a1ed1b84-9bca-4862-b734-f78f2ecec056:15:25]).\n\nIf you have defined it in your code, you should check its scope, spelling, and letter-casing (JavaScript is case-sensitive). For more:\nhttps://p5js.org/examples/data-variable-scope.html\nhttps://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/Not_Defined#What_went_wrong","project_id":2795,"created_at":"2024-08-19T17:47:22.195101Z","output_tokens":null,"sender":"human","code_id":136813,"deleted":0,"input_tokens":null,"id":66535},{"message":"It looks like the `loadSound` function is not available in the current setup. We need to include the p5.sound library to use sound functions. Let's add the necessary script to load the p5.sound library in our HTML file.\n\nHere’s how you can do it:\n\n```html\n\n\n\n\n \n \n Ping Pong Showdown\n \n \n \n\n\n\n \n\n\n\n```\n\nAdd the above line in the `` section of your HTML file. This should resolve the error related to `loadSound`.\n\nPlease update your `index.html` file with the new script tag for the p5.sound library and reload your project. Let me know if this fixes the issue! 😊","project_id":2795,"created_at":"2024-08-19T17:47:22.206706Z","output_tokens":null,"sender":"ai","code_id":136813,"deleted":0,"input_tokens":null,"id":66536},{"message":"only play the sound if it's not already playing","project_id":2795,"created_at":"2024-08-19T17:48:21.264084Z","output_tokens":null,"sender":"human","code_id":136815,"deleted":0,"input_tokens":null,"id":66537},{"message":"Got it! Let's modify the code to play the sound only if it's not already playing. We can do this by checking the `isPlaying()` method of the `p5.SoundFile` object.\n\nReplace the `showPaddleMessage` function with the updated version below:\n\n```javascript\nfunction showPaddleMessage(paddle) {\n const message = messages[Math.floor(Math.random() * messages.length)]; // Randomize message selection\n if (paddle === 'left') {\n leftPaddleMessage = message;\n leftPaddleMessageTime = millis();\n } else if (paddle === 'right') {\n rightPaddleMessage = message;\n rightPaddleMessageTime = millis();\n }\n \n // Play sound if it's not already playing\n if (!hitSound.isPlaying()) {\n hitSound.play();\n }\n}\n```\n\n### Explanation:\n- This function checks if the `hitSound` is currently playing using `!hitSound.isPlaying()`.\n- If the sound is not playing, it triggers the sound with `hitSound.play()`.\n\nReplace the existing `showPaddleMessage` function with this new version in your `script.js` file. This will ensure that the sound only plays if it's not already playing. Let me know if this works! 🎶🏓","project_id":2795,"created_at":"2024-08-19T17:48:21.280277Z","output_tokens":null,"sender":"ai","code_id":136815,"deleted":0,"input_tokens":null,"id":66538}],"assets":[{"project_id":2795,"creator":null,"cloudinary_id":"oytmpwskw5nmqjvj0aqw","deleted":false,"id":18116,"created_at":"2024-08-19T17:47:11.647707Z","name":"french fries","resource_type":"image","tags":null},{"project_id":2795,"creator":null,"cloudinary_id":"wltoomoc5fqalttvkxk7","deleted":false,"id":18115,"created_at":"2024-08-19T17:47:11.646134Z","name":"burger","resource_type":"image","tags":null},{"project_id":2795,"creator":null,"cloudinary_id":"egpgkprdp7dywnymrom3","deleted":false,"id":18114,"created_at":"2024-08-19T17:47:11.644328Z","name":"beatSynthPlusDrums","resource_type":"audio","tags":null}],"messages_sent":3,"comments":[{"content":"use '1' for 1 player mode, '2' for 2 player...\r\n","id":776,"user_id":60,"user":{"photo":null,"email":"jacob@jippity.pro","recess_id":null,"created_at":"2024-02-26T18:31:54.473216Z","reset_token":null,"stripe_customer_id":"","seats":0,"username":"2718281828459045","id":60,"password_hash":"$2b$12$zEc2Nk3NuEIey0tN8BTEpekwqcs7hFwP1S2ydddottz1.zfwoTfFa","updated_at":"2024-02-26T18:31:54.473218Z","reset_token_expiry":null,"subscription_status":null},"project_id":2795,"created_at":"2024-08-19T17:55:09.893832Z","updated_at":"2024-08-19T17:55:09.893838Z"},{"content":"in the singleplayer bot version you cannot win because the y level of the paddle is the y level of the ball","id":788,"user_id":58,"user":{"photo":null,"email":null,"recess_id":"220907e8-9fd0-2b24-59d6-6ec3b554eb5b","created_at":"2024-02-22T20:13:06.442589Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"perychuk","id":58,"password_hash":null,"updated_at":"2024-02-22T20:13:06.442598Z","reset_token_expiry":null,"subscription_status":null},"project_id":2795,"created_at":"2024-08-20T17:31:15.812551Z","updated_at":"2024-08-20T17:31:15.812553Z"},{"content":"OH MY GOD THE BALL IS STUCK!!!!!!!!!!!!\r\n","id":799,"user_id":68,"user":{"photo":null,"email":null,"recess_id":"00c84971-32ba-42fb-916f-bc850511082b","created_at":"2024-03-18T20:10:05.035372Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"red_jellyfish_343","id":68,"password_hash":null,"updated_at":"2024-03-18T20:10:05.035375Z","reset_token_expiry":null,"subscription_status":null},"project_id":2795,"created_at":"2024-08-21T17:39:21.868902Z","updated_at":"2024-08-21T17:39:21.868903Z"},{"content":"How do you beat the bot!?!?!\r\n","id":800,"user_id":68,"user":{"photo":null,"email":null,"recess_id":"00c84971-32ba-42fb-916f-bc850511082b","created_at":"2024-03-18T20:10:05.035372Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"red_jellyfish_343","id":68,"password_hash":null,"updated_at":"2024-03-18T20:10:05.035375Z","reset_token_expiry":null,"subscription_status":null},"project_id":2795,"created_at":"2024-08-21T17:40:18.293240Z","updated_at":"2024-08-21T17:40:18.293242Z"},{"content":"nah i win\n","id":1040,"user_id":212,"user":{"photo":null,"email":null,"recess_id":"cbf33666-c055-4c6b-8a2b-d4b5307dd86b","created_at":"2024-09-23T19:57:26.098025Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"gamerboy121417","id":212,"password_hash":null,"updated_at":"2024-09-23T19:57:26.098028Z","reset_token_expiry":null,"subscription_status":null},"project_id":2795,"created_at":"2025-02-10T18:11:14.281244Z","updated_at":"2025-02-10T18:11:14.281245Z"}],"steps":[]}