Monster Fight

{"name":"Monster Battle Arena","description":"Jump into the Monster Battle Arena where a brave blue character fights against emerging monsters from various obstacles! With 5 lives, each defeat brings a thrilling challenge to reclaim victory. Can you navigate the waves of monsters and come out on top?","photo":null,"view_count":1,"fork_count":0,"expires_at":null,"created_at":"2024-12-02T12:07:05.697954Z","updated_at":"2024-12-02T12:07:05.697957Z","user_id":257,"status":"PRIVATE","parent_id":4816,"id":4818,"user":{"username":"mustafayamin","id":257,"password_hash":"$2b$12$OtTvu8fk3N/WedeVn5FKZ.VYt9V7.QBjXz6xq6Dp1nrVJzPjMWuTi","updated_at":"2024-12-02T09:12:18.311323Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":"mustafayamin5@gmail.com","recess_id":null,"created_at":"2024-12-02T09:12:18.311319Z","reset_token":null,"stripe_customer_id":null,"seats":null},"code":{"script.js":"const canvas = document.getElementById(\"gameCanvas\");\nconst ctx = canvas.getContext(\"2d\");\n\n// Adapt canvas size\ncanvas.width = window.innerWidth;\ncanvas.height = window.innerHeight;\n\nconst keys = {};\nconst bullets = [];\nconst monsters = [];\nlet player = { x: canvas.width / 2, y: canvas.height - 50, width: 50, height: 50 };\nlet gameOver = false;\n\n// Mobile controls\nconst controls = document.getElementById(\"controls\");\nconst isMobile = /Mobi|Android/i.test(navigator.userAgent);\nif (isMobile) controls.style.display = \"block\";\n\ndocument.getElementById(\"left\").addEventListener(\"click\", () => (keys[\"ArrowLeft\"] = true));\ndocument.getElementById(\"right\").addEventListener(\"click\", () => (keys[\"ArrowRight\"] = true));\ndocument.getElementById(\"shoot\").addEventListener(\"click\", () => shootBullet());\n\n// Event listeners for keyboard\nwindow.addEventListener(\"keydown\", (e) => (keys[e.key] = true));\nwindow.addEventListener(\"keyup\", (e) => (keys[e.key] = false));\n\n// Functions\nfunction drawPlayer() {\n ctx.fillStyle = \"purple\";\n ctx.fillRect(player.x, player.y, player.width, player.height);\n}\n\nfunction drawBullet(bullet) {\n ctx.fillStyle = \"orange\";\n ctx.fillRect(bullet.x, bullet.y, 5, 10);\n}\n\nfunction drawMonster(monster) {\n ctx.fillStyle = \"red\";\n ctx.fillRect(monster.x, monster.y, monster.size, monster.size);\n}\n\nfunction shootBullet() {\n bullets.push({ x: player.x + player.width / 2 - 2.5, y: player.y - 10 });\n}\n\nfunction spawnMonster() {\n const size = Math.random() * 30 + 20;\n monsters.push({\n x: Math.random() * (canvas.width - size),\n y: -size,\n size: size,\n speed: Math.random() * 2 + 1,\n });\n}\n\nfunction update() {\n if (gameOver) return;\n\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n // Player movement\n if (keys[\"ArrowLeft\"] && player.x > 0) player.x -= 5;\n if (keys[\"ArrowRight\"] && player.x < canvas.width - player.width) player.x += 5;\n\n // Draw and update bullets\n bullets.forEach((bullet, index) => {\n bullet.y -= 5;\n drawBullet(bullet);\n\n // Remove off-screen bullets\n if (bullet.y < 0) bullets.splice(index, 1);\n });\n\n // Draw and update monsters\n monsters.forEach((monster, index) => {\n monster.y += monster.speed;\n drawMonster(monster);\n\n // Check for collision with player\n if (\n monster.x < player.x + player.width &&\n monster.x + monster.size > player.x &&\n monster.y < player.y + player.height &&\n monster.y + monster.size > player.y\n ) {\n gameOver = true;\n alert(\"Game Over!\");\n }\n\n // Remove off-screen monsters\n if (monster.y > canvas.height) monsters.splice(index, 1);\n\n // Check for collision with bullets\n bullets.forEach((bullet, bIndex) => {\n if (\n bullet.x > monster.x &&\n bullet.x < monster.x + monster.size &&\n bullet.y > monster.y &&\n bullet.y < monster.y + monster.size\n ) {\n monsters.splice(index, 1);\n bullets.splice(bIndex, 1);\n }\n });\n });\n\n drawPlayer();\n\n requestAnimationFrame(update);\n}\n\n// Spawn monsters every 2 seconds\nsetInterval(spawnMonster, 1000);\n\nupdate();","style.css":"body {\r\n margin: 0;\r\n overflow: hidden;\r\n background: url('https://img.freepik.com/premium-vector/pixel-art-retro-wave-scifi-background-with-sunrise-sunset-pixel-art-80s-pixel-art-8bit-game_148553-568.jpg') no-repeat center center fixed;\r\n background-size: cover;\r\n}\r\n\r\ncanvas {\r\n display: block;\r\n}\r\n\r\n\r\n#controls {\r\n display: none;\r\n position: fixed;\r\n bottom: 10px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 90%;\r\n text-align: center;\r\n}\r\n\r\nbutton {\r\n width: 60px;\r\n height: 60px;\r\n margin: 5px;\r\n font-size: 18px;\r\n background: #444;\r\n color: white;\r\n border: none;\r\n border-radius: 50%;\r\n}","index.html":"\n\n\n\n \n \n Monster Fight\n \n\n\n\n

\n \n \n \n

\n \n\n\n"},"chat_history":[],"assets":[{"project_id":4818,"created_at":"2024-12-02T13:13:53.430208Z","resource_type":"image","id":50536,"cloudinary_id":"fxqzjhwujnmatylkjofm","name":"zombie1_walk1","deleted":false},{"project_id":4818,"created_at":"2024-12-02T12:24:43.593102Z","resource_type":"image","id":50534,"cloudinary_id":"q019y3pgfnxjblmxwdoc","name":"dark demon","deleted":false},{"project_id":4818,"created_at":"2024-12-02T12:22:06.635302Z","resource_type":"video","id":50533,"cloudinary_id":"egpgkprdp7dywnymrom3","name":"beatSynthPlusDrums","deleted":false}],"messages_sent":0,"comments":[],"steps":[]}