Marble Mayhem Madness

{"name":"Marble Mayhem Madness","description":"Roll, dodge, and maneuver your marble through a maze of obstacles in this thrilling Marble Mayhem Madness game!","photo":null,"view_count":10,"fork_count":1,"expires_at":null,"created_at":"2024-02-01T20:45:54.575011Z","updated_at":"2024-02-01T20:45:54.575011Z","user_id":2,"status":"PRIVATE","parent_id":null,"id":521,"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":"let img;\r\nlet marble;\r\nlet cam;\r\nlet camPos;\r\n\r\nfunction preload() {\r\n img = loadImage(\"https://media.discordapp.net/attachments/1172012862194073744/1202717598324760576/132441324132.png?ex=65ce790c&is=65bc040c&hm=8c08f59cc6e4326deec54e0868fdaca98a30eaac2943f74f1aaed6f89c1edc79&=&format=webp&quality=lossless\");\r\n marbleImg = loadImage(\"https://media.discordapp.net/attachments/1172012862194073744/1202717900528422982/scribletechx.png?ex=65ce7954&is=65bc0454&hm=805318933759ef27ab1bd135bc1bc06a469642b7ba225e62c5c79edec1d35653&=&format=webp&quality=lossless\");\r\n}\r\n\r\nfunction setup() {\r\n createCanvas(800, 600, WEBGL);\r\n marble = new Marble(width / 2, height / 2);\r\n cam = createCamera();\r\n camPos = createVector(0, 0, (height/2) / tan(PI/6));\r\n setCamera(cam);\r\n}\r\nfunction draw() {\r\n background(200);\r\n cam.setPosition(marble.pos.x, marble.pos.y, camPos.z);\r\n texture(img);\r\n plane(500, 500);\r\n marble.update();\r\n marble.show();\r\n marble.move();\r\n}\r\nclass Marble {\r\n constructor(x, y) {\r\n this.pos = createVector(x, y);\r\n this.vel = createVector(0, 0);\r\n this.acc = createVector(0, 0);\r\n this.force = createVector(0, 0);\r\n\r\n }\r\n\r\n applyForce(force) {\r\n this.acc.add(force);\r\n }\r\n\r\n move() {\r\n this.vel.add(this.acc);\r\n this.pos.add(this.vel);\r\n this.acc.set(0, 0);\r\n }\r\n\r\n show() {\r\n push();\r\n translate(this.pos.x, this.pos.y);\r\n imageMode(CENTER);\r\n tint(this.color);\r\n image(marbleImg, 0, 0);\r\n pop();\r\n this.color = color(random(255), random(255), random(255));\r\n\r\n }\r\n\r\n\r\n update() {\r\n if (keyIsDown(90)) { // 'z' key\r\n this.color = color(random(255), random(255), random(255));\r\n\r\n this.force.y -= 0.1;\r\n }\r\n\r\n if (keyIsDown(83)) { // 's' key\r\n this.force.y += 0.1;\r\n this.color = color(random(255), random(255), random(255));\r\n\r\n }\r\n if (keyIsDown(65)) { // 'a' key\r\n this.force.x -= 0.1;\r\n this.color = color(random(255), random(255), random(255));\r\n\r\n }\r\n if (keyIsDown(88)) { // 'x' key\r\n this.force.x += 0.1;\r\n this.color = color(random(255), random(255), random(255));\r\n\r\n }\r\n this.applyForce(this.force);\r\n this.force.set(0, 0);\r\n }\r\n}\r\nfunction mouseDragged() {\r\n let dx = mouseX - pmouseX;\r\n let dy = mouseY - pmouseY;\r\n cam.pan(-dx / width);\r\n cam.tilt(dy / height);\r\n}\r\n\r\n","style.css":"","index.html":"\n\n\n\n \n \n Marble Mayhem Madness\n \n \n\n\n\n \n\n\n"},"chat_history":[{"message":"remove rotate add a marble you control","project_id":521,"created_at":"2024-02-01T20:50:59.812169Z","output_tokens":null,"sender":"human","code_id":33077,"deleted":0,"input_tokens":null,"id":18963},{"message":"```javascript\nlet img;\nlet obstacles = [];\nlet marble;\n\nfunction preload() {\n img = loadImage(\"https://media.discordapp.net/attachments/1172012862194073744/1202717598324760576/132441324132.png?ex=65ce790c&is=65bc040c&hm=8c08f59cc6e4326deec54e0868fdaca98a30eaac2943f74f1aaed6f89c1edc79&=&format=webp&quality=lossless\");\n marble = loadImage(\"@asset('marble.png')\");\n}\n\nfunction setup() {\n createCanvas(800, 600, WEBGL);\n marble = new Marble(width / 2, height / 2);\n}\n\nfunction draw() {\n background(200);\n texture(img);\n plane(500, 500);\n for (let obstacle of obstacles) {\n obstacle.show();\n }\n marble.show();\n marble.move();\n}\n\nclass Marble {\n constructor(x, y) {\n this.pos = createVector(x, y);\n this.vel = createVector(0, 0);\n this.acc = createVector(0, 0);\n }\n\n applyForce(force) {\n this.acc.add(force);\n }\n\n move() {\n this.vel.add(this.acc);\n this.pos.add(this.vel);\n this.acc.set(0, 0);\n }\n\n show() {\n push();\n translate(this.pos.x, this.pos.y);\n imageMode(CENTER);\n image(marble, 0, 0);\n pop();\n }\n}\n```\n\n- The function `preload` loads the image of the marble before the setup and draw functions run.\n- The variable `marble` is added and is an instance of the class `Marble`, it represents the marble that the player controls.\n- The `Marble` class has properties to hold the position, velocity, and acceleration of the marble. It also has methods to move and display the marble.\n- The `applyForce` method allows us to apply a force to the marble, which will affect its acceleration, and in turn, its velocity and position.\n- The `move` function updates the marble's velocity and position based on its current acceleration, and then resets the acceleration to zero.\n- The `show` function displays the marble at its current position.\n- In the `draw` function, we call the `show` and `move` methods of the marble to display it on the screen and update its position.","project_id":521,"created_at":"2024-02-01T20:50:59.817771Z","output_tokens":null,"sender":"ai","code_id":33077,"deleted":0,"input_tokens":null,"id":18964},{"message":"add camera control","project_id":521,"created_at":"2024-02-01T20:52:09.628940Z","output_tokens":null,"sender":"human","code_id":33081,"deleted":0,"input_tokens":null,"id":18965},{"message":"```javascript\nlet cam;\nlet camPos;\n\nfunction setup() {\n createCanvas(800, 600, WEBGL);\n marble = new Marble(width / 2, height / 2);\n cam = createCamera();\n camPos = createVector(0, 0, (height/2) / tan(PI/6));\n setCamera(cam);\n}\n\nfunction draw() {\n background(200);\n cam.setPosition(marble.pos.x, marble.pos.y, camPos.z);\n texture(img);\n plane(500, 500);\n marble.show();\n marble.move();\n}\n\nfunction mouseDragged() {\n let dx = mouseX - pmouseX;\n let dy = mouseY - pmouseY;\n cam.pan(-dx / width);\n cam.tilt(dy / height);\n}\n```\n\n- In the `setup` function, we create a new camera object and set its position as a vector with the x and y coordinates being 0, and the z coordinate being the distance from the camera to the center of the screen.\n- The `draw` function is updated to set the camera's position to follow the marble. This is achieved by setting the x and y coordinates of the camera to the x and y coordinates of the marble.\n- The `mouseDragged` function, which is a p5.js built-in function that gets called whenever the mouse is dragged, is added. Inside this function, we calculate the change in the mouse's x and y coordinates from the last frame to the current frame, and use these values to pan and tilt the camera. Panning moves the camera left or right while tilting moves it up or down. The amount of panning and tilting is proportional to the amount of mouse movement.\n","project_id":521,"created_at":"2024-02-01T20:52:09.635168Z","output_tokens":null,"sender":"ai","code_id":33081,"deleted":0,"input_tokens":null,"id":18966},{"message":"i see no marble","project_id":521,"created_at":"2024-02-01T20:53:00.771622Z","output_tokens":null,"sender":"human","code_id":33084,"deleted":0,"input_tokens":null,"id":18967},{"message":"I see the issue. The `marble` variable is being used both for the image of the marble and for the instance of the `Marble` class. This leads to a conflict because the `Marble` class instance overwrites the image in the `setup` function. Let's rename the image variable to `marbleImg` to avoid this conflict.\n\n```javascript\nlet marbleImg;\n\nfunction preload() {\n img = loadImage(\"https://media.discordapp.net/attachments/1172012862194073744/1202717598324760576/132441324132.png?ex=65ce790c&is=65bc040c&hm=8c08f59cc6e4326deec54e0868fdaca98a30eaac2943f74f1aaed6f89c1edc79&=&format=webp&quality=lossless\");\n marbleImg = loadImage(\"@asset('marble.png')\");\n}\n\nfunction setup() {\n createCanvas(800, 600, WEBGL);\n marble = new Marble(width / 2, height / 2);\n cam = createCamera();\n camPos = createVector(0, 0, (height/2) / tan(PI/6));\n setCamera(cam);\n}\n\nclass Marble {\n show() {\n push();\n translate(this.pos.x, this.pos.y);\n imageMode(CENTER);\n image(marbleImg, 0, 0);\n pop();\n }\n}\n```\n- There was a naming conflict with the variable `marble` that was used for both the marble image and the marble object. We have renamed the image to `marbleImg` to solve this issue.\n- In the `preload` function, we now load the marble image into `marbleImg`.\n- In the `show` method of the `Marble` class, we use `marbleImg` to display the marble.","project_id":521,"created_at":"2024-02-01T20:53:00.778618Z","output_tokens":null,"sender":"ai","code_id":33084,"deleted":0,"input_tokens":null,"id":18968},{"message":"now make the palyer control it with zasx","project_id":521,"created_at":"2024-02-01T20:54:13.629381Z","output_tokens":null,"sender":"human","code_id":33087,"deleted":0,"input_tokens":null,"id":18969},{"message":"```javascript\nclass Marble {\n constructor(x, y) {\n this.pos = createVector(x, y);\n this.vel = createVector(0, 0);\n this.acc = createVector(0, 0);\n this.force = createVector(0, 0);\n }\n\n applyForce(force) {\n this.acc.add(force);\n }\n\n move() {\n this.vel.add(this.acc);\n this.pos.add(this.vel);\n this.acc.set(0, 0);\n }\n\n show() {\n push();\n translate(this.pos.x, this.pos.y);\n imageMode(CENTER);\n image(marbleImg, 0, 0);\n pop();\n }\n\n update() {\n if (keyIsDown(90)) { // 'z' key\n this.force.y -= 0.1;\n }\n if (keyIsDown(83)) { // 's' key\n this.force.y += 0.1;\n }\n if (keyIsDown(65)) { // 'a' key\n this.force.x -= 0.1;\n }\n if (keyIsDown(88)) { // 'x' key\n this.force.x += 0.1;\n }\n this.applyForce(this.force);\n this.force.set(0, 0);\n }\n}\n\nfunction draw() {\n background(200);\n cam.setPosition(marble.pos.x, marble.pos.y, camPos.z);\n texture(img);\n plane(500, 500);\n marble.update();\n marble.show();\n marble.move();\n}\n```\n- The `update` method is added to the `Marble` class. This method checks if the 'z', 's', 'a', or 'x' keys are being pressed, and applies a force to the marble in the corresponding direction if they are.\n- The 'z' key applies a force in the negative y direction, the 's' key applies a force in the positive y direction, the 'a' key applies a force in the negative x direction, and the 'x' key applies a force in the positive x direction.\n- The `force` vector is added to the `Marble` class to store the force that will be applied to the marble.\n- In the `draw` function, we call the `update` method of the marble before its `show` and `move` methods. This allows the force to be applied to the marble before it is displayed and moved.","project_id":521,"created_at":"2024-02-01T20:54:13.635336Z","output_tokens":null,"sender":"ai","code_id":33087,"deleted":0,"input_tokens":null,"id":18970},{"message":"make this game madness","project_id":521,"created_at":"2024-02-01T20:56:05.676471Z","output_tokens":null,"sender":"human","code_id":33090,"deleted":0,"input_tokens":null,"id":18971},{"message":"To make the game more challenging and engaging, we can add random obstacles, increase the speed of the marble over time, and add a scoring system.","project_id":521,"created_at":"2024-02-01T20:56:05.683537Z","output_tokens":null,"sender":"ai","code_id":33090,"deleted":0,"input_tokens":null,"id":18972},{"message":"\\no just plain weird stuff plaese","project_id":521,"created_at":"2024-02-01T20:56:16.687693Z","output_tokens":null,"sender":"human","code_id":33091,"deleted":0,"input_tokens":null,"id":18973},{"message":"Sure, we can add some random visual effects to make the game more \"madness\". \n\nHere's a simple way to add some madness: let's make the marble change color randomly as it moves.\n\n```javascript\nclass Marble {\n constructor(x, y) {\n // other properties...\n this.color = color(random(255), random(255), random(255));\n }\n\n show() {\n push();\n translate(this.pos.x, this.pos.y);\n imageMode(CENTER);\n tint(this.color);\n image(marbleImg, 0, 0);\n pop();\n this.color = color(random(255), random(255), random(255));\n }\n\n // other methods...\n}\n```\n- We add a new property `color` to the `Marble` class, which is set to a random color in the constructor.\n- In the `show` method, we use the `tint` function to change the color of the marble before displaying it. The `tint` function modifies the fill color for images.\n- After displaying the marble, we set its color to a new random color. This will cause the color of the marble to change every frame, creating a weird, psychedelic effect.\n\nYou could also add some random rotation to the camera view to make the game more disorienting.\n\n```javascript\nfunction draw() {\n // other statements...\n cam.pan(random(-0.01, 0.01));\n cam.tilt(random(-0.01, 0.01));\n // other statements...\n}\n```\n- In the `draw` function, we add a small random rotation to the camera's pan and tilt each frame. This will make the camera view shake randomly, adding to the madness of the game.","project_id":521,"created_at":"2024-02-01T20:56:16.693898Z","output_tokens":null,"sender":"ai","code_id":33091,"deleted":0,"input_tokens":null,"id":18974}],"assets":[{"project_id":521,"creator":null,"cloudinary_id":"svbqrxwafow3jz0tworh","deleted":false,"id":899,"created_at":"2024-02-01T20:48:38.833593Z","name":"bmp","resource_type":"image","tags":null}],"messages_sent":11,"comments":[],"steps":[{"title":"Design Intricate Obstacle Courses","instruction":"Create visually stunning and challenging obstacle courses for the marble to navigate through.","created_at":"2024-02-01T20:45:54.580274","project_id":521,"complete":false,"step_number":0,"updated_at":"2024-02-01T20:45:54.580275","id":2974},{"title":"Implement Marble Control","instruction":"Allow players to control the marble using keyboard inputs for precise maneuvering.","created_at":"2024-02-01T20:45:54.580332","project_id":521,"complete":false,"step_number":1,"updated_at":"2024-02-01T20:45:54.580332","id":2975},{"title":"Introduce Power-ups and Abilities","instruction":"Include special power-ups and abilities for the marble to collect and use during gameplay.","created_at":"2024-02-01T20:45:54.580374","project_id":521,"complete":false,"step_number":2,"updated_at":"2024-02-01T20:45:54.580375","id":2976},{"title":"Add Visual Effects and Animations","instruction":"Incorporate visually appealing effects and animations to enhance the overall gaming experience.","created_at":"2024-02-01T20:45:54.580414","project_id":521,"complete":false,"step_number":3,"updated_at":"2024-02-01T20:45:54.580414","id":2977},{"title":"Integrate Scoring and Level Progression","instruction":"Implement scoring system and level progression to provide a sense of achievement and advancement for players.","created_at":"2024-02-01T20:45:54.580453","project_id":521,"complete":false,"step_number":4,"updated_at":"2024-02-01T20:45:54.580454","id":2978},{"title":"Develop User Interface and Game Menus","instruction":"Create intuitive user interface and game menus for easy navigation and interaction.","created_at":"2024-02-01T20:45:54.580493","project_id":521,"complete":false,"step_number":5,"updated_at":"2024-02-01T20:45:54.580494","id":2979},{"title":"Enable Collision Detection","instruction":"Implement collision detection to ensure the marble interacts realistically with the obstacles and environment.","created_at":"2024-02-01T20:45:54.580534","project_id":521,"complete":false,"step_number":6,"updated_at":"2024-02-01T20:45:54.580534","id":2980},{"title":"Optimize for Mobile and Desktop","instruction":"Optimize the game to be playable on both mobile devices and desktop browsers for maximum accessibility.","created_at":"2024-02-01T20:45:54.580574","project_id":521,"complete":false,"step_number":7,"updated_at":"2024-02-01T20:45:54.580574","id":2981}]}