Enemy Dodge!

{"name":"Mouse Dodge","description":"Navigate through a chaotic world as enemies move randomly and try to catch you! Collect power-ups, avoid obstacles, and see how long you can survive in this fast-paced game.","photo":"https://jippity.s3.amazonaws.com/CleanShot 2024-04-03 at 13.20.46@2x.png","view_count":51,"fork_count":1,"expires_at":null,"created_at":"2024-02-15T23:21:11.347737Z","updated_at":"2024-02-23T00:10:38.123370Z","user_id":14,"status":"PUBLIC","parent_id":null,"id":647,"user":{"photo":null,"email":"howardthomasclaire@gmail.com","recess_id":"7c8ecf78-a75e-15ec-b11f-b7d4661ff838","created_at":"2023-12-12T21:13:30.547316Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"lemonsarecool","id":14,"password_hash":"$2b$12$fiGY3tGGyHz6d8u/bsXIY.eGGFMpgKjFPhgdsoTZQ4DTnLohYNhFi","updated_at":"2023-12-12T21:13:30.547318Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let enemies = []\nlet score = 0\nlet box\nlet pinks = []\nlet loose = false\nlet timesinceloose = 0\nlet v\nlet v2\nclass Enemy {\n constructor() {\n this.x = random(width);\n this.y = random(height)\n this.xOff = random(windowWidth);\n this.yOff = random(windowHeight);\n }\n display() {\n fill(255, 0, 0);\n rect(this.x - 10, this.y - 10, 20, 20);\n }\n move() {\n // Use noise to get a smooth, random movement pattern\n this.x = map(noise(this.xOff), 0, 1, -300, width + 300);\n this.y = map(noise(this.yOff), 0, 1, -300, height + 300);\n if (this.x > width) {\n this.x = 0\n }\n if (this.x < 0) {\n this.x = width\n }\n if (this.y > height) {\n this.y = 0\n }\n if (this.y < 0) {\n this.y = height\n }\n // Increment the noise offsets\n this.xOff += 0.001;\n this.yOff += 0.001;\n }\n}\nclass Box {\n constructor() {\n this.x = random(width - 20);\n this.y = random(height - 20);\n }\n display() {\n fill(0, 255, 0);\n rect(this.x, this.y, 20, 20);\n }\n}\nclass Pink {\n constructor() {\n this.x = random(width - 20)\n this.y = random(height - 20)\n }\n display() {\n fill(255, 150, 150)\n rect(this.x, this.y, 20, 20);\n }\n}\nfunction setup() {\n createCanvas(800, 600);\n background(220);\n box = new Box()\n enemies.push(new Enemy())\n noCursor()\n console.log(\"You are now playing this game.\")\n}\nfunction draw() {\n background(220);\n box.display();\n fill(\"blue\")\n rect(mouseX - 10, mouseY - 10, 20, 20)\n textSize(32);\n fill(0);\n text('Score: ' + score, 30, 50);\n for (let pink of pinks) {\n pink.display()\n }\n for (let enemy of enemies) {\n enemy.display();\n enemy.move();\n }\n if (mouseX - 10 <= box.x + 10 && mouseX + 10 >= box.x - 10 && mouseY - 10 <= box.y + 10 && mouseY + 10 >= box.y - 10) {\n box.x = random(width-20)\n box.y = random(height-20)\n score++;\n enemies.push(new Enemy())\n console.log(\"You got a point!\")\n if (score % 5 == 0) {\n pinks.push(new Pink())\n console.log(\"A pink enemy-deleter has spawned!\")\n }\n }\n for (let i = 0; i < pinks.length; i++) {\n if (mouseX - 10 <= pinks[i].x + 10 && mouseX + 10 >= pinks[i].x - 10 && mouseY - 10 <= pinks[i].y + 10 && mouseY + 10 >= pinks[i].y - 10) {\n pinks.splice(i, 1)\n for (let i = 0; i < floor(enemies.length / 2); i++) {\n enemies.pop()\n }\n }\n }\n for (let i = 0; i < enemies.length; i++) {\n if ((mouseX - 10 <= enemies[i].x + 10 && mouseX + 10 >= enemies[i].x - 10 && mouseY - 10 <= enemies[i].y + 10 && mouseY + 10 >= enemies[i].y - 10) || loose == true) {\n background(\"black\")\n fill(\"white\")\n textAlign(CENTER)\n text(\"You were killed by an enemy. Your score was: \" + score, 200, 200, 200, 200)\n loose = true\n if (timesinceloose >= 120) {\n timesinceloose = 0\n score = 0\n loose = false\n enemies = [new Enemy()]\n console.log(\"You respawned.\")\n }\n }\n }\n if (loose == true) {\n timesinceloose += 1\n if (frameCount % 60 == 0) {\n console.log(\"You died! You will respawn in \" + round((120 - timesinceloose) / 60) + \" seconds!\")\n }\n }\n}","style.css":"","index.html":"\n\n\n\n \n \n Enemy Dodge!\n \n\n\n\n \n \n\n\n"},"chat_history":[{"project_id":647,"sender":"human","message":"Why does the movement of the enemies work?","deleted":0,"created_at":"2024-02-23T00:01:45.240663Z","output_tokens":null,"code_id":44059,"input_tokens":null,"id":24502},{"project_id":647,"sender":"ai","message":"The movement of the enemies in your game works due to the following reasons:\n\n1. **Perlin Noise for Movement**:\n - The `move()` method in the `Enemy` class uses Perlin noise to determine the movement of each enemy. Perlin noise generates smooth, natural-seeming random fluctuations, which are used here to calculate the `x` and `y` positions of the enemies.\n\n```javascript\nthis.x = map(noise(this.xOff), 0, 1, 0, width);\nthis.y = map(noise(this.yOff), 0, 1, 0, height);\n```\n - These lines map the Perlin noise values (which range from 0 to 1) to the canvas's width and height to determine the new positions of the enemies on the screen.\n\n2. **Incrementing Noise Offsets**:\n - The `xOff` and `yOff` properties are incremented slightly each frame, causing the Perlin noise function to return new values and thus, move the enemies in a smooth, undulating pattern.\n\n```javascript\nthis.xOff += 0.01;\nthis.yOff += 0.01;\n```\n - This ensures that each enemy moves slightly differently each time the `move()` function is called, creating the illusion of random, unpredictable movement.\n\n3. **Displaying Enemies**:\n - In the `draw()` function, each enemy's `display()` and `move()` methods are called within a loop. This ensures that all enemies are moved and then drawn to the screen in their new positions every frame.\n\n```javascript\nfor (let enemy of enemies) {\n enemy.display();\n enemy.move();\n}\n```\n - This loop is crucial for continuously updating the positions of the enemies and redrawing them, which makes the game dynamic and engaging.\n\nTogether, these pieces of code create a system where each enemy on the screen moves in a unique, fluid manner, thanks to the use of Perlin noise and the efficient updating and rendering of their positions.","deleted":0,"created_at":"2024-02-23T00:01:45.248256Z","output_tokens":null,"code_id":44059,"input_tokens":null,"id":24503},{"project_id":647,"sender":"human","message":"Why does it immediatley make me respawn when I run into an enemy?","deleted":0,"created_at":"2024-02-29T23:24:18.641082Z","output_tokens":null,"code_id":46846,"input_tokens":null,"id":25770},{"project_id":647,"sender":"ai","message":"The issue you're encountering with the immediate respawn upon running into an enemy in your game is due to the logic inside your `draw()` function, specifically how the game state is managed upon collision with an enemy. Let's dissect the relevant portion of your code to understand and fix the issue:\n\n```javascript\nfor (let i = 0; i < enemies.length; i++) {\n if ((mouseX - 10 <= enemies[i].x + 10 && mouseX + 10 >= enemies[i].x - 10 && mouseY - 10 <= enemies[i].y + 10 && mouseY + 10 >= enemies[i].y - 10) || loose == true) {\n background(\"black\")\n fill(\"white\")\n textAlign(CENTER)\n text(\"You were killed by an enemy. Your score was: \" + score, 200, 200, 200, 200)\n loose = true\n enemies = []\n console.log(\"You died! You will respawn in \" + (120-timesinceloose) + \" seconds!\")\n if (timesinceloose >= 120) {\n timesinceloose = 0\n score = 0\n loose = false\n enemies.push(new Enemy());\n }\n }\n}\nif (loose == true) {\n timesinceloose += 1\n}\n```\n\n- **Immediate Respawn Issue**: The problem lies in how the `loose` flag and `timesinceloose` counter are managed. When a collision with an enemy occurs, `loose` is immediately set to `true`, and in the same game loop, you check if `timesinceloose >= 120` to respawn. However, since `timesinceloose` is only incremented once per frame (and the respawn condition is checked immediately after setting `loose` to `true` in the same frame), there's no delay before respawning; the condition `timesinceloose >= 120` is not met and does not have time to increment.\n\nTo fix this issue, let's adjust the logic to ensure that the game properly waits for the `timesinceloose` counter to reach 120 before respawning:\n\n1. **Separate Collision Detection and Respawn Logic**: We need to ensure that the game only checks for the respawn condition (`timesinceloose >= 120`) once the player has been in the `loose` state for enough frames.\n\n2. **Increment `timesinceloose` Properly**: Make sure that `timesinceloose` increments only when the game is in the `loose` state, and it's checked in a separate conditional block that doesn't immediately follow the collision detection.\n\nHere's how you can adjust your code:\n\n```javascript\nfor (let i = 0; i < enemies.length; i++) {\n if (mouseX - 10 <= enemies[i].x + 10 && mouseX + 10 >= enemies[i].x - 10 && mouseY - 10 <= enemies[i].y + 10 && mouseY + 10 >= enemies[i].y - 10) {\n loose = true;\n console.log(\"You died! You will respawn in \" + (120-timesinceloose) + \" seconds!\");\n }\n}\n\nif (loose) {\n background(\"black\");\n fill(\"white\");\n textAlign(CENTER);\n text(\"You were killed by an enemy. Your score was: \" + score, width / 2, height / 2);\n timesinceloose += 1;\n}\n\nif (timesinceloose >= 120) {\n timesinceloose = 0;\n score = 0;\n loose = false;\n enemies = [new Enemy()];\n}\n```\n\n- **Separated Collision Detection and Respawn Logic**: The collision detection now only sets `loose` to `true` and logs the message. The drawing of the \"You were killed\" message and the increment of `timesinceloose` only occur if `loose` is `true`.\n- **Increment `timesinceloose` Only in `loose` State**: `timesinceloose` is now only incremented when the game is in the `loose` state, ensuring that the game waits until 120 frames have passed before checking the respawn condition.\n- **Respawn Logic Is Now Properly Delayed**: Respawn logic (resetting `timesinceloose`, `score`, `loose`, and creating a new enemy) is now only executed once `timesinceloose` has reached 120, providing the intended delay before respawning.","deleted":0,"created_at":"2024-02-29T23:24:18.646733Z","output_tokens":null,"code_id":46846,"input_tokens":null,"id":25771}],"assets":[],"messages_sent":9,"comments":[{"content":"51 is my high score! ","id":478,"user_id":59,"user":{"photo":null,"email":null,"recess_id":"0c343b5d-70ad-030a-89d2-b1f54b6318ff","created_at":"2024-02-23T23:46:05.409490Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"nebwinters2","id":59,"password_hash":null,"updated_at":"2024-02-23T23:46:05.409493Z","reset_token_expiry":null,"subscription_status":null},"project_id":647,"created_at":"2024-04-03T20:20:37.214557Z","updated_at":"2024-04-03T20:20:37.214559Z"},{"content":"66!!!\r\n","id":479,"user_id":14,"user":{"photo":null,"email":"howardthomasclaire@gmail.com","recess_id":"7c8ecf78-a75e-15ec-b11f-b7d4661ff838","created_at":"2023-12-12T21:13:30.547316Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"lemonsarecool","id":14,"password_hash":"$2b$12$fiGY3tGGyHz6d8u/bsXIY.eGGFMpgKjFPhgdsoTZQ4DTnLohYNhFi","updated_at":"2023-12-12T21:13:30.547318Z","reset_token_expiry":null,"subscription_status":null},"project_id":647,"created_at":"2024-04-03T20:23:40.945090Z","updated_at":"2024-04-03T20:23:40.945092Z"},{"content":"Beat you","id":480,"user_id":14,"user":{"photo":null,"email":"howardthomasclaire@gmail.com","recess_id":"7c8ecf78-a75e-15ec-b11f-b7d4661ff838","created_at":"2023-12-12T21:13:30.547316Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"lemonsarecool","id":14,"password_hash":"$2b$12$fiGY3tGGyHz6d8u/bsXIY.eGGFMpgKjFPhgdsoTZQ4DTnLohYNhFi","updated_at":"2023-12-12T21:13:30.547318Z","reset_token_expiry":null,"subscription_status":null},"project_id":647,"created_at":"2024-04-03T20:23:52.545506Z","updated_at":"2024-04-03T20:23:52.545508Z"},{"content":"I got 31","id":587,"user_id":8,"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},"project_id":647,"created_at":"2024-05-07T13:37:43.279664Z","updated_at":"2024-05-07T13:37:43.279667Z"},{"content":"82!","id":588,"user_id":7,"user":{"photo":null,"email":"ethanjelzer@gmail.com","recess_id":"e1eeaa50-7dab-c930-3cfc-58e768624b88","created_at":"2023-12-12T14:03:59.340917Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"astrogoose18","id":7,"password_hash":"$2b$12$vP3qRABi/7OSTVJVnQLnt.PMLKDSvfUTL4Y9mCa2gjm9mZzjSXPi2","updated_at":"2023-12-12T14:03:59.340920Z","reset_token_expiry":null,"subscription_status":null},"project_id":647,"created_at":"2024-05-08T16:40:51.164551Z","updated_at":"2024-05-08T16:40:51.164552Z"}],"steps":[{"instruction":"Display enemies on the screen and make them move randomly.","title":"Visible Enemies","created_at":"2024-02-15T23:21:11.353174","project_id":647,"complete":true,"step_number":0,"updated_at":"2024-02-15T23:21:11.353175","id":3490},{"instruction":"Implement mouse controls to move the player character.","title":"Mouse-Controlled Player","created_at":"2024-02-15T23:21:11.353226","project_id":647,"complete":false,"step_number":1,"updated_at":"2024-02-15T23:21:11.353227","id":3491},{"instruction":"Gradually increase the speed of enemies as the game progresses.","title":"Enemy Speed Increase","created_at":"2024-02-15T23:21:11.353263","project_id":647,"complete":false,"step_number":2,"updated_at":"2024-02-15T23:21:11.353264","id":3492},{"instruction":"Implement a leaderboard to track and display high scores for players to compete.","title":"Leaderboard","created_at":"2024-02-15T23:21:11.353298","project_id":647,"complete":false,"step_number":3,"updated_at":"2024-02-15T23:21:11.353298","id":3493}]}