Nuclear Simulation Adventure

{"name":"Nuclear Simulation Adventure","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":2,"fork_count":0,"expires_at":null,"created_at":"2024-09-05T21:07:48.593705Z","updated_at":"2024-09-05T21:07:48.593707Z","user_id":166,"status":"PRIVATE","parent_id":2902,"id":3181,"user":{"username":"m_ivlev","id":166,"password_hash":"$2b$12$lM.SwMhsrEJrs7ZjNyj9e.FOyWqAZgNBSeOEkB8gCGEsXkmGPZLu6","updated_at":"2024-08-05T03:36:08.774314Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":"markivlev@gmail.com","recess_id":"38a987b1-569d-47cc-ae61-0c84198aa65c","created_at":"2024-08-05T03:36:08.774307Z","reset_token":null,"stripe_customer_id":null,"seats":null},"code":{"script.js":"\r\nconst vaporizationRadius = 200; // Define the radius within which buildings will be vaporized\r\nlet scene, camera, renderer;\r\nlet explosionSize = 1;\r\nlet explosionGrowth = 0.2; // Increase growth for a more dramatic effect\r\nlet explosionMaxSize;\r\nlet baseHeight = 10;\r\nlet baseGrowth = 0.2; // Increase growth speed\r\nlet baseMaxHeight;\r\nlet cloudParticles = [];\r\nlet stopGrowth = false;\r\nlet dissipationSpeed = 0.01; // Speed at which the explosion dissipates\r\nlet startDissipation = false; // Flag to check if dissipation has started\r\nlet water;\r\nlet shockwave;\r\nlet vaporizationSpeed = 0.05; // Speed at which objects get vaporized\r\nlet nuke, nukeExploded = false;\r\n\r\nfunction createNuke(x, y, z) {\r\n const nukeGeometry = new THREE.CylinderGeometry(10, 10, 30, 32);\r\n const nukeMaterial = new THREE.MeshStandardMaterial({ color: 0xffff00 }); // Yellow color\r\n nuke = new THREE.Mesh(nukeGeometry, nukeMaterial);\r\n nuke.position.set(x, y, z);\r\n scene.add(nuke);\r\n}\r\n\r\nfunction init() {\r\n // Create scene\r\n scene = new THREE.Scene();\r\n\r\n // Add fog to the scene\r\n scene.fog = new THREE.FogExp2(0x000000, 0.05); // Black fog with a density of 0.05\r\n\r\n // Create camera\r\n camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 5000);\r\n camera.position.set(0, 1000, 0); // Position the camera high above the scene\r\n camera.lookAt(0, 0, 0); // Make the camera look at the center of the scene\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 // Set explosion and base max sizes\r\n explosionMaxSize = Math.min(window.innerWidth, window.innerHeight) / 4; // Make the explosion smaller\r\n baseMaxHeight = Math.min(window.innerWidth, window.innerHeight) / 3; // Reduce base height\r\n\r\n // Create mushroom cloud\r\n createMushroomCloud();\r\n\r\n // Create water around the island\r\n createWater(2000, 2000); // Large water plane\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 starry background\r\n createStarryBackground();\r\n\r\n // Create star field\r\n createStarField();\r\n\r\n // Create the nuke\r\n createNuke(0, 50, 0); // Place the nuke above the ground\r\n\r\n // Start animation loop\r\n animate();\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 // 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.8\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 // Adjust positions to form a ring shape\r\n const angle = (i / 10) * Math.PI * 2; // Divide the circle into 10 segments\r\n const x = Math.cos(angle) * 15;\r\n const z = Math.sin(angle) * 15;\r\n const y = i * 15;\r\n\r\n cloud.position.set(x, y, z);\r\n\r\n cloudParticles.push(cloud);\r\n scene.add(cloud);\r\n }\r\n\r\n // Create the cap of the mushroom cloud as a ring\r\n const ringRadius = 50; // Radius of the ring\r\n const ringThickness = 20; // Thickness of the ring\r\n\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.8\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 // Adjust positions to form a hollow ring shape\r\n const angle = (i / 20) * Math.PI * 2; // Divide the circle into 20 segments\r\n const x = Math.cos(angle) * ringRadius;\r\n const z = Math.sin(angle) * ringRadius;\r\n const y = baseMaxHeight / 2 + Math.random() * ringThickness - ringThickness / 2; // Randomly distribute within the thickness\r\n\r\n cloud.position.set(x, y, z);\r\n\r\n cloudParticles.push(cloud);\r\n scene.add(cloud);\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.5,\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 scene.add(shockwave);\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 = '#00008B'; // Dark blue 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 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(4, 4); // 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.isBackground = true; // Mark as background element\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.isBackground = true; // Mark as background element\r\n scene.add(island);\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 createStarryBackground() {\r\n const starTexture = new THREE.TextureLoader().load('https://threejsfundamentals.org/threejs/resources/images/starfield.jpg');\r\n const starGeometry = new THREE.SphereGeometry(2000, 64, 64);\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.isBackground = true; // Mark as background element\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 for (let i = 0; i < 10000; i++) {\r\n const x = THREE.MathUtils.randFloatSpread(2000);\r\n const y = THREE.MathUtils.randFloatSpread(2000);\r\n const z = THREE.MathUtils.randFloatSpread(2000);\r\n starVertices.push(x, y, z);\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.isBackground = true; // Mark as background element\r\n scene.add(stars);\r\n}\r\n\r\nfunction animate() {\r\n requestAnimationFrame(animate);\r\n\r\n if (!stopGrowth && nukeExploded) {\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.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 (!nukeExploded && spacebarPressed) {\r\n // Check if nuke should explode\r\n const distance = nuke.position.distanceTo(new THREE.Vector3(0, 0, 0));\r\n if (distance < vaporizationRadius) {\r\n nukeExploded = true;\r\n stopGrowth = false;\r\n startDissipation = false;\r\n explosionSize = 1;\r\n baseHeight = 10;\r\n setTimeout(() => {\r\n stopGrowth = true;\r\n }, 4000);\r\n }\r\n } else {\r\n startDissipation = true; // Start dissipation when growth stops\r\n }\r\n\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 // Vaporize objects within the explosion radius\r\n scene.children.forEach(object => {\r\n if (object !== camera && object !== renderer && object !== shockwave && object !== nuke && cloudParticles.indexOf(object) === -1) {\r\n const distance = object.position.distanceTo(new THREE.Vector3(0, 0, 0));\r\n if (!object.isBackground && distance < vaporizationRadius && 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 // Gradually reduce fog density\r\n if (scene.fog && scene.fog.density > 0) {\r\n scene.fog.density -= 0.0001; // Adjust this value to control the fade-out speed\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();\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n","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":[{"deleted":0,"code_id":148168,"input_tokens":null,"id":72637,"project_id":3181,"sender":"human","message":"Let's get started!","created_at":"2024-09-05T23:00:40.368958Z","output_tokens":null},{"deleted":0,"code_id":148168,"input_tokens":null,"id":72638,"project_id":3181,"sender":"ai","message":"Great! 🚀 Let's refine and expand your nuclear simulation adventure. Here are a few ideas for features we could add:\n\n1. **Interactive Controls**: Allow the player to trigger the nuke explosion with a button press, like the spacebar.\n2. **Visual Effects**: Enhance the visual effects of the explosion, such as adding a shockwave animation or more detailed vaporization effects.\n3. **Scoring System**: Implement a scoring system where the player earns points for successfully navigating challenges.\n4. **Timer**: Add a countdown timer to increase the tension and urgency of defusing the bomb.\n5. **Challenges**: Add mini-challenges or puzzles that the player must complete to prevent the explosion.\n\nWhich features would you like to start with? Or do you have any other ideas you want to implement? Let me know!","created_at":"2024-09-05T23:00:40.376625Z","output_tokens":null}],"assets":[],"messages_sent":1,"comments":[],"steps":[]}