**Planning web app for Asteroids game**

I need to create a single-page web app in `index.html` within the current directory. I'll make sure to keep everything self-contained, with no external resources. The goal is to implement an Asteroids-like game using vector graphics. The ship will have thrust and rotation controls, shoot bullets, and asteroids will break into smaller pieces. I'll ensure procedural graphics are used, handle user input, and confirm that the required file is present after writing the content.**Designing asteroid mechanics**

I'm implementing asteroid mechanics for the game. When an asteroid gets hit by a bullet, it either splits into two smaller pieces or gets destroyed if it's the smallest size. I'll categorize asteroids into big, medium, and small, each with specific radii. Points are set at 20 for big, 50 for medium, and 100 for small. I’ll ensure collision detection works based on the distance from the bullet to the asteroid's center, and the ship will have 3 lives with a shield.**Setting up game mechanics and UI**

When the ship collides with an asteroid, it will lose a life and reset to the center, freezing for a moment. The UI will display the score at the top-left and lives at the top-right. In the game loop, I'll update the physics—applying thrust in the ship's direction when the thrust key is pressed and adding friction for some damping. I'll also ensure the controls respond to the arrow keys and WASD for movement. Additionally, a fire cooldown will be implemented to avoid spamming bullets.**Generating asteroid shapes and structuring code**

I'm planning to create asteroid shapes by generating polygons with 8 to 12 vertices, using random angle spacing for variety. I’ll draw these by creating an array of points relative to the center and iterating through each vertex to connect them. The ship will be represented as a triangle drawn at its position with a rotation based on its orientation. I’ll create a single `index.html` file with all necessary elements: meta, title, CSS for styling, and JavaScript for functionality, while ensuring no external assets are used.**Coding game functionality**

I'm crafting the code for the game. First, I'll set up the canvas and context, making sure the dimensions adapt to the window while restricting to 800x600. Then, I’ll define the ship's properties and setup asteroid creation, using random polygons. I'll initialize a few large asteroids at random positions, ensuring they're not too close to the ship. For shooting, I'll implement bullet mechanics, including cooldowns and life duration. Additionally, I'll handle collision detection for when the ship hits asteroids and split those asteroids accordingly, ensuring to build new arrays to avoid modifying during iteration.**Implementing game mechanics**

I'm working on the asteroid splitting logic. When an asteroid splits, if it's big, it creates two medium ones; if medium, two small. I'll filter out bullets to remove them efficiently and also handle creating new asteroids upon splitting. The wrap function will ensure objects wrap around the screen correctly. 

In the update loop, I will adjust the ship's angle and position based on user input while maintaining velocity. Each frame will involve updating bullet positions, asteroid movements, and rendering objects, including the ship and UI elements like score. Lastly, I'll set up keyboard controls for the game.**Implementing collision and game logic**

I’m setting up the collision detection between the ship and asteroids. If they collide, I’ll reduce lives, and if they reach zero, the game will end. If there's still life, I’ll respawn the ship at the center, applying a brief invulnerability timer to avoid immediate collisions.

Next, I need to draft the game reset function, which sets initial scores and lives. I’ll also write the HTML structure for the game and ensure that the JavaScript code updates HUD elements properly. I'll make sure the overlay functions work to start and restart the game when Enter is pressed.**Finalizing game update and rendering**

I’m implementing the core game loop with the `update` function for the ship, bullets, and asteroids. I'll check for ship input to rotate and apply thrust, while also updating the position and applying friction.

For collisions, if the ship is invincible, I’ll manage lives and reset when necessary. The HUD will display scores and lives, while rendering will be done through the canvas. I’ll manage overlays for the start and game-over states and set up the event listener for starting and restarting the game. Finally, I’ll prepare the index.html content and ensure everything’s ready for testing.

**Checking game code details**

I wrote index.html for a playable Asteroids-like game, but I need to ensure everything works properly. I replaced incomplete collision handling with a more robust solution in step(dt). There are some issues, though: in resetGame, we're calling makeAsteroid with 'big,' but that function expects 'big,' 'med,' or 'small' sizes, and we didn't define A.size for 'small' correctly. This mismatch needs fixing, especially in the scoring system. I'm on it!**Reviewing collision handling**

I see that for 'small', A.size needs to be recognized correctly, or it defaults to 100, which is okay. In the collision handling code, I compute hits and create a destroySet of asteroid indices to destroy. After that, I filter newAst. The logic inside step(dt) computes hits first and then builds newAst from the remaining asteroids. For each hit, I add new asteroids of size 'med' if they're big and 'small' otherwise. The flow seems solid!**Identifying potential issues**

I spotted a potential problem in the collision handling code. When iterating through hits, I create new asteroids based on their size, but I'm concerned that the original A.pos could be mutated later. I need to ensure the overlay resets correctly at startup. The overlay display is initially set to 'none', and we change it to 'flex' to show. In the Enter handler, if the game isn't started or it's over, resetGame is called, which also sets overlay.style.display to 'none'. I think I need to keep track of these states carefully!**Examining potential issues**

I noticed a problem where the Enter handler sets the overlay back to none. The max dt calculation uses 0.033, which seems fine, and the overlay displays the "Game Over" message correctly. But I need to check if the function wrap uses updated width and height after a resize. The bullets and asteroids might still compute their positions using the old values since wrap uses outer scope variables. The ship's invincibility flicker also looks like it only checks the drawing condition, so I'll need to clarify that logic too.**Finalizing game build summary**

I've wrapped up the single-file Asteroids game in index.html, located at /tmp/ws/index.html. It features pure canvas vector graphics, handling wrapping, thrust, rotation, shooting, and splitting asteroids into smaller pieces while displaying score and lives. To run it, open the file in a browser, pressing Enter to start, and use WASD or arrow keys to navigate and space to shoot.

Splitting works for big and medium asteroids; small ones don't split. If you need adjustments, tweak constants for difficulty or asteroid numbers in the code. Let me know if you want to add extra features!