Asteroid Adventure

{"name":"Asteroid Adventure","description":"Dodge the asteroids and blast them into space dust in this exciting asteroid adventure game!","photo":null,"view_count":9,"fork_count":0,"expires_at":null,"created_at":"2024-02-17T22:35:21.875473Z","updated_at":"2024-02-17T22:35:21.875473Z","user_id":2,"status":"PRIVATE","parent_id":null,"id":672,"user":{"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,"username":"gamerc0der","id":2,"password_hash":null,"updated_at":"2023-12-11T22:13:50.357943Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"function Player() {\n this.x = width / 2;\n this.y = height - 20;\n this.speed = 5;\n this.show = function () {\n push();\n translate(this.x, this.y);\n let angle = atan2(mouseY - this.y, mouseX - this.x);\n rotate(angle);\n rect(0, 0, 20, 20);\n pop();\n }\n\n this.move = function (dirX, dirY) {\n this.x += dirX * this.speed;\n this.y += dirY * this.speed;\n }\n}\nlet score = 0;\nfunction Bullet(x, y) {\n this.x = x;\n this.y = y;\n this.speed = 5;\n let angle = atan2(mouseY - this.y, mouseX - this.x);\n this.dirX = cos(angle);\n this.dirY = sin(angle);\n\n this.show = function () {\n fill(255, 0, 0);\n ellipse(this.x, this.y, 8, 8);\n }\n\n this.move = function () {\n this.x += this.dirX * this.speed;\n this.y += this.dirY * this.speed;\n }\n}\nlet bullets = [];\nlet player;\nfunction setup() {\n createCanvas(800, 600);\n background(0);\n player = new Player();\n\n for (let i = 0; i < 10; i++) {\n let asteroid = new Asteroid(); // call the constructor without arguments\n asteroids.push(asteroid);\n }\n let exitButton = select('#exit-button');\n exitButton.mouseClicked(exitGame);\n\n}\nfunction exitGame() {\n window.location.href = \"https://www.jippity.pro/670\";\n}\nfunction Asteroid() {\n this.x = arguments[0] || random(width);\n this.y = arguments[1] || random(-height, -20);\n this.size = arguments[2] || random(10, 100);\n this.speed = random(1, 3);\n\n this.show = function () {\n fill(125);\n ellipse(this.x, this.y, this.size, this.size);\n }\n\n this.move = function () {\n this.y += this.speed;\n if (this.y > height + this.size / 2) {\n this.y = -this.size / 2;\n }\n }\n this.hit = function (bullet) {\n let d = dist(this.x, this.y, bullet.x, bullet.y);\n if (d < this.size / 2) {\n score++; // increment score every time an asteroid is hit\n this.size *= 0.5;\n if (this.size > 5) {\n for (let i = 0; i < 2; i++) {\n let newAsteroid = new Asteroid(this.x, this.y, this.size);\n asteroids.push(newAsteroid);\n }\n }\n return this.size;\n }\n return false;\n }\n\n}\n\nlet asteroids = [];\nfunction draw() {\n background(0);\n fill(256, 256, 256)\n player.show();\n\n if (keyIsDown(LEFT_ARROW)) {\n player.move(-1, 0);\n }\n if (keyIsDown(RIGHT_ARROW)) {\n player.move(1, 0);\n }\n if (keyIsDown(UP_ARROW)) {\n player.move(0, -1);\n }\n if (keyIsDown(DOWN_ARROW)) {\n player.move(0, 1);\n }\n for (let i = bullets.length - 1; i >= 0; i--) {\n bullets[i].show();\n bullets[i].move();\n for (let j = asteroids.length - 1; j >= 0; j--) {\n let newSize = asteroids[j].hit(bullets[i]);\n if (newSize) {\n if (newSize <= 5) {\n asteroids.splice(j, 1);\n }\n bullets.splice(i, 1);\n break;\n }\n }\n }\n for (let i = asteroids.length - 1; i >= 0; i--) {\n asteroids[i].show();\n asteroids[i].move();\n }\n\n fill(255);\n text(\"Score: \" + score, 10, 20);\n\n}\nfunction keyPressed() {\n if (keyCode === 32) { // 32 is the ASCII code for the spacebar\n let bullet = new Bullet(player.x, player.y);\n bullets.push(bullet);\n }\n}\n","style.css":"","index.html":"\n\n\n\n \n \n Asteroid Adventure\n \n \n\n\n\n \n \n\n\n\n"},"chat_history":[{"message":"best css ever please","project_id":672,"created_at":"2024-02-17T22:56:02.524022Z","output_tokens":null,"sender":"human","code_id":41411,"deleted":0,"input_tokens":null,"id":23268},{"message":"Sure, let's style the game and the exit button using CSS.\n\n```css\nbody {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n background: #000;\n color: #fff;\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n overflow: hidden;\n}\n\ncanvas {\n border: 1px solid #fff;\n}\n\n#exit-button {\n position: absolute;\n top: 20px;\n right: 20px;\n padding: 10px 20px;\n background: #f00;\n border: none;\n color: #fff;\n font-size: 16px;\n cursor: pointer;\n border-radius: 5px;\n}\n```\n\n- The `body` styles are used to center the game in the middle of the page. The `height: 100vh;` makes the body take the full height of the viewport.\n- The `canvas` style adds a white border around the game canvas.\n- The `#exit-button` styles are used to style the exit button. The `position: absolute;` style positions the button relative to the nearest positioned ancestor (instead of positioned relative to the viewport). In this case, it will be positioned relative to the body. The `top: 20px;` and `right: 20px;` styles position the button 20px from the top and right of the body.","project_id":672,"created_at":"2024-02-17T22:56:02.528376Z","output_tokens":null,"sender":"ai","code_id":41411,"deleted":0,"input_tokens":null,"id":23269},{"message":"thats not good css","project_id":672,"created_at":"2024-02-17T22:56:16.179465Z","output_tokens":null,"sender":"human","code_id":41413,"deleted":0,"input_tokens":null,"id":23270},{"message":"I understand that you want a more visually appealing style for your game. Here is a more refined CSS code that could improve the visual experience of your game.\n\n```css\nbody {\n background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('background.jpg');\n background-size: cover;\n height: 100vh;\n margin: 0;\n color: #fff;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: 'Arial', sans-serif;\n}\n\ncanvas {\n border: 3px solid #fff;\n border-radius: 15px;\n}\n\n#exit-button {\n position: absolute;\n top: 20px;\n right: 20px;\n padding: 10px 20px;\n background-color: #ff4b5c;\n border: none;\n font-size: 16px;\n color: white;\n border-radius: 50px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n#exit-button:hover {\n background-color: #ff2e4a;\n}\n```\n\n- The `background: linear","project_id":672,"created_at":"2024-02-17T22:56:16.184646Z","output_tokens":null,"sender":"ai","code_id":41413,"deleted":0,"input_tokens":null,"id":23271},{"message":"i have no img and its not advanced css please do advanced css","project_id":672,"created_at":"2024-02-17T22:56:36.021572Z","output_tokens":null,"sender":"human","code_id":41414,"deleted":0,"input_tokens":null,"id":23272},{"message":"Apologies for the misunderstanding. Let's add some advanced CSS using variables, transitions, and transformations for a more dynamic and visually appealing style. I'll also add some CSS animations for extra flare.\n\n```css\n:root {\n --primary-color: #f9ed69;\n --secondary-color: #f08a5d;\n --bg-color: #b83b5e;\n --accent-color: #6a2c70;\n}\n\nbody {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n background-color: var(--bg-color);\n color: var(--primary-color);\n margin: 0;\n padding: 0;\n overflow: hidden;\n transition: background 0.5s;\n}\n\ncanvas {\n border: 3px solid var(--secondary-color);\n border-radius: 15px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);\n animation: canvasAnimation 5s infinite alternate;\n}\n\n@keyframes canvasAnimation {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n#exit-button {\n position: absolute;\n top: 20px;\n right: 20px;\n padding: 10px 20px;\n background-color: var(--accent-color);\n color: var(--primary-color);\n border: none;\n font-size: 16px;\n border-radius: 50px;\n cursor: pointer;\n transition: background-color 0.3s ease, transform 0.3s ease;\n}\n\n#exit-button:hover {\n background-color: var(--secondary-color);\n transform: scale(1.1);\n}\n```\n\n- The `:root` pseudo-class is used to define CSS variables that are global and can be used anywhere in your CSS file.\n- I've added a transition to the `body` background color. This will smoothly transition the background color if it changes.\n- The `canvas` now has a box shadow for a 3D effect and an animation that rotates it.\n- The `@keyframes` rule is used to create the animation. It changes the rotation of the canvas from 0 to 360 degrees.\n- The `#exit-button` now has a transition that changes the background color and transforms the scale of the button when hovered over.","project_id":672,"created_at":"2024-02-17T22:56:36.027290Z","output_tokens":null,"sender":"ai","code_id":41414,"deleted":0,"input_tokens":null,"id":23273}],"assets":[],"messages_sent":23,"comments":[],"steps":[]}