Maze Mania: WASD Edition

{"name":"Maze Mania: V2","description":"Navigate through a challenging maze using the WASD keys! Race against the clock, avoid obstacles, and reach the end to emerge victorious in Maze Mania: WASD Edition.","photo":null,"view_count":7,"fork_count":0,"expires_at":null,"created_at":"2024-01-09T21:55:11.501798Z","updated_at":"2024-01-09T21:56:37.824017Z","user_id":8,"status":"PUBLIC","parent_id":310,"id":317,"user":{"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,"username":"baian","id":8,"password_hash":null,"updated_at":"2023-12-12T14:12:57.257633Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"// Global variables\nlet player;\nlet playerSize = 30;\nlet playerSpeed = 5;\nlet yellowEnemies = [];\nlet enemySpeed = 3;\n\nlet maze = [\n [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],\n [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1],\n [1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1],\n [1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0],\n [1, 0, 1, 0, 1, 1, 1, 1, 1, 0, 0, 1, 0, 1, 1],\n [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1],\n [1, 0, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1],\n [1, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 1],\n [1, 0, 1, 0, 1, 1, 1, 1, 1, 0, 0, 1, 0, 1, 1],\n [1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 0, 0, 1],\n [1, 0, 1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 0, 0, 1],\n [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1],\n [1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1, 0, 1],\n [1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1],\n [1, 0, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1],\n [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1],\n [1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1, 0, 1],\n [1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1],\n [1, 0, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1],\n [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], /* Your maze array... */\n];\n\nlet cellSize = 100;\n\nlet enemies = [];\n\n// In your setup function\nfunction setup() {\n createCanvas(1500, 1500);\n background(220);\n player = createVector(cellSize * 1.5, cellSize * 1.5); // place player in cell (1, 1)\n enemies = [\n createVector(cellSize * 3, cellSize * 3),\n createVector(cellSize * 3, cellSize * 6),\n createVector(cellSize * 6, cellSize * 3)\n ]; // place enemies in different cells\n yellowEnemies = [\n createVector(cellSize * 5, cellSize * 5),\n createVector(cellSize * 7, cellSize * 7)\n ]; // place yellow enemies in different cells\n}\n\nfunction draw() {\n background(220);\n\n // Translate the origin of the drawing to the player's position\n translate(width / 2 - player.x, height / 2 - player.y);\n\n // Draw the player\n fill(0, 255, 0); // green color for player\n ellipse(player.x, player.y, playerSize, playerSize);\n\n // Draw the maze\n stroke(0);\n fill(0);\n for (let y = 0; y < maze.length; y++) {\n for (let x = 0; x < maze[y].length; x++) {\n if (maze[y][x] === 1) {\n rect(x * cellSize, y * cellSize, cellSize, cellSize);\n }\n }\n }\n\n // Player movement code\n let oldX = player.x;\n let oldY = player.y;\n\n if (keyIsDown(87)) { // 'W' key\n player.y -= playerSpeed;\n }\n if (keyIsDown(65)) { // 'A' key\n player.x -= playerSpeed;\n }\n if (keyIsDown(83)) { // 'S' key\n player.y += playerSpeed;\n }\n if (keyIsDown(68)) { // 'D' key\n player.x += playerSpeed;\n }\n\n if (isWall(player.x, player.y)) {\n player.x = oldX;\n player.y = oldY;\n }\n\n // Normal enemy movement code\n for (let i = 0; i < enemies.length; i++) {\n let enemy = enemies[i];\n let enemyOldX = enemy.x;\n let enemyOldY = enemy.y;\n\n // Simple AI: choose direction towards player\n let dx = player.x - enemy.x;\n let dy = player.y - enemy.y;\n if (Math.abs(dx) > Math.abs(dy)) {\n enemy.x += Math.sign(dx) * enemySpeed;\n } else {\n enemy.y += Math.sign(dy) * enemySpeed;\n }\n\n if (isWall(enemy.x, enemy.y)) {\n enemy.x = enemyOldX;\n enemy.y = enemyOldY;\n }\n\n // Draw the enemy\n fill(255, 0, 0);\n ellipse(enemy.x, enemy.y, playerSize, playerSize);\n\n // Check for game over\n if (dist(player.x, player.y, enemy.x, enemy.y) < playerSize / 2) {\n noLoop();\n alert('Game Over!');\n }\n }\n // Yellow enemy movement code\n for (let i = 0; i < yellowEnemies.length; i++) {\n let yellowEnemy = yellowEnemies[i];\n\n // Simple AI: choose direction towards player\n let dx = player.x - yellowEnemy.x;\n let dy = player.y - yellowEnemy.y;\n if (Math.abs(dx) > Math.abs(dy)) {\n yellowEnemy.x += Math.sign(dx) * enemySpeed;\n } else {\n yellowEnemy.y += Math.sign(dy) * enemySpeed;\n }\n\n // Draw the yellow enemy\n fill(255, 255, 0); // yellow color for yellow enemy\n ellipse(yellowEnemy.x, yellowEnemy.y, playerSize, playerSize);\n\n // Check for game over\n if (dist(player.x, player.y, yellowEnemy.x, yellowEnemy.y) < playerSize / 2) {\n noLoop();\n alert('Game Over!');\n }\n }\n}\n\n// Yellow enemy\nfunction isWall(x, y) {\n let cellX = floor(x / cellSize);\n let cellY = floor(y / cellSize);\n if (cellX < 0 || cellX >= maze[0].length || cellY < 0 || cellY >= maze.length) {\n return true;\n }\n return maze[cellY][cellX] === 1;\n} \n","style.css":"","index.html":"\n\n\n\n \n \n Maze Mania: WASD Edition\n \n \n\n\n\n \n\n\n"},"chat_history":[{"deleted":0,"code_id":36912,"input_tokens":null,"id":20956,"project_id":317,"sender":"human","message":"?","created_at":"2024-02-08T20:40:00.960037Z","output_tokens":null},{"deleted":0,"code_id":36912,"input_tokens":null,"id":20957,"project_id":317,"sender":"ai","message":"The error message 'Uncaught SyntaxError: Unexpected end of input at 129:2 in script.js' means that JavaScript has reached the end of the file and still expects something, usually a closing bracket, parenthesis or quotation mark. Looking at your code, the 'draw()' function is not closing properly. We need to add a closing bracket to fix this error.\n\n```js\n// ... rest of the code\n\n // Yellow enemy\n function isWall(x, y) {\n let cellX = floor(x / cellSize);\n let cellY = floor(y / cellSize);\n if (cellX < 0 || cellX >= maze[0].length || cellY < 0 || cellY >= maze.length) {\n return true;\n }\n return maze[cellY][cellX] === 1;\n } \n}\n```\n\n- I've added a closing bracket at the end of the 'draw()' function. \n- This will let JavaScript know that we've reached the end of the 'draw()' function and any code following this should be treated as outside this function.\n- The 'isWall()' function is also included within the 'draw()' function. This is likely a mistake and it should be moved outside the 'draw()' function.\n- Remember to keep track of your opening and closing brackets and ensure they match up to avoid 'Unexpected end of input' errors in future.","created_at":"2024-02-08T20:40:00.966323Z","output_tokens":null},{"deleted":0,"code_id":36936,"input_tokens":null,"id":20972,"project_id":317,"sender":"human","message":"Ok for some reason I cannot see the player","created_at":"2024-02-08T20:43:16.958110Z","output_tokens":null},{"deleted":0,"code_id":36936,"input_tokens":null,"id":20973,"project_id":317,"sender":"ai","message":"I see that the player is being created and updated in your code, but it's not being drawn. Let's add a block of code to draw the player.\n\n```javascript\n// ... rest of the code\n\n // Draw the player\n fill(0, 255, 0); // green color for player\n ellipse(player.x, player.y, playerSize, playerSize);\n}\n```\n\n- This code should be placed in the `draw()` function after the player movement code and before the normal enemy movement code.\n- We use the `fill()` function to set the color that shapes will be filled with. We pass in RGB values, and in this case we are choosing green.\n- The `ellipse()` function draws an ellipse to the screen. The first two parameters set the location of the center point, and the last two set the size. We are using the player's x and y coordinates for the location and the player's size for the size.\n- This will draw a green circle at the player's location each frame, so you should be able to see the player move as they navigate through the maze.","created_at":"2024-02-08T20:43:16.964692Z","output_tokens":null},{"deleted":0,"code_id":36939,"input_tokens":null,"id":20974,"project_id":317,"sender":"human","message":"are there any mistakes","created_at":"2024-02-08T20:43:50.625895Z","output_tokens":null},{"deleted":0,"code_id":36939,"input_tokens":null,"id":20975,"project_id":317,"sender":"ai","message":"Everything seems to be in order, but I noticed that the `translate()` function which shifts the origin of the drawing to the player's position is placed after the player is drawn. This may be why the player is not visible, as it might be translating the player off the visible canvas. \n\nLet's adjust the order of our drawing operations in the `draw()` function:\n\n```javascript\n// ... rest of the code\n\nfunction draw() {\n background(220);\n\n // Translate the origin of the drawing to the player's position\n translate(width / 2 - player.x, height / 2 - player.y);\n\n // Draw the player\n fill(0, 255, 0); // green color for player\n ellipse(player.x, player.y, playerSize, playerSize);\n\n // ... rest of the code\n}\n```\n\n- Here, I've moved the `translate()` function to the start of the `draw()` function.\n- This will shift all following drawing operations, including the player, so they are drawn relative to the player's position.\n- The player is then drawn at its position, which has now been shifted to the center of the canvas.\n- This should make the player visible on the canvas.","created_at":"2024-02-08T20:43:50.632239Z","output_tokens":null},{"deleted":0,"code_id":36954,"input_tokens":null,"id":20986,"project_id":317,"sender":"human","message":"ERROR Uncaught SyntaxError: Unexpected identifier 'background' at 52:5 in script.js\nLOG Did you just try to use p5.js's background() function? If so, you may want to move it into your sketch's setup() function. For more details, see: https://github.com/processing/p5.js/wiki/p5.js-overview#why-cant-i-assign-variables-using-p5-functions-and-variables-before-setup","created_at":"2024-02-08T20:45:08.872223Z","output_tokens":null},{"deleted":0,"code_id":36954,"input_tokens":null,"id":20987,"project_id":317,"sender":"ai","message":"The error message indicates that you're trying to use the `background()` function outside of a function body, which is not allowed in p5.js. This function call should be moved inside the `draw()` function. The `draw()` function is missing its opening bracket `{`, which could be causing the error. \n\nHere's the corrected code:\n\n```javascript\nfunction draw() {\n background(220);\n\n // Translate the origin of the drawing to the player's position\n translate(width / 2 - player.x, height / 2 - player.y);\n\n // Draw the player\n fill(0, 255, 0); // green color for player\n ellipse(player.x, player.y, playerSize, playerSize);\n\n // ... rest of the code\n}\n```\n\n- I've added the opening bracket `{` after `function draw()` to open the function body.\n- The `background(220);` function call has been moved inside the `draw()` function.\n- This function clears the screen with a gray background at the start of each frame, allowing the player and the maze to be drawn correctly.\n- The `translate()`, `fill()`, and `ellipse()` function calls are also inside the `draw()` function and will be executed each frame.","created_at":"2024-02-08T20:45:08.878519Z","output_tokens":null},{"deleted":0,"code_id":36967,"input_tokens":null,"id":20992,"project_id":317,"sender":"human","message":"show me the corrected draw code","created_at":"2024-02-08T20:46:00.003673Z","output_tokens":null},{"deleted":0,"code_id":36967,"input_tokens":null,"id":20993,"project_id":317,"sender":"ai","message":"Absolutely, here is how the corrected `draw()` function should look:\n\n```javascript\nfunction draw() {\n background(220);\n\n // Translate the origin of the drawing to the player's position\n translate(width / 2 - player.x, height / 2 - player.y);\n\n // Draw the player\n fill(0, 255, 0); // green color for player\n ellipse(player.x, player.y, playerSize, playerSize);\n\n // Draw the maze\n stroke(0);\n fill(0);\n for (let y = 0; y < maze.length; y++) {\n for (let x = 0; x < maze[y].length; x++) {\n if (maze[y][x] === 1) {\n rect(x * cellSize, y * cellSize, cellSize, cellSize);\n }\n }\n }\n\n // Player movement code\n let oldX = player.x;\n let oldY = player.y;\n\n if (keyIsDown(87)) { // 'W' key\n player.y -= playerSpeed;\n }\n if (keyIsDown(65)) { // 'A' key\n player.x -= playerSpeed;\n }\n if (keyIsDown(83)) { // 'S' key\n player.y += playerSpeed;\n }\n if (keyIsDown(68)) { // 'D' key\n player.x += playerSpeed;\n }\n\n if (isWall(player.x, player.y)) {\n player.x = oldX;\n player.y = oldY;\n }\n\n // Normal enemy movement code\n for (let i = 0; i < enemies.length; i++) {\n let enemy = enemies[i];\n let enemyOldX = enemy.x;\n let enemyOldY = enemy.y;\n\n // Simple AI: choose direction towards player\n let dx = player.x - enemy.x;\n let dy = player.y - enemy.y;\n if (Math.abs(dx) > Math.abs(dy)) {\n enemy.x += Math.sign(dx) * enemySpeed;\n } else {\n enemy.y += Math.sign(dy) * enemySpeed;\n }\n\n if (isWall(enemy.x, enemy.y)) {\n enemy.x = enemyOldX;\n enemy.y = enemyOldY;\n }\n\n // Draw the enemy\n fill(255, 0, 0);\n ellipse(enemy.x, enemy.y, playerSize, playerSize);\n\n // Check for game over\n if (dist(player.x, player.y, enemy.x, enemy.y) < playerSize / 2) {\n noLoop();\n alert('Game Over!');\n }\n }\n}\n```\n\n- I've added the opening `{` after `function draw()`. This is what was causing the 'Unexpected identifier' error.\n- The `background(220);` function call has been moved inside the `draw()` function.\n- The `translate()`, `fill()`, `ellipse()` function calls are also inside the `draw()` function and will be executed each frame.\n- The player and enemy drawing and movement code remain the same.","created_at":"2024-02-08T20:46:00.017062Z","output_tokens":null},{"deleted":0,"code_id":37009,"input_tokens":null,"id":21010,"project_id":317,"sender":"human","message":"ok lets add a yellow enemy that is like an ormal enemy but can go through walls","created_at":"2024-02-08T20:49:38.706078Z","output_tokens":null},{"deleted":0,"code_id":37009,"input_tokens":null,"id":21011,"project_id":317,"sender":"ai","message":"Sure, we can add a new set of enemies that move in the same way as the normal enemies but are not restricted by walls. We can represent these with yellow color. Here's how to do it:\n\n```javascript\n// ... rest of the code\n\n// Yellow enemy movement code\nfor (let i = 0; i < yellowEnemies.length; i++) {\n let yellowEnemy = yellowEnemies[i];\n\n // Simple AI: choose direction towards player\n let dx = player.x - yellowEnemy.x;\n let dy = player.y - yellowEnemy.y;\n if (Math.abs(dx) > Math.abs(dy)) {\n yellowEnemy.x += Math.sign(dx) * enemySpeed;\n } else {\n yellowEnemy.y += Math.sign(dy) * enemySpeed;\n }\n\n // Draw the yellow enemy\n fill(255, 255, 0); // yellow color for yellow enemy\n ellipse(yellowEnemy.x, yellowEnemy.y, playerSize, playerSize);\n\n // Check for game over\n if (dist(player.x, player.y, yellowEnemy.x, yellowEnemy.y) < playerSize / 2) {\n noLoop();\n alert('Game Over!');\n }\n}\n```\n\n- First, we loop over each yellow enemy in the `yellowEnemies` array.\n- Similar to normal enemies, we calculate the direction towards the player for each yellow enemy.\n- Then we move the yellow enemy in this direction.\n- Notice that there is no check for whether the yellow enemy is colliding with a wall. This is because yellow enemies can pass through walls.\n- Next, we draw each yellow enemy as a yellow circle at their updated position.\n- Finally, we check if any yellow enemy has collided with the player. If so, the game ends.","created_at":"2024-02-08T20:49:38.712247Z","output_tokens":null},{"deleted":0,"code_id":37035,"input_tokens":null,"id":21026,"project_id":317,"sender":"human","message":"where do I insert this","created_at":"2024-02-08T20:53:13.457936Z","output_tokens":null},{"deleted":0,"code_id":37035,"input_tokens":null,"id":21027,"project_id":317,"sender":"ai","message":"You should insert the yellow enemy movement code block at the end of your `draw()` function, after the normal enemy movement code block. Here's how your `draw()` function should look:\n\n```javascript\nfunction draw() {\n // ... existing draw code ...\n\n // Normal enemy movement code\n // ... existing enemy movement code ...\n\n // Yellow enemy movement code\n for (let i = 0; i < yellowEnemies.length; i++) {\n let yellowEnemy = yellowEnemies[i];\n\n // Simple AI: choose direction towards player\n let dx = player.x - yellowEnemy.x;\n let dy = player.y - yellowEnemy.y;\n if (Math.abs(dx) > Math.abs(dy)) {\n yellowEnemy.x += Math.sign(dx) * enemySpeed;\n } else {\n yellowEnemy.y += Math.sign(dy) * enemySpeed;\n }\n\n // Draw the yellow enemy\n fill(255, 255, 0); // yellow color for yellow enemy\n ellipse(yellowEnemy.x, yellowEnemy.y, playerSize, playerSize);\n\n // Check for game over\n if (dist(player.x, player.y, yellowEnemy.x, yellowEnemy.y) < playerSize / 2) {\n noLoop();\n alert('Game Over!');\n }\n }\n}\n```\n\n- The yellow enemy movement code block iterates over each yellow enemy in the `yellowEnemies` array.\n- It calculates the direction towards the player for each yellow enemy and moves them in this direction.\n- Each yellow enemy is then drawn as a yellow circle at their updated position.\n- If a yellow enemy collides with the player, the game ends.","created_at":"2024-02-08T20:53:13.464458Z","output_tokens":null},{"deleted":0,"code_id":37077,"input_tokens":null,"id":21038,"project_id":317,"sender":"human","message":"I want to make it so that you can see more ","created_at":"2024-02-08T20:56:46.749562Z","output_tokens":null},{"deleted":0,"code_id":37077,"input_tokens":null,"id":21039,"project_id":317,"sender":"ai","message":"If you want to see more of the maze, there are a few ways you can achieve this:\n\n1. **Increase the size of the canvas**: This will give you a larger area to view the maze. You can do this by changing the parameters in the `createCanvas()` function in your `setup()` block.\n\n2. **Decrease the size of the cells in the maze**: This will make each cell in the maze smaller, allowing you to see more cells at once. You can do this by changing the `cellSize` variable.\n\nHere's how you can do both:\n\n```javascript\n// Increase the size of the canvas\ncreateCanvas(3000, 3000); // Double the size\n\n// Decrease the size of the cells in the maze\nlet cellSize = 50; // Half the size\n```\n\n- The `createCanvas()` function sets the size of the canvas. By increasing these values, you increase the area that you can draw on and view.\n- The `cellSize` variable determines the size of each cell in the maze. By decreasing this value, you make each cell smaller, allowing more cells to fit on the canvas at once.\n\nRemember to adjust the positions of the player and enemies to match the new cell size.","created_at":"2024-02-08T20:56:46.755223Z","output_tokens":null},{"deleted":0,"code_id":37089,"input_tokens":null,"id":21046,"project_id":317,"sender":"human","message":"ok ncm","created_at":"2024-02-08T20:59:19.348416Z","output_tokens":null},{"deleted":0,"code_id":37089,"input_tokens":null,"id":21047,"project_id":317,"sender":"ai","message":"It seems like your comment is incomplete or not clear. Can you please provide more details or clarify your question? I'm here to help!","created_at":"2024-02-08T20:59:19.353714Z","output_tokens":null}],"assets":[],"messages_sent":34,"comments":[],"steps":[]}