3D Maze Game

{"name":"3D Maze","description":"Build and play with your own custom 3D lego models in an immersive game environment!","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/uwofjfeoddme18jrthhd","view_count":19,"fork_count":2,"expires_at":null,"created_at":"2024-06-08T18:53:08.991138Z","updated_at":"2024-06-08T20:03:28.291498Z","user_id":70,"status":"PUBLIC","parent_id":1744,"id":1782,"user":{"photo":null,"email":"kristen@jippity.pro","recess_id":"0c22a63e-e8fa-453f-a493-d113532a13c2","created_at":"2024-03-23T19:20:56.974481Z","reset_token":"GD2dODEjNUbAH88Yx-1HMTa4uc_OUtvTa0c5D-VKUhw","stripe_customer_id":"cus_RPbovGjLueUufv","seats":100,"username":"kris10","id":70,"password_hash":"$2b$12$abwA8Crfrc22ANEFpZErHeQDLvhr9RJOD0lMNLh7PJGrAn7M//qEC","updated_at":"2024-03-23T19:20:56.974485Z","reset_token_expiry":"2025-01-14T23:32:05.455609","subscription_status":"active"},"code":{"script.js":"let scene, camera, renderer;\nlet player;\nlet maze = [\n [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],\n [1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1],\n [1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1],\n [1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1],\n [1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1],\n [1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1],\n [1, 1, 1, 0, 1, 0, 1, 0, 1, 1, 1],\n [1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1],\n [1, 0, 1, 1, 1, 1, 1, 0, 1, 0, 1],\n [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],\n [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],\n];\nlet mazeSize = 11;\nlet playerSpeed = 0.1;\nlet playerRadius = 0.25;\nlet cameraOffset = new THREE.Vector3(0, 3, 2); // Offset of the camera from the player\n\nfunction init() {\n // Create the scene\n scene = new THREE.Scene();\n\n // Create the player\n const playerGeometry = new THREE.SphereGeometry(playerRadius, 32, 32);\n const playerMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 });\n player = new THREE.Mesh(playerGeometry, playerMaterial);\n player.position.set(7, playerRadius, 8);\n scene.add(player);\n\n // Create a camera\n camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);\n camera.position.copy(player.position).add(cameraOffset);\n camera.lookAt(player.position);\n\n // Create the renderer\n renderer = new THREE.WebGLRenderer();\n renderer.setSize(window.innerWidth, window.innerHeight);\n document.body.appendChild(renderer.domElement);\n\n // Create a light\n const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);\n scene.add(ambientLight);\n\n const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);\n directionalLight.position.set(10, 10, 10);\n scene.add(directionalLight);\n\n // Create the maze\n createMaze();\n\n // Handle window resize\n window.addEventListener('resize', onWindowResize, false);\n\n // Handle keyboard input\n document.addEventListener('keydown', onDocumentKeyDown, false);\n\n animate();\n}\n\nfunction createMaze() {\n const wallMaterial = new THREE.MeshNormalMaterial();\n\n for (let i = 0; i < maze.length; i++) {\n for (let j = 0; j < maze[i].length; j++) {\n if (maze[i][j] === 1) {\n const wallGeometry = new THREE.BoxGeometry(1, 1, 1);\n const wallMesh = new THREE.Mesh(wallGeometry, wallMaterial);\n wallMesh.position.set(j, 0.5, i);\n scene.add(wallMesh);\n }\n }\n }\n\n const floorGeometry = new THREE.PlaneGeometry(mazeSize, mazeSize);\n const floorMaterial = new THREE.MeshStandardMaterial({ color: 0x808080 });\n const floor = new THREE.Mesh(floorGeometry, floorMaterial);\n floor.rotation.x = -Math.PI / 2;\n floor.position.set(mazeSize / 2 - 0.5, 0, mazeSize / 2 - 0.5);\n scene.add(floor);\n}\n\nfunction onWindowResize() {\n camera.aspect = window.innerWidth / window.innerHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(window.innerWidth, window.innerHeight);\n}\n\nfunction onDocumentKeyDown(event) {\n switch (event.key) {\n case 'w':\n movePlayer(0, -playerSpeed);\n break;\n case 's':\n movePlayer(0, playerSpeed);\n break;\n case 'a':\n movePlayer(-playerSpeed, 0);\n break;\n case 'd':\n movePlayer(playerSpeed, 0);\n break;\n }\n}\n\nfunction movePlayer(deltaX, deltaZ) {\n const newX = player.position.x + deltaX;\n const newZ = player.position.z + deltaZ;\n\n // Check for collisions with maze walls\n if (!checkCollision(newX, newZ)) {\n player.position.x = newX;\n player.position.z = newZ;\n }\n}\n\nfunction checkCollision(x, z) {\n const mazeX = Math.floor(x + 0.5);\n const mazeZ = Math.floor(z + 0.5);\n\n // Check if the player is within the maze bounds\n if (mazeX < 0 || mazeX >= mazeSize || mazeZ < 0 || mazeZ >= mazeSize) {\n return true;\n }\n\n // Check for collision considering the player radius\n return (\n maze[mazeZ][mazeX] === 1 ||\n maze[Math.floor(z - playerRadius + 0.5)][Math.floor(x + 0.5)] === 1 ||\n maze[Math.floor(z + playerRadius + 0.5)][Math.floor(x + 0.5)] === 1 ||\n maze[Math.floor(z + 0.5)][Math.floor(x - playerRadius + 0.5)] === 1 ||\n maze[Math.floor(z + 0.5)][Math.floor(x + playerRadius + 0.5)] === 1\n );\n}\n\nfunction animate() {\n requestAnimationFrame(animate);\n\n // Update the camera position to follow the player\n camera.position.copy(player.position).add(cameraOffset);\n camera.lookAt(player.position);\n\n renderer.render(scene, camera);\n}\n\n// Initialize the scene\ninit();\n","style.css":"body {\n margin: 0;\n overflow: hidden;\n font-family: Arial, sans-serif;\n}\n\n#info {\n position: absolute;\n top: 10px;\n width: 100%;\n text-align: center;\n color: #fff;\n font-weight: bold;\n background-color: rgba(0, 0, 0, 0.5);\n padding: 10px;\n}\n","index.html":"\n\n\n\n \n \n 3D Maze Game\n \n\n\n\n \n \n \n\n\n"},"chat_history":[],"assets":[{"cloudinary_id":"uwofjfeoddme18jrthhd","name":"maze-1","deleted":false,"id":7039,"created_at":"2024-06-08T20:02:31.186859Z","project_id":1782,"resource_type":"image"}],"messages_sent":0,"comments":[],"steps":[]}