Brick Buster Blitz

{"name":"Brick Buster Blitz","description":"Smash through a wall of bricks in this simple and addictive brick-breaking game! No levels, no power-ups, just pure brick-busting fun.","photo":null,"view_count":2,"fork_count":0,"expires_at":null,"created_at":"2024-02-17T22:14:10.150794Z","updated_at":"2024-02-17T22:14:10.150794Z","user_id":2,"status":"PRIVATE","parent_id":null,"id":671,"user":{"username":"gamerc0der","id":2,"password_hash":null,"updated_at":"2023-12-11T22:13:50.357943Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":null,"recess_id":"a75a82d5-5ae6-41b7-d20f-788415be036d","created_at":"2023-12-11T22:13:50.357940Z","reset_token":null,"stripe_customer_id":null,"seats":null},"code":{"script.js":"let paddle, ball, bricks;\nlet brickWidth = 80;\nlet brickHeight = 30;\nclass Paddle {\n constructor() {\n this.width = 200;\n this.height = 20;\n this.x = (width - this.width) / 2;\n this.y = height - this.height - 10;\n this.speed = 16;\n this.direction = 0;\n }\n\n display() {\n rect(this.x, this.y, this.width, this.height);\n }\n\n move() {\n this.x += this.direction * this.speed;\n\n // Prevent the paddle from moving off the screen\n if (this.x < 0) {\n this.x = 0;\n } else if (this.x + this.width > width) {\n this.x = width - this.width;\n }\n }\n}\nclass Ball {\n constructor(paddle) {\n this.radius = 10;\n this.x = paddle.x + paddle.width / 2;\n this.y = paddle.y - this.radius;\n this.speed = 5;\n this.direction = createVector(1, -1);\n }\n hitPaddle(paddle) {\n let paddleTop = paddle.y;\n let ballBottom = this.y + this.radius;\n let ballTop = this.y - this.radius;\n let ballLeft = this.x - this.radius;\n let ballRight = this.x + this.radius;\n let paddleLeft = paddle.x;\n let paddleRight = paddle.x + paddle.width;\n\n if (ballBottom >= paddleTop) { // Below the top of paddle\n if (ballTop <= paddleTop) { // Above the bottom of paddle\n if (ballRight >= paddleLeft && ballLeft <= paddleRight) { // Between the left and right of paddle\n return true;\n }\n }\n }\n return false;\n }\n hit(brick) {\n let distance = dist(this.x, this.y, brick.x + brick.width / 2, brick.y + brick.height / 2);\n return distance < this.radius + brick.width / 2;\n }\n display() {\n ellipse(this.x, this.y, this.radius * 2);\n }\n\n move() {\n this.x += this.direction.x * this.speed;\n this.y += this.direction.y * this.speed;\n\n // Make the ball bounce off the walls\n if (this.x < 0 || this.x > width) {\n this.direction.x *= -1;\n }\n if (this.y < 0) {\n this.direction.y *= -1;\n }\n if (this.hitPaddle(paddle)) {\n this.direction.y *= -1;\n }\n if (this.y + this.radius > height) {\n document.getElementById('gameOver').style.display = 'block';\n window.location.replace(\"https://www.jippity.pro/670\")\n\n noLoop();\n }\n for (let i = bricks.bricks.length - 1; i >= 0; i--) {\n if (this.hit(bricks.bricks[i])) {\n this.direction.y *= -1;\n bricks.bricks.splice(i, 1);\n break;\n }\n }\n }\n}\n\nclass Brick {\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}\nclass Bricks {\n constructor(brickWidth, brickHeight) {\n this.bricks = [];\n for (let i = 0; i < 10; i++) {\n for (let j = 0; j < 2; j++) { // Changed from 5 to 2 rows\n let x = i * brickWidth;\n let y = j * brickHeight;\n this.bricks.push(new Brick(x, y, brickWidth, brickHeight));\n }\n }\n }\n\n display() {\n for (let brick of this.bricks) {\n brick.display();\n }\n }\n}\nlet startTime, timeLimit = 10;\n\nfunction setup() {\n createCanvas(800, 600);\n background(220);\n paddle = new Paddle();\n ball = new Ball(paddle);\n bricks = new Bricks(brickWidth, brickHeight);\n startTime = millis();\n}\n\nfunction draw() {\n background(220);\n paddle.display();\n paddle.move();\n ball.display();\n ball.move();\n bricks.display();\n\n // Check for win condition\n if (bricks.bricks.length < 1) {\n noLoop(); // Stops the draw loop\n window.location.replace(\"https://www.jippity.pro/645\"); // Redirects to the specified URL\n return;\n }\n}\nfunction keyPressed() {\n if (keyCode === LEFT_ARROW) {\n paddle.direction = -1;\n } else if (keyCode === RIGHT_ARROW) {\n paddle.direction = 1;\n }\n}\n\nfunction keyReleased() {\n paddle.direction = 0;\n}","style.css":"","index.html":"\n\n\n\n \n \n Brick Buster Blitz\n \n \n\n\n\n \n\n\n\n\n

Game Over!

"},"chat_history":[{"deleted":0,"code_id":41337,"input_tokens":null,"id":23224,"project_id":671,"sender":"human","message":"this is 1% of the css i need","created_at":"2024-02-17T22:29:23.609077Z","output_tokens":null},{"deleted":0,"code_id":41337,"input_tokens":null,"id":23225,"project_id":671,"sender":"ai","message":"Sure, let's work on improving the CSS for your game. We can add some styles to make the game canvas and elements more appealing.\n\n```css\nbody {\n background: #202020;\n color: #fff;\n font-family: 'Arial', sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n -webkit-background-size: cover;\n -moz-background-size: cover;\n -o-background-size: cover;\n background-size: cover;\n}\n\ncanvas {\n border: 1px solid #fff;\n background: rgba(255, 255, 255, 0.3);\n}\n\n#timer {\n position: absolute;\n top: 20px;\n left: 20px;\n font-size: 24px;\n color: #FFF;\n background: rgba(0, 0, 0, 0.6);\n padding: 10px;\n border-radius: 5px;\n border: 2px solid #FFF;\n}\n\n#gameOver {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 72px;\n color: red;\n text-shadow: 2px 2px 4px #000000;\n border: 5px solid white;\n padding: 20px;\n background: rgba(0, 0, 0, 0.7);\n border-radius: 15px;\n display: none;\n}\n```\n\nHere's how the CSS works:\n\n- The `body` is styled to have a dark background with white text. It's also set to fill the height of the viewport and center its children both horizontally and vertically.\n- The `canvas` is given a white border and a semi-transparent white background.\n- The `#timer` is positioned absolutely at the top left of the screen. It's styled with a larger font size, a semi-transparent black background, and a white border.\n- The `#gameOver` is positioned absolutely at the center of the screen. It's styled with a large font size, red color, and a white border. It also has a semi-transparent black background. By default, it's not displayed (`display: none`).","created_at":"2024-02-17T22:29:23.614067Z","output_tokens":null},{"deleted":0,"code_id":41418,"input_tokens":null,"id":23274,"project_id":671,"sender":"human","message":"better css","created_at":"2024-02-17T22:57:37.335880Z","output_tokens":null},{"deleted":0,"code_id":41418,"input_tokens":null,"id":23275,"project_id":671,"sender":"ai","message":"Of course, let's enhance the CSS for your game even further. We can add some styles to make the game elements more visually appealing.\n\n```css\nbody {\n background: #202020;\n color: #fff;\n font-family: 'Arial', sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n background-size: cover;\n}\n\ncanvas {\n border: 3px solid #fff;\n background: rgba(255, 255, 255, 0.3);\n box-shadow: 0px 0px 10px 3px rgba(255,255,255,0.5);\n}\n\n#timer {\n position: absolute;\n top: 20px;\n left: 20px;\n font-size: 24px;\n color: #FFF;\n background: rgba(0, 0, 0, 0.6);\n padding: 10px;\n border-radius: 5px;\n border: 2px solid #FFF;\n box-shadow: 0px 0px 10px 3px rgba(255,255,255,0.5);\n}\n\n#gameOver {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 72px;\n color: red;\n text-shadow: 2px 2px 4px #000000;\n border: 5px solid white;\n padding: 20px;\n background: rgba(0, 0, 0, 0.7);\n border-radius: 15px;\n display: none;\n box-shadow: 0px 0px 20px 3px rgba(255,255,255,0.5);\n}\n```\n\nHere's how the updated CSS works:\n\n- The `canvas` now has a thicker white border and a box shadow that gives it a glowing effect.\n- The `#timer` also has a box shadow, giving it a glowing effect to match the canvas.\n- The `#gameOver` now has a box shadow that gives it a glowing effect to match the rest of the elements.","created_at":"2024-02-17T22:57:37.341290Z","output_tokens":null},{"deleted":0,"code_id":43220,"input_tokens":null,"id":24196,"project_id":671,"sender":"human","message":"spawn less bricks only two rows","created_at":"2024-02-21T03:14:23.254121Z","output_tokens":null},{"deleted":0,"code_id":43220,"input_tokens":null,"id":24197,"project_id":671,"sender":"ai","message":"To modify the number of rows in the brick layout, you'll need to adjust the loop that generates the bricks in the `Bricks` class constructor. Let's adjust it to create only two rows of bricks.\n\n```javascript\nclass Bricks {\n constructor(brickWidth, brickHeight) {\n this.bricks = [];\n for (let i = 0; i < 10; i++) {\n for (let j = 0; j < 2; j++) { // Changed from 5 to 2 rows\n let x = i * brickWidth;\n let y = j * brickHeight;\n this.bricks.push(new Brick(x, y, brickWidth, brickHeight));\n }\n }\n }\n\n display() {\n for (let brick of this.bricks) {\n brick.display();\n }\n }\n}\n```\n\nHere's what changes were made:\n\n- Updated the second for loop in the `Bricks` constructor to iterate only twice, creating two rows of bricks instead of five.\n- This means the `j` loop will run from `0` to `1` (inclusive), effectively limiting the number of rows to two.\n- No other changes are needed since the rest of the logic for displaying and interacting with bricks remains the same.","created_at":"2024-02-21T03:14:23.260766Z","output_tokens":null},{"deleted":0,"code_id":43233,"input_tokens":null,"id":24198,"project_id":671,"sender":"human","message":"make the paddle biggger","created_at":"2024-02-21T03:18:33.004928Z","output_tokens":null},{"deleted":0,"code_id":43233,"input_tokens":null,"id":24199,"project_id":671,"sender":"ai","message":"To make the paddle bigger, you'll need to adjust the `width` property of the `Paddle` class. Let's increase the paddle width from 150 to 200.\n\n```javascript\nclass Paddle {\n constructor() {\n this.width = 200; // Changed from 150 to 200\n this.height = 20;\n this.x = (width - this.width) / 2;\n this.y = height - this.height - 10;\n this.speed = 16;\n this.direction = 0;\n }\n\n display() {\n rect(this.x, this.y, this.width, this.height);\n }\n\n move() {\n this.x += this.direction * this.speed;\n\n if (this.x < 0) {\n this.x = 0;\n } else if (this.x + this.width > width) {\n this.x = width - this.width;\n }\n }\n}\n```\n\nHere's what this change does:\n\n- Increases the `width` of the paddle from 150 to 200. This makes the paddle wider, giving the player a larger surface to hit the ball.\n- The `x` position of the paddle is recalculated in the constructor to ensure it starts centered on the screen, despite its increased size.\n- The `move` method remains unchanged but is included for context. The logic within ensures the paddle doesn't move beyond the canvas boundaries.","created_at":"2024-02-21T03:18:33.011576Z","output_tokens":null},{"deleted":0,"code_id":43236,"input_tokens":null,"id":24200,"project_id":671,"sender":"human","message":"add a win condition ifi bricks under 1","created_at":"2024-02-21T03:20:24.195438Z","output_tokens":null},{"deleted":0,"code_id":43236,"input_tokens":null,"id":24201,"project_id":671,"sender":"ai","message":"To add a win condition to your game, you can check the length of the `bricks.bricks` array within the `draw()` function. If the length of this array drops below 1, it means all bricks have been destroyed, and the player wins. Let's implement this:\n\n```javascript\nfunction draw() {\n background(220);\n paddle.display();\n paddle.move();\n ball.display();\n ball.move();\n bricks.display();\n\n // Check for win condition\n if (bricks.bricks.length < 1) {\n noLoop(); // Stops the draw loop\n document.getElementById('gameOver').innerText = 'You Win!';\n document.getElementById('gameOver').style.display = 'block';\n }\n}\n```\n\nHere's what this change does:\n\n- In the `draw()` function, after displaying and updating the positions of the paddle, ball, and bricks, it checks if the number of bricks is less than 1.\n- If the number of bricks is less than 1, it stops the p5.js draw loop with `noLoop()`. This stops the game from running.\n- It then updates the text of the `#gameOver` div to \"You Win!\" and makes this div visible by changing its `display` style property to 'block'. This will show a message to the player that they have won the game.","created_at":"2024-02-21T03:20:24.200525Z","output_tokens":null},{"deleted":0,"code_id":43237,"input_tokens":null,"id":24202,"project_id":671,"sender":"human","message":"r","created_at":"2024-02-21T03:20:42.381314Z","output_tokens":null},{"deleted":0,"code_id":43237,"input_tokens":null,"id":24203,"project_id":671,"sender":"ai","message":"","created_at":"2024-02-21T03:20:42.387746Z","output_tokens":null},{"deleted":0,"code_id":43238,"input_tokens":null,"id":24204,"project_id":671,"sender":"human","message":"do noloop and redirect to url","created_at":"2024-02-21T03:20:47.070032Z","output_tokens":null},{"deleted":0,"code_id":43238,"input_tokens":null,"id":24205,"project_id":671,"sender":"ai","message":"To implement a redirect alongside the `noLoop()` function when a win condition is met, you'll need to adjust the `draw()` function to check for the win condition (when the number of bricks falls below 1), stop the game loop using `noLoop()`, and then redirect the user to a specified URL. Here's how you can do it:\n\n```javascript\nfunction draw() {\n background(220);\n paddle.display();\n paddle.move();\n ball.display();\n ball.move();\n bricks.display();\n\n // Check for win condition\n if (bricks.bricks.length < 1) {\n noLoop(); // Stops the draw loop\n window.location.href = \"https://www.example.com\"; // Redirects to the specified URL\n }\n}\n```\n\nHere's what's happening in the updated `draw()` function:\n\n- The game elements (paddle, ball, bricks) are displayed and updated as before.\n- After updating the game elements, it checks if the length of the `bricks.bricks` array is less than 1, indicating all bricks have been destroyed.\n- If all bricks are destroyed, `noLoop()` is called to stop the draw loop and freeze the game, effectively ending it.\n- Immediately after stopping the game, `window.location.href` is set to the desired URL (replace `\"https://www.example.com\"` with your actual target URL), which redirects the user to that page.","created_at":"2024-02-21T03:20:47.075303Z","output_tokens":null}],"assets":[],"messages_sent":26,"comments":[],"steps":[{"title":"code breakout","step_number":0,"complete":false,"updated_at":"2024-02-17T22:14:10.155626","id":3605,"instruction":"","created_at":"2024-02-17T22:14:10.155624","project_id":671}]}