Paddle Size and Ball Speed Pong

{"name":"Paddle Size and Ball Speed Pong","description":"Experience the classic game of Pong with an exciting twist! Test your reflexes and adaptability as you face changing paddle sizes and varying ball speeds. Can you keep up with the challenge?","photo":null,"view_count":2,"fork_count":0,"expires_at":null,"created_at":"2024-05-14T19:12:58.574014Z","updated_at":"2024-05-14T19:12:58.574016Z","user_id":5,"status":"PUBLIC","parent_id":1255,"id":1430,"user":{"photo":null,"email":null,"recess_id":"b5574579-4904-b775-ad8e-eff5c085f819","created_at":"2023-12-12T12:00:51.087995Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"theop","id":5,"password_hash":null,"updated_at":"2023-12-12T12:00:51.087997Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let leftPaddle;\nlet rightPaddle;\nlet ball;\nlet paddleWidth = 10;\nlet paddleHeight = 60;\nlet ballSize = 20;\nlet movingUp = false;\nlet movingDown = false;\nlet movingW = false;\nlet movingS = false;\nlet ballStarted = false;\nlet displayMessageText = '';\nlet messageVisible = false;\nlet messageTimer = 0;\nconst messageDuration = 60; // Duration in frames (e.g., 180 frames at 60 FPS is 3 seconds)\nlet powerUp;\nlet lastPaddleHit = null; // Tracks the last paddle that hit the ball\nlet settings = {\n ballMaxSpeed: 10,\n ballMinSpeed: 3,\n paddleSpeed: 10,\n paddleWidth: 10,\n paddleHeight: 60,\n ballSize: 20,\n powerUpSpawnRate: 1 / 1200, // Example: a 1 in 1200 chance per frame\n};\n\nfunction initializeGame() {\n // Reinitialize game elements\n leftPaddle = new Paddle(30, height / 2 - settings.paddleHeight / 2, settings.paddleWidth, settings.paddleHeight);\n rightPaddle = new Paddle(width - 30 - settings.paddleWidth, height / 2 - settings.paddleHeight / 2, settings.paddleWidth, settings.paddleHeight);\n ball = new Ball(width / 2, height / 2, settings.ballSize, 0, 0);\n ballStarted = false; // Ensure the ball doesn't move immediately\n powerUp = new PowerUp();\n powerUp.active = false; // Start with the power-up inactive\n\n // Reset game state variables\n lastPaddleHit = null; // Reset the last paddle that hit the ball\n displayMessageText = ''; // Clear any displayed message\n messageVisible = false; // Hide message display\n messageTimer = 0; // Reset message timer\n\n // Optionally reset other state variables here, such as scores or game-specific flags\n}\n\nfunction updateSettings() {\n settings.ballMaxSpeed = parseInt(document.getElementById('ballMaxSpeed').value);\n settings.ballMinSpeed = parseInt(document.getElementById('ballMinSpeed').value);\n settings.paddleSpeed = parseInt(document.getElementById('paddleSpeed').value);\n settings.paddleWidth = parseInt(document.getElementById('paddleWidth').value);\n settings.paddleHeight = parseInt(document.getElementById('paddleHeight').value);\n settings.ballSize = parseInt(document.getElementById('ballSize').value);\n settings.powerUpSpawnRate = parseFloat(document.getElementById('powerUpSpawnRate').value);\n\n initializeGame(); // Restart the game with new settings\n}\n\nfunction setup() {\n createCanvas(800, 400);\n initializeGame();\n}\n\n\n\nfunction draw() {\n background(220);\n fill(255); // Reset fill color to white before drawing shapes\n\n leftPaddle.display();\n rightPaddle.display();\n ball.display();\n ball.move();\n ball.checkPaddleCollision(leftPaddle);\n ball.checkPaddleCollision(rightPaddle);\n\n if (movingUp) {\n rightPaddle.move(-10);\n }\n if (movingDown) {\n rightPaddle.move(10);\n }\n if (movingW) {\n leftPaddle.move(-10);\n }\n if (movingS) {\n leftPaddle.move(10);\n }\n\n if (messageVisible && messageTimer > 0) {\n fill(255, 0, 0); // Set text color to red only for the message\n textAlign(CENTER); // Align text to center\n textSize(20); // Set text size\n text(displayMessageText, width / 2, height / 4); // Display the message in the center-top part of the canvas\n messageTimer--; // Decrease the timer\n fill(255); // Reset fill color to white after displaying the message\n }\n\n powerUp.display();\n\n // Randomly respawn the power-up\n if (!powerUp.active) {\n if (random(1) < settings.powerUpSpawnRate) {\n powerUp.respawn();\n }\n }\n}\n\nfunction displayMessage(message) {\n displayMessageText = message;\n messageVisible = true;\n messageTimer = messageDuration;\n}\n\nclass Paddle {\n constructor(x, y, width, height) {\n this.x = x;\n this.y = y;\n this.width = width;\n this.height = height;\n }\n\n display() {\n rect(this.x, this.y, this.width, this.height);\n }\n}\n\n\nclass Ball {\n constructor(x, y, diameter, xspeed, yspeed) {\n this.x = x;\n this.y = y;\n this.diameter = diameter;\n this.xspeed = xspeed;\n this.yspeed = yspeed;\n }\n\n display() {\n ellipse(this.x, this.y, this.diameter, this.diameter);\n }\n\n move() {\n if (this.xspeed === 0 && this.yspeed === 0) return; // Keeps the ball still if it hasn't started moving yet\n this.x += this.xspeed;\n this.y += this.yspeed;\n\n // Bounce off top and bottom\n if (this.y <= 0 || this.y >= height) {\n this.yspeed *= -1;\n }\n }\n\n\n}\n\nBall.prototype.startMoving = function () {\n let horizontalSpeed = random(settings.ballMinSpeed, settings.ballMaxSpeed);\n let verticalSpeed = random(settings.ballMinSpeed, settings.ballMaxSpeed);\n this.xspeed = random() > 0.5 ? horizontalSpeed : -horizontalSpeed;\n this.yspeed = random() > 0.5 ? verticalSpeed : -verticalSpeed;\n};\n\nBall.prototype.checkPaddleCollision = function (paddle) {\n if (this.x - this.diameter / 2 <= paddle.x + paddle.width && this.x + this.diameter / 2 >= paddle.x && this.y + this.diameter / 2 >= paddle.y && this.y - this.diameter / 2 <= paddle.y + paddle.height) {\n this.xspeed *= -1.5; // Increase horizontal speed by 10%\n this.yspeed *= 1.5; // Increase vertical speed by 10%, adjust multiplier as needed for game balance\n\n // Optional: Adjust the ball's yspeed based on where it hits the paddle\n }\n // If collision is detected\n lastPaddleHit = paddle; // Update lastPaddleHit to the current paddle\n};\n\nBall.prototype.move = function () {\n if (this.xspeed === 0 && this.yspeed === 0) return; // Keeps the ball still if it hasn't started moving yet\n this.x += this.xspeed;\n this.y += this.yspeed;\n\n // Bounce off top and bottom\n if (this.y <= 0 || this.y >= height) {\n this.yspeed *= -1;\n }\n\n // Check for left or right screen edge collision\n if (this.x <= 0 || this.x >= width) {\n this.respawn();\n }\n // Check for power-up collision\n if (powerUp.active && powerUp.checkCollision(this)) {\n if (lastPaddleHit === leftPaddle) {\n leftPaddle.changeHeight(leftPaddle.height + 10);\n rightPaddle.changeHeight(Math.max(10, rightPaddle.height - 10)); // Ensure paddle height doesn't become 0 or negative\n } else if (lastPaddleHit === rightPaddle) {\n rightPaddle.changeHeight(rightPaddle.height + 10);\n leftPaddle.changeHeight(Math.max(10, leftPaddle.height - 10));\n }\n displayMessage(\"Power-Up Activated!\");\n }\n};\n\nBall.prototype.respawn = function () {\n // Resets the ball's position to the middle of the screen\n this.x = width / 2;\n this.y = height / 2;\n\n // Randomly decide the ball's horizontal and vertical directions\n let horizontalDirection = random() > 0.5 ? 1 : -1;\n let verticalDirection = random() > 0.5 ? 1 : -1;\n\n // Reset the ball's speed to the minimum values from settings and apply random direction\n this.xspeed = settings.ballMinSpeed * horizontalDirection;\n this.yspeed = settings.ballMinSpeed * verticalDirection;\n\n // Optionally reset paddle heights, if that's part of your game logic\n let newPaddleHeight = random(40, 80); // This could also be adjusted or removed based on your game design\n leftPaddle.changeHeight(newPaddleHeight);\n rightPaddle.changeHeight(newPaddleHeight);\n\n // Optionally, display a message about the ball speed change\n displayMessage(\"Ball Speed back to normal! and paddle size changed\");\n};\n\nfunction keyPressed() {\n if (!ballStarted) {\n ball.startMoving();\n ballStarted = true;\n }\n\n if (keyCode === UP_ARROW) {\n movingUp = true;\n } else if (keyCode === DOWN_ARROW) {\n movingDown = true;\n }\n\n if (key === 'w') {\n movingW = true;\n } else if (key === 's') {\n movingS = true;\n }\n}\n\nfunction keyReleased() {\n if (keyCode === UP_ARROW) {\n movingUp = false;\n } else if (keyCode === DOWN_ARROW) {\n movingDown = false;\n }\n\n if (key === 'w') {\n movingW = false;\n } else if (key === 's') {\n movingS = false;\n }\n}\n\nPaddle.prototype.move = function (step) {\n let newY = this.y + step;\n if (newY < 0) {\n newY = 0;\n } else if (newY + this.height > height) {\n newY = height - this.height;\n }\n this.y = newY;\n};\n\nPaddle.prototype.changeHeight = function (newHeight) {\n this.height = newHeight;\n};\n\nclass PowerUp {\n constructor() {\n this.x = width / 2;\n this.y = height / 2;\n this.size = 25;\n this.active = true;\n }\n\n display() {\n if (this.active) {\n fill(0, 255, 0); // Green color for visibility\n ellipse(this.x, this.y, this.size, this.size);\n }\n }\n\n checkCollision(ball) {\n let d = dist(this.x, this.y, ball.x, ball.y);\n if (d < this.size / 2 + ball.diameter / 2) {\n this.active = false; // Deactivate the power-up\n return true;\n }\n return false;\n }\n\n respawn() {\n this.x = random(50, width - 50); // Avoid spawning too close to edges\n this.y = random(50, height - 50);\n this.active = true;\n }\n}","style.css":"#settings {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 10px;\r\n padding: 10px;\r\n font-size: 14px;\r\n}\r\n\r\n.setting {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.setting label {\r\n font-size: 12px;\r\n margin-bottom: 5px;\r\n}\r\n\r\n.setting input {\r\n font-size: 12px;\r\n padding: 5px;\r\n}\r\n\r\n#settings button {\r\n grid-column: span 2;\r\n padding: 5px 10px;\r\n font-size: 14px;\r\n cursor: pointer;\r\n}","index.html":"\n\n\n\n \n \n Paddle Size and Ball Speed Pong\n \n\n\n\n \n \n\n\n\n

\n Max Ball Speed:\n \n

\n Min Ball Speed:\n \n

\n Paddle Speed:\n \n

\n Paddle Width:\n \n

\n Paddle Height:\n \n

\n Ball Size:\n \n

\n Power-Up Rate:\n \n

\n \n

"},"chat_history":[],"assets":[],"messages_sent":0,"comments":[{"content":"stealer!!!!!!!!!!!!!","id":602,"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":1430,"created_at":"2024-05-14T19:13:43.874994Z","updated_at":"2024-05-14T19:13:43.874995Z"},{"content":"grrr","id":603,"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":1430,"created_at":"2024-05-14T19:13:48.952659Z","updated_at":"2024-05-14T19:13:48.952660Z"}],"steps":[{"instruction":"Implement different paddle sizes that change the gameplay dynamics","title":"Add variable paddle sizes","created_at":"2024-04-22T20:52:29.498224","project_id":1430,"complete":true,"step_number":0,"updated_at":"2024-05-14T19:12:58.577065","id":7765},{"instruction":"Integrate varying ball speeds to add challenge and excitement","title":"Incorporate variable ball speeds","created_at":"2024-04-22T20:52:29.498316","project_id":1430,"complete":true,"step_number":1,"updated_at":"2024-05-14T19:12:58.577158","id":7766},{"instruction":"Allow the paddle size to change gradually over time or as a power-up","title":"Implement gradual paddle size changes","created_at":"2024-04-22T20:52:29.498363","project_id":1430,"complete":true,"step_number":2,"updated_at":"2024-05-14T19:12:58.577203","id":7767},{"instruction":"Enable the ball speed to increase gradually, providing a progressive challenge","title":"Introduce gradual ball speed changes","created_at":"2024-04-22T20:52:29.498407","project_id":1430,"complete":true,"step_number":3,"updated_at":"2024-05-14T19:12:58.577243","id":7768},{"instruction":"Allow the paddle size to change instantly, adding unexpected twists to the game","title":"Create instant paddle size changes","created_at":"2024-04-22T20:52:29.498449","project_id":1430,"complete":true,"step_number":4,"updated_at":"2024-05-14T19:12:58.577281","id":7769},{"instruction":"Display visual cues to indicate when paddle sizes and ball speeds change","title":"Add visual indicators for paddle size and ball speed changes","created_at":"2024-04-22T20:52:29.498499","project_id":1430,"complete":true,"step_number":5,"updated_at":"2024-05-14T19:12:58.577317","id":7770},{"instruction":"Provide settings to allow players to adjust the frequency and intensity of paddle size and ball speed changes","title":"Integrate customizable gameplay options","created_at":"2024-04-22T20:52:29.498541","project_id":1430,"complete":false,"step_number":6,"updated_at":"2024-05-14T19:12:58.577354","id":7771}]}