Canvas Game

{"name":"Chat.gpt's game","description":"Dodge the falling emojis and see how long you can survive in this fast-paced emoji dodge game!","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/ig9q5x4gbdd3vc6y5hsr","view_count":12,"fork_count":0,"expires_at":null,"created_at":"2024-07-12T17:14:51.526397Z","updated_at":"2024-07-19T17:11:01.983519Z","user_id":8,"status":"PUBLIC","parent_id":null,"id":2185,"user":{"username":"baian","id":8,"password_hash":null,"updated_at":"2023-12-12T14:12:57.257633Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":null,"recess_id":"3f5f8324-2a21-d8d3-2d39-c7ba5cf76110","created_at":"2023-12-12T14:12:57.257630Z","reset_token":null,"stripe_customer_id":null,"seats":null},"code":{"script.js":"const canvas = document.getElementById('gameCanvas');\r\nconst ctx = canvas.getContext('2d');\r\n\r\nconst player = {\r\n x: canvas.width / 2 - 25,\r\n y: canvas.height - 60,\r\n width: 50,\r\n height: 50,\r\n speed: 8,\r\n dx: 0\r\n};\r\n\r\nconst items = [];\r\nconst itemFrequency = 1500;\r\nlet itemSpeed = 3;\r\nlet score = 0;\r\nlet lives = 3;\r\nlet level = 1;\r\nlet isGameOver = false;\r\n\r\nfunction drawPlayer() {\r\n ctx.fillStyle = 'blue';\r\n ctx.fillRect(player.x, player.y, player.width, player.height);\r\n}\r\n\r\nfunction drawItem(item) {\r\n ctx.fillStyle = 'red';\r\n ctx.fillRect(item.x, item.y, item.width, item.height);\r\n}\r\n\r\nfunction clear() {\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n}\r\n\r\nfunction newPos() {\r\n player.x += player.dx;\r\n\r\n if (player.x < 0) {\r\n player.x = 0;\r\n } else if (player.x + player.width > canvas.width) {\r\n player.x = canvas.width - player.width;\r\n }\r\n}\r\n\r\nfunction moveRight() {\r\n player.dx = player.speed;\r\n}\r\n\r\nfunction moveLeft() {\r\n player.dx = -player.speed;\r\n}\r\n\r\nfunction keyDown(e) {\r\n if (e.key === 'ArrowRight' || e.key === 'Right') {\r\n moveRight();\r\n } else if (e.key === 'ArrowLeft' || e.key === 'Left') {\r\n moveLeft();\r\n }\r\n}\r\n\r\nfunction keyUp(e) {\r\n if (e.key === 'ArrowRight' || e.key === 'Right' || e.key === 'ArrowLeft' || e.key === 'Left') {\r\n player.dx = 0;\r\n }\r\n}\r\n\r\nfunction generateItem() {\r\n const x = Math.random() * (canvas.width - 30);\r\n items.push({ x: x, y: 0, width: 30, height: 30 });\r\n}\r\n\r\nfunction updateItems() {\r\n for (let i = 0; i < items.length; i++) {\r\n items[i].y += itemSpeed;\r\n if (items[i].y + items[i].height > canvas.height) {\r\n items.splice(i, 1);\r\n i--;\r\n lives--;\r\n if (lives === 0) {\r\n isGameOver = true;\r\n }\r\n continue;\r\n }\r\n\r\n if (\r\n player.x < items[i].x + items[i].width &&\r\n player.x + player.width > items[i].x &&\r\n player.y < items[i].y + items[i].height &&\r\n player.height + player.y > items[i].y\r\n ) {\r\n items.splice(i, 1);\r\n i--;\r\n score++;\r\n if (score % 10 === 0) {\r\n level++;\r\n itemSpeed += 0.5;\r\n }\r\n }\r\n }\r\n}\r\n\r\nfunction updateScore() {\r\n ctx.fillStyle = 'white';\r\n ctx.font = '20px Arial';\r\n ctx.fillText('Score: ' + score, 10, 30);\r\n}\r\n\r\nfunction updateLives() {\r\n ctx.fillStyle = 'white';\r\n ctx.font = '20px Arial';\r\n ctx.fillText('Lives: ' + lives, 10, 60);\r\n}\r\n\r\nfunction updateLevel() {\r\n ctx.fillStyle = 'white';\r\n ctx.font = '20px Arial';\r\n ctx.fillText('Level: ' + level, 10, 90);\r\n}\r\n\r\nfunction drawGameOver() {\r\n ctx.fillStyle = 'red';\r\n ctx.font = '40px Arial';\r\n ctx.fillText('Game Over', canvas.width / 2 - 100, canvas.height / 2);\r\n}\r\n\r\nfunction update() {\r\n if (isGameOver) {\r\n drawGameOver();\r\n return;\r\n }\r\n clear();\r\n drawPlayer();\r\n updateItems();\r\n items.forEach(drawItem);\r\n newPos();\r\n updateScore();\r\n updateLives();\r\n updateLevel();\r\n\r\n requestAnimationFrame(update);\r\n}\r\n\r\ndocument.addEventListener('keydown', keyDown);\r\ndocument.addEventListener('keyup', keyUp);\r\nsetInterval(generateItem, itemFrequency);\r\n\r\nupdate();\r\n","style.css":"","index.html":"\n\n\n\n \n \n Canvas Game\n \n\n\n\n

\n \n\n\n"},"chat_history":[{"code_id":116640,"deleted":0,"input_tokens":null,"id":56709,"project_id":2185,"sender":"human","message":"Let's get started!","created_at":"2024-07-12T17:14:54.209551Z","output_tokens":null},{"code_id":116640,"deleted":0,"input_tokens":null,"id":56710,"project_id":2185,"sender":"ai","message":"

\n# Reasoning\nThe project is in its very early stages, with only the canvas setup defined. We need to plan out the features and steps for the game development.\n

\n\n

\n# Answer:\n

\n\nAwesome! Let's make this emoji dodge game super fun! 😊\n\nTo get started, can you tell me a bit more about the game? Here are a few questions to help us plan:\n\n1. What emoji do you want the player to control? \n2. What kind of emojis will be falling from the top?\n3. How do you want the player to control the emoji? (Arrow keys, WASD, mouse, etc.)\n4. Do you have any ideas for scoring or any special features you want to include?\n\nOnce we have these details, we'll create a list of features to implement!","created_at":"2024-07-12T17:14:54.242838Z","output_tokens":null},{"code_id":116646,"deleted":0,"input_tokens":null,"id":56711,"project_id":2185,"sender":"human","message":"give me the default index.html","created_at":"2024-07-12T17:23:07.093513Z","output_tokens":null},{"code_id":116646,"deleted":0,"input_tokens":null,"id":56712,"project_id":2185,"sender":"ai","message":"Sure! Here's a simple default `index.html` that sets up a basic webpage with a canvas for your game:\n\n```html\n\n\n\n \n \n Emoji Dodge Game\n \n\n\n \n\n\n```\n\nThis will create a basic HTML page that centers a canvas element on the screen. The canvas is where we'll draw our game. The `script.js` file is where we'll write the game logic.\n\nLet me know if you need any changes or if you are ready to move on to the next step!","created_at":"2024-07-12T17:23:07.140058Z","output_tokens":null}],"assets":[{"project_id":2185,"created_at":"2024-07-12T17:51:07.841478Z","resource_type":"image","id":12630,"cloudinary_id":"ig9q5x4gbdd3vc6y5hsr","name":"fff","deleted":false}],"messages_sent":2,"comments":[],"steps":[]}