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-16T15:22:56.107684Z","updated_at":"2024-01-16T15:22:56.107686Z","user_id":20,"status":"PUBLIC","parent_id":49,"id":368,"user":{"photo":null,"email":null,"recess_id":"93334261-e433-7134-983b-ed13d90349f5","created_at":"2023-12-13T22:03:27.288318Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"easton","id":20,"password_hash":null,"updated_at":"2023-12-13T22:03:27.288320Z","reset_token_expiry":null,"subscription_status":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 === \"rock\") ||\n (obj2.type === \"scissors\" && obj1.type === \"rock\") ||\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":[],"assets":[{"project_id":368,"creator":null,"cloudinary_id":"iaw9hfqu97hdp4geoxx1","deleted":false,"id":587,"created_at":"2024-01-16T15:22:56.118627Z","name":"Paper","resource_type":"image","tags":null},{"project_id":368,"creator":null,"cloudinary_id":"sq8qpd0jq77an7rdlssr","deleted":false,"id":586,"created_at":"2024-01-16T15:22:56.117326Z","name":"scissor","resource_type":"image","tags":null},{"project_id":368,"creator":null,"cloudinary_id":"suzvancfwouv8ftukbaq","deleted":false,"id":585,"created_at":"2024-01-16T15:22:56.115868Z","name":"hard","resource_type":"image","tags":null}],"messages_sent":0,"comments":[],"steps":[{"title":"Integration of Project 1 and Project 2","instruction":"Combine the elements and features of two separate projects into one cohesive experience.","created_at":"2023-12-14T13:47:33.193194","project_id":368,"complete":false,"step_number":0,"updated_at":"2024-01-16T15:22:56.111103","id":2260},{"title":"Customize and Modify Elements","instruction":"Ability to customize and modify the visual and interactive elements from both projects.","created_at":"2023-12-14T13:47:33.193264","project_id":368,"complete":false,"step_number":1,"updated_at":"2024-01-16T15:22:56.111176","id":2261},{"title":"Interactive Blend of Functionality","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":368,"complete":false,"step_number":2,"updated_at":"2024-01-16T15:22:56.111231","id":2262},{"title":"Seamless User Experience","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":368,"complete":false,"step_number":3,"updated_at":"2024-01-16T15:22:56.111273","id":2263},{"title":"Creative Expression","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":368,"complete":false,"step_number":4,"updated_at":"2024-01-16T15:22:56.111315","id":2264},{"title":"Testing and Debugging","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":368,"complete":false,"step_number":5,"updated_at":"2024-01-16T15:22:56.111356","id":2265},{"title":"Documentation and Instructions","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":368,"complete":false,"step_number":6,"updated_at":"2024-01-16T15:22:56.111396","id":2266},{"title":"Community Sharing","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":368,"complete":false,"step_number":7,"updated_at":"2024-01-16T15:22:56.111437","id":2267}]}