Maze Mayhem

{"name":"Gun Fight","description":"Conquer the Maze Boss, collect coins, and customize your character and guns in this deluxe edition! Navigate through challenging rooms, defeat powerful bosses, and overcome parkour obstacles in this 3D adventure.","photo":null,"view_count":10,"fork_count":0,"expires_at":null,"created_at":"2023-12-21T23:09:40.022484Z","updated_at":"2023-12-21T23:09:40.022486Z","user_id":2,"status":"PUBLIC","parent_id":94,"id":141,"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":"const canvas = document.querySelector('canvas');\nconst ctx = canvas.getContext('2d');\ncanvas.width = window.innerWidth;\ncanvas.height = window.innerHeight;\nconst blockSize = 50;\nconst speed = blockSize / 10;\nlet mouseX = 0;\nlet mouseY = 0;\nlet intendedDirection = null;\nlet bullets = [];\nlet enemies = [];\nconst mazeWidth = 20;\nconst mazeHeight = 10;\nlet gameOver = false;\nlet camera = {\n x: 0,\n y: 0,\n speed: 0.05 // Smoothing factor, smaller values make the camera slower\n};\n\nconst maze = [\n [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],\n [1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1],\n [1, 0, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1],\n [1, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1],\n [1, 0, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1],\n [1, 0, 0, 0, 1, 0, 0, 0, 1, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 1],\n [1, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1],\n [1, 0, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1],\n [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1],\n [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]\n];\n\nlet player = {\n x: blockSize + blockSize / 2,\n y: blockSize + blockSize / 2,\n radius: blockSize / 4,\n color: 'red'\n};\n\n// Existing bot\nenemies.push({\n x: ((mazeWidth / 2) * blockSize) + blockSize / 2,\n y: ((mazeHeight / 2) * blockSize) + blockSize / 2,\n vx: 0,\n vy: 0,\n radius: blockSize / 4,\n color: 'blue'\n});\n\n// Additional bots\nenemies.push({ x: blockSize * 3, y: blockSize * 3, vx: 0, vy: 0, radius: blockSize / 4, color: 'blue' });\nenemies.push({ x: blockSize * 5, y: blockSize * 2, vx: 0, vy: 0, radius: blockSize / 4, color: 'blue' });\nenemies.push({ x: blockSize * 6, y: blockSize * 5, vx: 0, vy: 0, radius: blockSize / 4, color: 'blue' });\nenemies.push({ x: blockSize * 8, y: blockSize * 3, vx: 0, vy: 0, radius: blockSize / 4, color: 'blue' });\n\nfunction movePlayer() {\n let nextPlayerX = player.x;\n let nextPlayerY = player.y;\n\n switch (intendedDirection) {\n case 'ArrowUp':\n nextPlayerY -= speed;\n break;\n case 'ArrowDown':\n nextPlayerY += speed;\n break;\n case 'ArrowLeft':\n nextPlayerX -= speed;\n break;\n case 'ArrowRight':\n nextPlayerX += speed;\n break;\n }\n\n // check for collisions with maze walls\n if (maze[Math.floor(nextPlayerY / blockSize)][Math.floor(nextPlayerX / blockSize)] !== 1) {\n player.x = nextPlayerX;\n player.y = nextPlayerY;\n }\n}\n\nfunction displayGameOverScreen() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.font = '50px Arial';\n ctx.fillStyle = 'black';\n ctx.textAlign = 'center';\n ctx.fillText('Game Over', canvas.width / 2, canvas.height / 2);\n\n const button = document.createElement('button');\n button.innerText = 'Try Again';\n button.className = 'btn btn-primary';\n button.style.position = 'absolute';\n button.style.left = '50%';\n button.style.top = '50%';\n button.style.transform = 'translate(-50%, -50%)';\n button.style.marginTop = '60px';\n document.body.appendChild(button);\n\n button.addEventListener('click', function () {\n document.location.reload();\n });\n}\n\nwindow.addEventListener('mousemove', function (e) {\n mouseX = e.clientX;\n mouseY = e.clientY;\n});\n\nwindow.addEventListener('keydown', function (e) {\n switch (e.key) {\n case 'ArrowUp':\n case 'ArrowDown':\n case 'ArrowLeft':\n case 'ArrowRight':\n intendedDirection = e.key;\n break;\n }\n});\n\nwindow.addEventListener('keyup', function (e) {\n if (e.key === intendedDirection) {\n intendedDirection = null;\n }\n});\n\nwindow.addEventListener('mousedown', function (e) {\n const dx = mouseX - player.x;\n const dy = mouseY - player.y;\n const angle = Math.atan2(dy, dx);\n const bulletSpeed = 10;\n const bullet = {\n x: player.x,\n y: player.y,\n vx: Math.cos(angle) * bulletSpeed,\n vy: Math.sin(angle) * bulletSpeed,\n radius: blockSize / 10\n };\n bullets.push(bullet);\n});\n\nfunction drawPlayer() {\n ctx.beginPath();\n ctx.arc(player.x, player.y, player.radius, 0, Math.PI * 2);\n ctx.fillStyle = player.color;\n ctx.fill();\n\n const dx = mouseX - player.x;\n const dy = mouseY - player.y;\n const angle = Math.atan2(dy, dx);\n const gunLength = blockSize / 2;\n ctx.beginPath();\n ctx.moveTo(player.x, player.y);\n ctx.lineTo(player.x + Math.cos(angle) * gunLength, player.y + Math.sin(angle) * gunLength);\n ctx.strokeStyle = 'black';\n ctx.lineWidth = blockSize / 8;\n ctx.stroke();\n}\n\nfunction drawMaze() {\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 ctx.fillStyle = 'black';\n ctx.fillRect(j * blockSize, i * blockSize, blockSize, blockSize);\n }\n }\n }\n}\n\nfunction update() {\n // Calculate the camera's new position\n let targetX = player.x - canvas.width / 6;\n let targetY = player.y - canvas.height / 6;\n camera.x += (targetX - camera.x) * camera.speed;\n camera.y += (targetY - camera.y) * camera.speed;\n\n // Save the current context\n ctx.save();\n\n // Translate and scale to simulate zooming in\n ctx.translate(-camera.x, -camera.y);\n ctx.scale(3, 3); \n\n // Clear the entire canvas\n ctx.clearRect(camera.x, camera.y, canvas.width, canvas.height);\n\n // Draw and update each enemy\n for (let i = 0; i < enemies.length; i++) {\n const enemy = enemies[i];\n ctx.beginPath();\n ctx.arc(enemy.x, enemy.y, enemy.radius, 0, Math.PI * 2);\n ctx.fillStyle = enemy.color;\n ctx.fill();\n }\n\n // Move and draw each bullet\n for (let i = bullets.length - 1; i >= 0; i--) {\n const bullet = bullets[i];\n const nextBulletX = bullet.x + bullet.vx;\n const nextBulletY = bullet.y + bullet.vy;\n\n // Check for collisions with maze walls\n if (maze[Math.floor(nextBulletY / blockSize)][Math.floor(nextBulletX / blockSize)] === 1) {\n bullets.splice(i, 1);\n continue;\n }\n\n bullet.x = nextBulletX;\n bullet.y = nextBulletY;\n\n // Check for collisions with enemies\n for (let j = enemies.length - 1; j >= 0; j--) {\n const enemy = enemies[j];\n const dx = bullet.x - enemy.x;\n const dy = bullet.y - enemy.y;\n const distance = Math.sqrt(dx * dx + dy * dy);\n if (distance < bullet.radius + enemy.radius) {\n bullets.splice(i, 1);\n enemies.splice(j, 1);\n break;\n }\n }\n\n // Draw the bullet\n ctx.beginPath();\n ctx.arc(bullet.x, bullet.y, bullet.radius, 0, Math.PI * 2);\n ctx.fillStyle = 'black';\n ctx.fill();\n }\n\n // Move and update the enemy\n for (let i = 0; i < enemies.length; i++) {\n const enemy = enemies[i];\n const dx = player.x - enemy.x;\n const dy = player.y - enemy.y;\n const distance = Math.sqrt(dx * dx + dy * dy);\n\n const nextEnemyX = enemy.x + (dx / distance) * speed;\n const nextEnemyY = enemy.y + (dy / distance) * speed;\n\n // Check for collisions with maze walls\n if (maze[Math.floor(nextEnemyY / blockSize)][Math.floor(nextEnemyX / blockSize)] === 1) {\n continue;\n }\n\n if (distance > player.radius + enemy.radius) {\n enemy.vx = (dx / distance) * speed;\n enemy.vy = (dy / distance) * speed;\n } else {\n enemy.vx = 0;\n enemy.vy = 0;\n }\n enemy.x += enemy.vx;\n enemy.y += enemy.vy;\n }\n\n // Check for collisions with enemies\n for (let j = enemies.length - 1; j >= 0; j--) {\n const enemy = enemies[j];\n const dx = player.x - enemy.x;\n const dy = player.y - enemy.y;\n const distance = Math.sqrt(dx * dx + dy * dy);\n if (distance < player.radius + enemy.radius) {\n gameOver = true;\n break;\n }\n }\n\n if (gameOver) {\n displayGameOverScreen();\n return;\n }\n\n drawMaze();\n drawPlayer();\n movePlayer();\n\n // Restore the context\n ctx.restore();\n\n requestAnimationFrame(update);\n}\n\nupdate();","style.css":"body {\n background-color: #f8f9fa;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n}\n\ncanvas {\n border: 1px solid #6c757d;\n}\n\nbutton {\n font-size: 20px;\n padding: 10px 20px;\n margin-top: 20px;\n background-color: #6c757d;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n}","index.html":"\n\n\n\n \n \n Maze Mayhem\n \n \n\n\n\n

\n \n\n\n"},"chat_history":[],"assets":[],"messages_sent":0,"comments":[],"steps":[{"title":"Find skins in chests or purchase at the shop","step_number":0,"complete":false,"updated_at":"2023-12-21T23:09:40.026012","id":980,"instruction":"Players can discover character and gun skins in chests within each room or purchase them at the in-game shop, adding a sense of discovery and achievement to the game.","created_at":"2023-12-19T18:03:40.383747","project_id":141},{"title":"Introduce character and gun skins","step_number":1,"complete":false,"updated_at":"2023-12-21T23:09:40.026092","id":981,"instruction":"Unlock and customize character and gun skins using collected coins, allowing players to personalize their appearance and gameplay experience.","created_at":"2023-12-19T18:03:40.383806","project_id":141},{"title":"Differentiate enemy coin drops based on strength","step_number":2,"complete":false,"updated_at":"2023-12-21T23:09:40.026139","id":982,"instruction":"Enemies will drop specific types of coins based on their strength, providing strategic choices for players to prioritize defeating certain enemies.","created_at":"2023-12-19T18:03:40.383849","project_id":141},{"title":"Add Temple Run-like traps for parkour element","step_number":3,"complete":false,"updated_at":"2023-12-21T23:09:40.026184","id":983,"instruction":"Introduce reflex-based challenges with Temple Run-like traps in the pathways for players to navigate through.","created_at":"2023-12-19T18:03:40.383889","project_id":141},{"title":"Develop player movement and shooting controls","step_number":4,"complete":false,"updated_at":"2023-12-21T23:09:40.026227","id":984,"instruction":"Implement player movement and shooting controls to navigate through the maze, defeat enemies, and collect coins.","created_at":"2023-12-19T18:03:40.383928","project_id":141},{"title":"Design visual cosmetics for characters and guns","step_number":5,"complete":false,"updated_at":"2023-12-21T23:09:40.026270","id":985,"instruction":"Create a variety of visual cosmetics such as character and gun skins, which can be unlocked using collected coins.","created_at":"2023-12-19T18:03:40.383969","project_id":141},{"title":"Integrate scoring and level progression system","step_number":6,"complete":false,"updated_at":"2023-12-21T23:09:40.026314","id":986,"instruction":"Incorporate a scoring system and level progression to track player achievements and advancement through the game.","created_at":"2023-12-19T18:03:40.384009","project_id":141},{"title":"Create 3D graphics using WebGL","step_number":7,"complete":false,"updated_at":"2023-12-21T23:09:40.026357","id":987,"instruction":"Implement 3D graphics to provide an immersive game environment.","created_at":"2023-12-19T18:03:40.384048","project_id":141}]}