Nuclear Simulation Adventure

{"name":"Nuclear Simulation Adventure Working","description":"Step into a thrilling nuclear simulation adventure where you navigate challenges to defuse a nuclear bomb! Use your skills to make strategic decisions and save the day while learning the basics of programming.","photo":null,"view_count":5,"fork_count":0,"expires_at":null,"created_at":"2024-09-12T21:45:42.254951Z","updated_at":"2024-09-12T21:45:42.254953Z","user_id":172,"status":"PRIVATE","parent_id":3107,"id":3216,"user":{"username":"cadoozld","id":172,"password_hash":null,"updated_at":"2024-08-15T19:05:08.398097Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":null,"recess_id":"48f5a6f1-59e7-4ffe-a341-7cef8d71c9d5","created_at":"2024-08-15T19:05:08.398092Z","reset_token":null,"stripe_customer_id":null,"seats":null},"code":{"script.js":"let scene, camera, renderer;\r\nlet explosionSize = 2;\r\nlet explosionGrowth = 0.5;\r\nlet explosionMaxSize;\r\nlet baseHeight = 7;\r\nlet baseGrowth = 0.2;\r\nlet baseMaxHeight;\r\nlet cloudParticles = [];\r\nlet stopGrowth = false;\r\nlet dissipationSpeed = 0.01;\r\nlet startDissipation = false;\r\nlet vaporizationSpeed = 0.01;\r\nlet isPanning = false;\r\nlet lastMouseX = 0;\r\nlet lastMouseY = 0;\r\nlet zoomSpeed = 0.1;\r\nlet cameraParent;\r\nlet shockwave; // Define shockwave globally\r\n\r\nfunction init() {\r\n // Create scene\r\n scene = new THREE.Scene();\r\n\r\n // Create camera\r\n camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000);\r\n camera.position.set(0, 200, 1000); // Move camera two times closer\r\n camera.lookAt(0, 0, 0); // Make the camera look at the center of the scene\r\n\r\n // Create camera parent\r\n cameraParent = new THREE.Object3D();\r\n cameraParent.add(camera);\r\n scene.add(cameraParent);\r\n\r\n // Create renderer\r\n renderer = new THREE.WebGLRenderer();\r\n renderer.setSize(window.innerWidth, window.innerHeight);\r\n document.body.appendChild(renderer.domElement);\r\n\r\n // Add lighting\r\n const ambientLight = new THREE.AmbientLight(0x555555);\r\n scene.add(ambientLight);\r\n\r\n const directionalLight = new THREE.DirectionalLight(0xffffff, 1);\r\n directionalLight.position.set(0, 1, 0);\r\n scene.add(directionalLight);\r\n\r\n // Create starry background (add this early)\r\n createStarryBackground();\r\n\r\n // Set explosion and base max sizes\r\n explosionMaxSize = Math.min(window.innerWidth, window.innerHeight) / 2; // Make the explosion bigger\r\n baseMaxHeight = Math.min(window.innerWidth, window.innerHeight) / 1.5; // Increase base height\r\n\r\n // Create water around the island\r\n createWater(20000, 20000); // Large water plane to reach the horizon\r\n\r\n // Create the island\r\n createIsland();\r\n\r\n // Create city on the island\r\n createCityWithRoads(10, 10, 50); // 10x10 grid with 50 units spacing\r\n\r\n // Create star field\r\n createStarField();\r\n\r\n // Add event listeners for camera panning and zooming\r\n document.addEventListener('mousedown', onMouseDown, false);\r\n document.addEventListener('mouseup', onMouseUp, false);\r\n document.addEventListener('mousemove', onMouseMove, false);\r\n document.addEventListener('wheel', onMouseWheel, false); // Add this line\r\n\r\n // Add event listener for space bar\r\n document.addEventListener('keydown', onKeyDown, false);\r\n\r\n // Start animation loop\r\n animate();\r\n}\r\n\r\nfunction onKeyDown(event) {\r\n if (event.code === 'Space') {\r\n startExplosion();\r\n }\r\n}\r\n\r\nfunction startExplosion() {\r\n // Create mushroom cloud elements\r\n createMushroomCloud(); // Only create elements when explosion starts\r\n\r\n // Add cloud particles to the scene\r\n cloudParticles.forEach(cloud => {\r\n scene.add(cloud);\r\n });\r\n\r\n // Add the shockwave to the scene\r\n scene.add(shockwave);\r\n\r\n // Start the explosion growth\r\n stopGrowth = false;\r\n startDissipation = false;\r\n\r\n // Reset cloud particles and make them visible\r\n cloudParticles.forEach(cloud => {\r\n cloud.scale.set(1, 1, 1);\r\n cloud.material.opacity = 0.8; // Make visible\r\n });\r\n\r\n // Make the shockwave visible\r\n shockwave.material.opacity = 0.5;\r\n\r\n // Stop the growth after 4 seconds\r\n setTimeout(() => {\r\n stopGrowth = true;\r\n }, 4000);\r\n}\r\n\r\nfunction onMouseWheel(event) {\r\n const zoomSpeed = 0.1; // Adjust this value to control zoom speed\r\n camera.position.z += event.deltaY * zoomSpeed;\r\n\r\n // Clamp the zoom level to prevent zooming too far in or out\r\n camera.position.z = Math.max(500, Math.min(2000, camera.position.z));\r\n}\r\n\r\nfunction onMouseDown(event) {\r\n if (event.button === 0) { // Left mouse button\r\n isPanning = true;\r\n lastMouseX = event.clientX;\r\n lastMouseY = event.clientY;\r\n }\r\n}\r\n\r\nfunction onMouseUp(event) {\r\n if (event.button === 0) { // Left mouse button\r\n isPanning = false;\r\n }\r\n}\r\n\r\nfunction onMouseMove(event) {\r\n if (isPanning) {\r\n const deltaX = event.clientX - lastMouseX;\r\n const deltaY = event.clientY - lastMouseY;\r\n\r\n // Update camera parent's rotation based on mouse movement\r\n cameraParent.rotation.y -= deltaX * 0.005; // Adjust sensitivity as needed\r\n cameraParent.rotation.x -= deltaY * 0.005; // Adjust sensitivity as needed\r\n\r\n // Clamp the x rotation to prevent flipping and going below the water level\r\n cameraParent.rotation.x = Math.max(-Math.PI / 4, Math.min(Math.PI / 16, cameraParent.rotation.x));\r\n\r\n lastMouseX = event.clientX;\r\n lastMouseY = event.clientY;\r\n }\r\n}\r\n\r\nfunction createMushroomCloud() {\r\n const colors = [0xff4500, 0xff8c00, 0xffd700]; // Fiery colors: red, orange, yellow\r\n let cloudMaterial;\r\n\r\n // Clear any existing cloud particles\r\n cloudParticles = [];\r\n\r\n // Create the stem of the mushroom cloud\r\n for (let i = 0; i < 10; i++) {\r\n cloudMaterial = new THREE.MeshStandardMaterial({\r\n color: colors[Math.floor(Math.random() * colors.length)],\r\n transparent: true,\r\n opacity: 0.0 // Initially invisible\r\n });\r\n\r\n let cloud = new THREE.Mesh(\r\n new THREE.SphereGeometry(Math.random() * 5 + 10, 32, 32),\r\n cloudMaterial\r\n );\r\n\r\n cloud.position.set(\r\n Math.random() * 10 - 5,\r\n i * 15,\r\n Math.random() * 10 - 5\r\n );\r\n\r\n cloudParticles.push(cloud);\r\n // Do not add to the scene yet\r\n }\r\n\r\n // Create the cap of the mushroom cloud\r\n for (let i = 0; i < 20; i++) {\r\n cloudMaterial = new THREE.MeshStandardMaterial({\r\n color: colors[Math.floor(Math.random() * colors.length)],\r\n transparent: true,\r\n opacity: 0.0 // Initially invisible\r\n });\r\n\r\n let cloud = new THREE.Mesh(\r\n new THREE.SphereGeometry(Math.random() * 10 + 20, 32, 32),\r\n cloudMaterial\r\n );\r\n\r\n cloud.position.set(\r\n Math.random() * 50 - 25,\r\n baseMaxHeight / 2,\r\n Math.random() * 50 - 25\r\n );\r\n\r\n cloudParticles.push(cloud);\r\n // Do not add to the scene yet\r\n }\r\n\r\n // Create the shockwave\r\n const shockwaveGeometry = new THREE.RingGeometry(0, 1, 32);\r\n const shockwaveMaterial = new THREE.MeshBasicMaterial({\r\n color: 0xff4500,\r\n transparent: true,\r\n opacity: 0.0, // Initially invisible\r\n side: THREE.DoubleSide\r\n });\r\n shockwave = new THREE.Mesh(shockwaveGeometry, shockwaveMaterial);\r\n shockwave.rotation.x = -Math.PI / 2; // Rotate to be horizontal\r\n shockwave.position.y = -5; // Position at the base of the explosion\r\n // Do not add to the scene yet\r\n}\r\n\r\nfunction createWindowTexture(width, height, buildingColor) {\r\n const size = 512; // Size of the texture\r\n const canvas = document.createElement('canvas');\r\n canvas.width = size;\r\n canvas.height = size;\r\n const context = canvas.getContext('2d');\r\n\r\n // Fill background with the building color\r\n context.fillStyle = buildingColor;\r\n context.fillRect(0, 0, size, size);\r\n\r\n // Draw windows on the sides with gaps\r\n const rows = 10;\r\n const cols = 2; // Only two columns for windows on the sides\r\n const windowWidth = size / (cols * 2); // Twice the width for gaps in between\r\n const windowHeight = size / rows;\r\n context.fillStyle = '#808080'; // Grey color for windows\r\n\r\n for (let i = 0; i < rows; i++) {\r\n for (let j = 0; j < cols; j++) {\r\n context.fillRect(\r\n j * windowWidth * 2 + 5, // Add a small margin and gaps\r\n i * windowHeight + 5,\r\n windowWidth - 10,\r\n windowHeight - 10\r\n );\r\n\r\n context.fillRect(\r\n size - (j + 1) * windowWidth * 2 + 5, // Mirror the windows on the other side\r\n i * windowHeight + 5,\r\n windowWidth - 10,\r\n windowHeight - 10\r\n );\r\n }\r\n }\r\n\r\n // Create texture from canvas\r\n const texture = new THREE.CanvasTexture(canvas);\r\n return texture;\r\n}\r\n\r\nfunction createBuilding(width, height, depth, color) {\r\n const geometry = new THREE.BoxGeometry(width, height, depth);\r\n const buildingColor = new THREE.Color(color).getStyle(); // Get the color in CSS format\r\n const windowTexture = createWindowTexture(width, height, buildingColor); // Create window texture with building color\r\n\r\n // Apply different materials to the sides and the front/back/top/bottom faces\r\n const materials = [\r\n new THREE.MeshStandardMaterial({ color: color }), // Front face\r\n new THREE.MeshStandardMaterial({ color: color }), // Back face\r\n new THREE.MeshStandardMaterial({ color: color }), // Top face\r\n new THREE.MeshStandardMaterial({ color: color }), // Bottom face\r\n new THREE.MeshStandardMaterial({ map: windowTexture }), // Left face\r\n new THREE.MeshStandardMaterial({ map: windowTexture }) // Right face\r\n ];\r\n\r\n return new THREE.Mesh(geometry, materials);\r\n}\r\n\r\nfunction createRoadTexture() {\r\n const size = 512; // Size of the texture\r\n const canvas = document.createElement('canvas');\r\n canvas.width = size;\r\n canvas.height = size;\r\n const context = canvas.getContext('2d');\r\n\r\n // Fill background with road color\r\n context.fillStyle = '#333333'; // Dark grey for road color\r\n context.fillRect(0, 0, size, size);\r\n\r\n // Draw lines in the middle\r\n const lineCount = 20;\r\n const lineWidth = 10;\r\n const lineHeight = size / lineCount;\r\n\r\n context.fillStyle = '#ffffff'; // White color for lines\r\n\r\n for (let i = 0; i < lineCount; i++) {\r\n context.fillRect(\r\n size / 2 - lineWidth / 2, // Center the line horizontally\r\n i * lineHeight * 2, // Space the lines evenly with gaps\r\n lineWidth, // Line width\r\n lineHeight // Line height\r\n );\r\n }\r\n\r\n // Create texture from canvas\r\n const texture = new THREE.CanvasTexture(canvas);\r\n return texture;\r\n}\r\n\r\nfunction createSidewalkTexture() {\r\n const size = 512; // Size of the texture\r\n const canvas = document.createElement('canvas');\r\n canvas.width = size;\r\n canvas.height = size;\r\n const context = canvas.getContext('2d');\r\n\r\n // Fill background with sidewalk color\r\n context.fillStyle = '#cccccc'; // Light grey for sidewalk color\r\n context.fillRect(0, 0, size, size);\r\n\r\n // Create texture from canvas\r\n const texture = new THREE.CanvasTexture(canvas);\r\n return texture;\r\n}\r\n\r\nfunction createRoad(width, length) {\r\n const geometry = new THREE.PlaneGeometry(width, length);\r\n const roadTexture = createRoadTexture(); // Create road texture\r\n roadTexture.wrapS = roadTexture.wrapT = THREE.RepeatWrapping;\r\n roadTexture.repeat.set(1, 10); // Repeat the texture for a longer road\r\n const material = new THREE.MeshStandardMaterial({ map: roadTexture });\r\n\r\n const road = new THREE.Mesh(geometry, material);\r\n road.rotation.x = -Math.PI / 2; // Rotate the road to be horizontal\r\n return road;\r\n}\r\n\r\nfunction createSidewalk(width, length) {\r\n const geometry = new THREE.PlaneGeometry(width, length);\r\n const sidewalkTexture = createSidewalkTexture(); // Create sidewalk texture\r\n sidewalkTexture.wrapS = sidewalkTexture.wrapT = THREE.RepeatWrapping;\r\n sidewalkTexture.repeat.set(1, 10); // Repeat the texture for a longer sidewalk\r\n const material = new THREE.MeshStandardMaterial({ map: sidewalkTexture });\r\n\r\n const sidewalk = new THREE.Mesh(geometry, material);\r\n sidewalk.rotation.x = -Math.PI / 2; // Rotate the sidewalk to be horizontal\r\n return sidewalk;\r\n}\r\n\r\nfunction createCityWithRoads(rows, cols, spacing) {\r\n const roadWidth = 10;\r\n const sidewalkWidth = 5;\r\n const roadLength = spacing;\r\n\r\n for (let i = 0; i < rows; i++) {\r\n for (let j = 0; j < cols; j++) {\r\n const width = Math.random() * 20 + 10;\r\n const height = Math.random() * 50 + 20;\r\n const depth = Math.random() * 20 + 10;\r\n const color = Math.random() * 0xffffff;\r\n const building = createBuilding(width, height, depth, color);\r\n building.position.set(\r\n i * spacing - (rows * spacing) / 2,\r\n height / 2,\r\n j * spacing - (cols * spacing) / 2\r\n );\r\n scene.add(building);\r\n\r\n // Add roads and sidewalks between buildings\r\n if (i < rows - 1) {\r\n const roadHorizontal = createRoad(roadWidth, roadLength);\r\n roadHorizontal.position.set(\r\n i * spacing - (rows * spacing) / 2 + spacing / 2,\r\n 0.1, // Slightly above the ground to avoid z-fighting\r\n j * spacing - (cols * spacing) / 2\r\n );\r\n scene.add(roadHorizontal);\r\n\r\n // Add sidewalks on both sides of the road\r\n const sidewalkLeft = createSidewalk(sidewalkWidth, roadLength);\r\n sidewalkLeft.position.set(\r\n i * spacing - (rows * spacing) / 2 + spacing / 2 - roadWidth / 2 - sidewalkWidth / 2,\r\n 0.1, // Slightly above the ground to avoid z-fighting\r\n j * spacing - (cols * spacing) / 2\r\n );\r\n scene.add(sidewalkLeft);\r\n\r\n const sidewalkRight = createSidewalk(sidewalkWidth, roadLength);\r\n sidewalkRight.position.set(\r\n i * spacing - (rows * spacing) / 2 + spacing / 2 + roadWidth / 2 + sidewalkWidth / 2,\r\n 0.1, // Slightly above the ground to avoid z-fighting\r\n j * spacing - (cols * spacing) / 2\r\n );\r\n scene.add(sidewalkRight);\r\n }\r\n\r\n if (j < cols - 1) {\r\n const roadVertical = createRoad(roadWidth, roadLength);\r\n roadVertical.rotation.z = Math.PI / 2; // Rotate vertical roads\r\n roadVertical.position.set(\r\n i * spacing - (rows * spacing) / 2,\r\n 0.1, // Slightly above the ground to avoid z-fighting\r\n j * spacing - (cols * spacing) / 2 + spacing / 2\r\n );\r\n scene.add(roadVertical);\r\n\r\n // Add sidewalks on both sides of the road\r\n const sidewalkTop = createSidewalk(sidewalkWidth, roadLength);\r\n sidewalkTop.rotation.z = Math.PI / 2; // Rotate vertical sidewalks\r\n sidewalkTop.position.set(\r\n i * spacing - (rows * spacing) / 2,\r\n 0.1, // Slightly above the ground to avoid z-fighting\r\n j * spacing - (cols * spacing) / 2 + spacing / 2 - roadWidth / 2 - sidewalkWidth / 2\r\n );\r\n scene.add(sidewalkTop);\r\n\r\n const sidewalkBottom = createSidewalk(sidewalkWidth, roadLength);\r\n sidewalkBottom.rotation.z = Math.PI / 2; // Rotate vertical sidewalks\r\n sidewalkBottom.position.set(\r\n i * spacing - (rows * spacing) / 2,\r\n 0.1, // Slightly above the ground to avoid z-fighting\r\n j * spacing - (cols * spacing) / 2 + spacing / 2 + roadWidth / 2 + sidewalkWidth / 2\r\n );\r\n scene.add(sidewalkBottom);\r\n }\r\n }\r\n }\r\n}\r\n\r\nfunction createWater(width, length) {\r\n const geometry = new THREE.PlaneGeometry(width, length);\r\n const waterTexture = new THREE.TextureLoader().load('https://threejsfundamentals.org/threejs/resources/images/water.jpg'); // Load water texture\r\n waterTexture.wrapS = waterTexture.wrapT = THREE.RepeatWrapping;\r\n waterTexture.repeat.set(100, 100); // Repeat the texture for a larger water area\r\n const material = new THREE.MeshStandardMaterial({ color: 0x40E0D0, transparent: true, opacity: 0.8 }); // Turquoise color\r\n\r\n const water = new THREE.Mesh(geometry, material);\r\n water.rotation.x = -Math.PI / 2; // Rotate the water to be horizontal\r\n water.position.y = -5; // Position the water slightly below ground level\r\n water.alwaysVisible = true; // Mark the water as always visible\r\n scene.add(water);\r\n}\r\n\r\nfunction createIsland() {\r\n const islandGeometry = new THREE.CylinderGeometry(500, 700, 100, 50);\r\n const islandMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513 }); // Brown color for the island\r\n const island = new THREE.Mesh(islandGeometry, islandMaterial);\r\n island.position.y = -50; // Sink the island halfway into the water\r\n island.alwaysVisible = true; // Mark the island as always visible\r\n scene.add(island);\r\n}\r\n\r\nfunction createStarryBackground() {\r\n const starTexture = new THREE.TextureLoader().load('https://threejsfundamentals.org/threejs/resources/images/starfield.jpg');\r\n const starGeometry = new THREE.SphereGeometry(5000, 64, 64); // Large sphere to cover the scene\r\n const starMaterial = new THREE.MeshBasicMaterial({\r\n map: starTexture,\r\n side: THREE.BackSide\r\n });\r\n\r\n const starField = new THREE.Mesh(starGeometry, starMaterial);\r\n starField.alwaysVisible = true; // Mark the stars as always visible\r\n scene.add(starField);\r\n}\r\n\r\nfunction createStarField() {\r\n const starGeometry = new THREE.BufferGeometry();\r\n const starMaterial = new THREE.PointsMaterial({ color: 0x888888 });\r\n\r\n const starVertices = [];\r\n const exclusionCenter = new THREE.Vector3(0, 200, 0); // Center of the exclusion sphere\r\n const exclusionRadius = 1000; // Radius of the exclusion sphere\r\n\r\n for (let i = 0; i < 10000; i++) {\r\n const x = THREE.MathUtils.randFloatSpread(7500);\r\n const y = Math.random() * 2000 + 150; // Ensure stars are at least 150 units above the ground\r\n const z = THREE.MathUtils.randFloatSpread(2000);\r\n\r\n const starPosition = new THREE.Vector3(x, y, z);\r\n if (starPosition.distanceTo(exclusionCenter) > exclusionRadius) {\r\n starVertices.push(x, y, z);\r\n }\r\n }\r\n\r\n starGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starVertices, 3));\r\n\r\n const stars = new THREE.Points(starGeometry, starMaterial);\r\n stars.alwaysVisible = true; // Mark the stars as always visible\r\n scene.add(stars);\r\n}\r\n\r\nfunction animate() {\r\n requestAnimationFrame(animate);\r\n\r\n if (!stopGrowth && cloudParticles.length > 0) {\r\n // Increase explosion size and base height, but stop at max sizes\r\n if (explosionSize < explosionMaxSize) {\r\n explosionSize += explosionGrowth;\r\n }\r\n\r\n if (baseHeight < baseMaxHeight) {\r\n baseHeight += baseGrowth;\r\n }\r\n\r\n // Expand the shockwave\r\n if (shockwave && shockwave.scale.x < explosionMaxSize / 10) {\r\n shockwave.scale.x += explosionGrowth / 10;\r\n shockwave.scale.y += explosionGrowth / 10;\r\n shockwave.material.opacity -= dissipationSpeed / 2; // Gradually fade the shockwave\r\n }\r\n } else if (cloudParticles.length > 0) {\r\n startDissipation = true; // Start dissipation when growth stops\r\n }\r\n\r\n if (cloudParticles.length > 0) {\r\n cloudParticles.forEach(cloud => {\r\n if (!startDissipation) {\r\n // Update cloud positions and scale based on max sizes\r\n if (cloud.position.y < baseMaxHeight) {\r\n cloud.position.y += baseGrowth;\r\n }\r\n if (cloud.scale.x < explosionSize / 10) {\r\n cloud.scale.set(explosionSize / 10, explosionSize / 10, explosionSize / 10);\r\n }\r\n } else {\r\n // Dissipate the explosion\r\n if (cloud.scale.x > 0) {\r\n cloud.scale.set(\r\n cloud.scale.x - dissipationSpeed,\r\n cloud.scale.y - dissipationSpeed,\r\n cloud.scale.z - dissipationSpeed\r\n );\r\n cloud.material.opacity -= dissipationSpeed; // Reduce opacity\r\n }\r\n }\r\n });\r\n }\r\n\r\n // Vaporize objects within the explosion radius\r\n scene.children.forEach(object => {\r\n if (object !== camera && object !== renderer && object !== shockwave && cloudParticles.indexOf(object) === -1 && (!object.alwaysVisible)) {\r\n const distance = object.position.distanceTo(new THREE.Vector3(0, 0, 0));\r\n if (distance < explosionSize && object.material && object.material.opacity !== undefined) {\r\n if (object.material.opacity > 0) {\r\n object.material.opacity -= vaporizationSpeed; // Reduce opacity\r\n if (object.material.opacity < 0) {\r\n object.material.opacity = 0; // Ensure opacity doesn't go below 0\r\n }\r\n } else {\r\n object.visible = false; // Hide the object when fully vaporized\r\n }\r\n }\r\n }\r\n });\r\n\r\n // Ensure alwaysVisible objects remain fully visible\r\n scene.children.forEach(object => {\r\n if (object.alwaysVisible) {\r\n object.visible = true;\r\n if (object.material && object.material.opacity !== undefined) {\r\n object.material.opacity = 1; // Ensure opacity is fully restored\r\n }\r\n }\r\n });\r\n\r\n renderer.render(scene, camera);\r\n}\r\n\r\n// Call the init function to set up the scene\r\ninit();","style.css":"body { margin: 0; background-color: #282c34; color: white; font-family: Arial, sans-serif; }\n\n#gameCanvas { display: block; margin: auto; }","index.html":"\n\n\n \n \n Nuclear Simulation Adventure\n \n \n \n\n\n \n\n"},"chat_history":[],"assets":[],"messages_sent":0,"comments":[],"steps":[]}