Rock Paper Scissors Simulator

{"name":"Rock Paper Scissor","description":"Unleash your creativity in Mashup Mania: Project Fusion! Combine and blend two distinct projects into a wacky and wonderful creation. Let your imagination run wild as you mix and match elements to craft something entirely new!","photo":"https://cdn.discordapp.com/attachments/1062555378744832080/1191167716174872586/CleanShot_2023-12-31_at_17.54.572x.png?ex=65a47462&is=6591ff62&hm=daea599beeaa60e9f336b3835d4d02a4c97433ad8bfaa70fba98caeab11de2d9&","view_count":4,"fork_count":0,"expires_at":null,"created_at":"2024-01-11T05:07:55.274614Z","updated_at":"2024-01-11T05:07:55.274616Z","user_id":2,"status":"PUBLIC","parent_id":49,"id":329,"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":"\nconst canvas = document.getElementById(\"gameCanvas\");\nconst ctx = canvas.getContext(\"2d\");\nconst rockImage = new Image();\nconst paperImage = new Image();\nconst scissorsImage = new Image();\nconst elements = [];\nconst imageSize = 20; // The equal size for hitbox\nlet gameOver = false;\n\n// Set image sources\nrockImage.onload = () => initElements(rockImage, \"rock\", 40);\npaperImage.onload = () => initElements(paperImage, \"paper\", 40);\nscissorsImage.onload = () => initElements(scissorsImage, \"scissors\", 60);\n\nrockImage.src = \"@asset('hard')\";\npaperImage.src = \"@asset('Paper')\";\nscissorsImage.src = \"@asset('scissor')\";\n\nfunction initElements(image, type, count) {\n for (let i = 0; i < 100; i++) {\n const xOffset = Math.random() * 50; // random offset in x position\n const yOffset = Math.random() * 50; // random offset in y position\n elements.push({\n x: Math.random() * (canvas.width - imageSize) + xOffset,\n y: Math.random() * (canvas.height - imageSize) + yOffset,\n vx: 0,\n vy: 0,\n image,\n type,\n });\n }\n shuffleArray(elements);\n}\n\n\nfunction draw() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n elements.forEach((element) => {\n ctx.drawImage(element.image, element.x, element.y, imageSize, imageSize);\n\n // Move towards a target based on element type with randomness, slower speed\n moveTowards(element, \"rock\");\n moveTowards(element, \"paper\");\n moveTowards(element, \"scissors\");\n\n // Update position\n element.x += element.vx;\n element.y += element.vy;\n\n // Check collision with canvas boundaries\n if (element.x < 0 || element.x > canvas.width - imageSize) {\n element.vx *= -1;\n }\n if (element.y < 0 || element.y > canvas.height - imageSize) {\n element.vy *= -1;\n }\n\n\n // Check collision with other elements\n elements.forEach((otherElement) => {\n if (element !== otherElement && isColliding(element, otherElement)) {\n handleCollision(element, otherElement);\n }\n });\n\n // Keep the element within the canvas boundaries\n element.x = Math.max(0, Math.min(element.x, canvas.width - imageSize));\n element.y = Math.max(0, Math.min(element.y, canvas.height - imageSize));\n });\n\n // Check if the game is over\n if (!gameOver) {\n requestAnimationFrame(draw);\n } else {\n const teamName = getWinner();\n if (teamName) {\n const playAgain = confirm(`${teamName} won! Start a new round?`);\n if (playAgain) {\n location.reload();\n }\n }\n }\n}\n\nfunction shuffleArray(array) {\n for (let i = array.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [array[i], array[j]] = [array[j], array[i]];\n }\n}\n\n\nfunction seekTarget(element, target) {\n const maxSpeed = 0.5; // Define the maximum speed\n\n const desiredVelocity = {\n x: target.x - element.x,\n y: target.y - element.y\n };\n const distance = Math.sqrt(desiredVelocity.x * desiredVelocity.x + desiredVelocity.y * desiredVelocity.y);\n\n if (distance > 0) {\n desiredVelocity.x = (desiredVelocity.x / distance) * maxSpeed; // Maintain constant speed\n desiredVelocity.y = (desiredVelocity.y / distance) * maxSpeed; // Maintain constant speed\n\n const steeringForce = {\n x: desiredVelocity.x - element.vx,\n y: desiredVelocity.y - element.vy\n };\n\n element.vx += steeringForce.x;\n element.vy += steeringForce.y;\n }\n}\n\nfunction moveTowards(element, targetType) {\n const target = elements.find((e) => e.type === targetType);\n if (target) {\n seekTarget(element, target);\n }\n}\n\nfunction isColliding(obj1, obj2) {\n const obj1CenterX = obj1.x + imageSize / 2;\n const obj1CenterY = obj1.y + imageSize / 2;\n const obj2CenterX = obj2.x + imageSize / 2;\n const obj2CenterY = obj2.y + imageSize / 2;\n const distanceX = obj1CenterX - obj2CenterX;\n const distanceY = obj1CenterY - obj2CenterY;\n const distance = Math.sqrt((distanceX * distanceX) + (distanceY * distanceY));\n return distance < imageSize;\n}\n\nfunction handleCollision(obj1, obj2) {\n // Simple logic: paper beats rock, rock beats scissors, scissors beat paper\n if (\n (obj1.type === \"rock\" && obj2.type === \"scissors\") ||\n (obj1.type === \"scissors\" && obj2.type === \"paper\") ||\n (obj1.type === \"paper\" && obj2.type === \"rock\")\n ) {\n elements[elements.indexOf(obj2)] = { ...obj1, vx: 0, vy: 0, x: obj2.x + (imageSize / 2), y: obj2.y + (imageSize / 2) };\n if (elements.filter((element) => element.type === obj1.type).length === elements.length) {\n const restart = confirm(`${obj1.type} won! Start a new round?`);\n if (restart) {\n location.reload();\n }\n }\n } else if (\n (obj2.type === \"rock\" && obj1.type === \"scissors\") ||\n (obj2.type === \"scissors\" && obj1.type === \"paper\") ||\n (obj2.type === \"paper\" && obj1.type === \"rock\")\n ) {\n elements[elements.indexOf(obj1)] = { ...obj2, vx: 0, vy: 0, x: obj1.x + (imageSize / 2), y: obj1.y + (imageSize / 2) };\n if (elements.filter((element) => element.type === obj2.type).length === elements.length) {\n const restart = confirm(`${obj2.type} won! Start a new round?`);\n if (restart) {\n location.reload();\n }\n }\n }\n\n if (isColliding(obj1, obj2)) {\n const overlap = imageSize;\n const dx = obj2.x - obj1.x;\n const dy = obj2.y - obj1.y;\n\n if (Math.abs(dx) > Math.abs(dy)) {\n if (dx > 0) {\n obj2.x += overlap;\n obj1.x -= overlap;\n } else {\n obj2.x -= overlap;\n obj1.x += overlap;\n }\n } else {\n if (dy > 0) {\n obj2.y += overlap;\n obj1.y -= overlap;\n } else {\n obj2.y -= overlap;\n obj1.y += overlap;\n }\n }\n }\n}\n\nfunction getWinner() {\n const rockCount = elements.filter((e) => e.type === \"rock\").length;\n const paperCount = elements.filter((e) => e.type === \"paper\").length;\n const scissorsCount = elements.filter((e) => e.type === \"scissors\").length;\n\n if (rockCount > 0 && paperCount === 0 && scissorsCount === 0) {\n return \"Rock Team\";\n } else if (paperCount > 0 && rockCount === 0 && scissorsCount === 0) {\n return \"Paper Team\";\n } else if (scissorsCount > 0 && rockCount === 0 && paperCount === 0) {\n return \"Scissors Team\";\n }\n return null;\n}\n\ncanvas.width = window.innerWidth;\ncanvas.height = window.innerHeight;\n\nwindow.addEventListener(\"resize\", () => {\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n});\n\nshuffleArray(elements);\ndraw();","style.css":"body {\n margin: 0;\n overflow: hidden;\n}\n\ncanvas {\n display: block;\n}","index.html":"\n\n\n\n \n \n Rock Paper Scissors Simulator\n \n\n\n\n

\n \n\n\n"},"chat_history":[{"deleted":0,"code_id":41800,"input_tokens":null,"id":23526,"project_id":329,"sender":"human","message":"Let's get started!","created_at":"2024-02-18T22:17:28.928020Z","output_tokens":null},{"deleted":0,"code_id":41800,"input_tokens":null,"id":23527,"project_id":329,"sender":"ai","message":"Sure! Based on the current code, it seems we have a Rock Paper Scissors game implemented with moving elements (rock, paper, scissors) on a canvas. The elements move around randomly and collide with each other following the standard game rules.\n\nNow, to combine this with another project, we need to decide what kind of project we want to blend with this. It could be anything from a trivia game to a weather application. Let's assume the other project is a simple weather application where it fetches weather data for a location and displays it.\n\nSo, for Mashup Mania: Project Fusion, we could have a game where the speed and direction of the moving elements (rock, paper, scissors) are affected by the real-time weather data of a location. For example, if it's windy in a location, the elements could move faster, or if it's raining, the elements could move slower or in a certain direction.\n\nDoes that sound interesting? Would you like to proceed with this idea or explore another one?","created_at":"2024-02-18T22:17:28.934407Z","output_tokens":null}],"assets":[{"name":"Paper","cloudinary_id":"iaw9hfqu97hdp4geoxx1","deleted":false,"project_id":329,"created_at":"2024-01-11T05:07:55.285364Z","resource_type":"image","id":495},{"name":"scissor","cloudinary_id":"sq8qpd0jq77an7rdlssr","deleted":false,"project_id":329,"created_at":"2024-01-11T05:07:55.284135Z","resource_type":"image","id":494},{"name":"hard","cloudinary_id":"suzvancfwouv8ftukbaq","deleted":false,"project_id":329,"created_at":"2024-01-11T05:07:55.282623Z","resource_type":"image","id":493}],"messages_sent":1,"comments":[],"steps":[{"title":"Integration of Project 1 and Project 2","step_number":0,"complete":false,"updated_at":"2024-01-11T05:07:55.278272","id":2024,"instruction":"Combine the elements and features of two separate projects into one cohesive experience.","created_at":"2023-12-14T13:47:33.193194","project_id":329},{"title":"Customize and Modify Elements","step_number":1,"complete":false,"updated_at":"2024-01-11T05:07:55.278342","id":2025,"instruction":"Ability to customize and modify the visual and interactive elements from both projects.","created_at":"2023-12-14T13:47:33.193264","project_id":329},{"title":"Interactive Blend of Functionality","step_number":2,"complete":false,"updated_at":"2024-01-11T05:07:55.278388","id":2026,"instruction":"Create an interactive blend of functionality from the two projects, allowing users to engage with both sets of features.","created_at":"2023-12-14T13:47:33.193311","project_id":329},{"title":"Seamless User Experience","step_number":3,"complete":false,"updated_at":"2024-01-11T05:07:55.278431","id":2027,"instruction":"Ensure a seamless user experience when transitioning between the integrated elements of the two projects.","created_at":"2023-12-14T13:47:33.193355","project_id":329},{"title":"Creative Expression","step_number":4,"complete":false,"updated_at":"2024-01-11T05:07:55.278473","id":2028,"instruction":"Encourage creative expression by allowing users to manipulate and combine the various elements in innovative ways.","created_at":"2023-12-14T13:47:33.193399","project_id":329},{"title":"Testing and Debugging","step_number":5,"complete":false,"updated_at":"2024-01-11T05:07:55.278514","id":2029,"instruction":"Implement testing and debugging to ensure that the integration of the projects works smoothly and without errors.","created_at":"2023-12-14T13:47:33.193441","project_id":329},{"title":"Documentation and Instructions","step_number":6,"complete":false,"updated_at":"2024-01-11T05:07:55.278556","id":2030,"instruction":"Provide clear documentation and instructions for users on how to interact with and customize the integrated mashup.","created_at":"2023-12-14T13:47:33.193482","project_id":329},{"title":"Community Sharing","step_number":7,"complete":false,"updated_at":"2024-01-11T05:07:55.278596","id":2031,"instruction":"Incorporate a feature for users to share their created mashups with the community for feedback and inspiration.","created_at":"2023-12-14T13:47:33.193522","project_id":329}]}