Okay, let's tackle building a playable Asteroids game as a single-page web app. The user wants everything in one HTML file with inline CSS and JS, no external resources. So I need to create an index.html file that includes all the necessary code.

First, I'll start by setting up the HTML structure. The canvas element will be the main component where the game is rendered. I'll include a <style> tag for CSS and a <script> tag for JavaScript. Since it's all in one file, I need to make sure the script runs after the DOM is loaded.

For the game logic, I'll need to handle the ship's movement, rotation, shooting, asteroid generation, collision detection, and scoring. Let's break it down step by step.

The ship should have thrust and rotation. Using vector math makes sense here. The ship's position, velocity, and angle will be tracked. Thrust will add to the velocity vector, and rotation will change the angle. Also, the ship should wrap around the screen edges when moving off-screen.

Shooting bullets: When the user presses space, bullets are fired in the direction the ship is facing. Each bullet has its own velocity and position, and they should also wrap around the screen.

Asteroids need to be generated procedurally. They'll have random positions and velocities. When an asteroid is hit by a bullet or the ship, it splits into smaller asteroids. This requires checking for collisions between bullets, the ship, and asteroids.

Collision detection is crucial. I'll need to check if the ship collides with any asteroid, which reduces lives. Bullets need to collide with asteroids to split them. Also, asteroids should wrap around the screen edges.

Scoring and lives: The score increases when asteroids are destroyed. The player starts with a certain number of lives, and each collision with an asteroid decreases the lives. If all lives are lost, the game ends.

Now, structuring the JavaScript. I'll create objects for the ship, bullets, and asteroids. The game loop will handle updating positions, checking collisions, and rendering.

For rendering, the canvas context will be used to draw the ship, bullets, and asteroids using vector graphics. The ship can be drawn as a triangle, bullets as small circles, and asteroids as polygons with varying numbers of sides.

I need to handle keyboard input for rotation and thrust. The arrow keys can control rotation, and the up arrow for thrust. The spacebar fires bullets.

Let me outline the code structure:

1. Initialize the canvas and context.
2. Set up the game variables: ship, bullets, asteroids, score, lives, etc.
3. Create functions for drawing each game element.
4. Implement the game loop with requestAnimationFrame.
5. Handle input events for keyboard controls.
6. Collision detection functions.
7. Asteroid splitting logic.

Testing the code in the browser is important. I'll need to ensure that all elements wrap around the screen, handle multiple asteroids, and correctly manage the splitting into smaller pieces.

Potential issues to watch for: performance with many asteroids, accurate collision detection, and proper handling of the game state (like game over).

Putting it all together into the HTML file. Let's start writing the code, making sure to include all parts within the script tags. I'll use inline styles for the canvas and body to center it on the page.

Wait, the user mentioned procedural vector graphics only. So no images or external assets. All shapes must be drawn using the canvas API. That's covered with lines and polygons.

I should also include a game over message and restart functionality. When the player runs out of lives, display the message and allow them to restart by pressing a key.

Now, writing the actual code. Let's start with the HTML structure, then the CSS, then the JavaScript. Making sure the script runs after the DOM is loaded, perhaps using window.onload or placing the script at the end of the body.

Let me draft the code step by step, ensuring all components are included and functioning as described.

Okay, let me check what the user asked for. They wanted a single-page Asteroids game with all code in one HTML file, using procedural vector graphics and no external assets. The assistant created an index.html file with inline CSS and JS.

First, I need to verify if the code meets all requirements. The HTML structure looks correct with a canvas element. The CSS centers the canvas and sets the background. The JavaScript includes the game logic, handling ship movement, bullets, asteroids, collision detection, and scoring.

The ship is controlled with arrow keys: left and right for rotation, up for thrust, and space to shoot. Bullets wrap around the screen, and asteroids split into smaller pieces when hit. The game tracks score and lives, and displays a game over message with restart instructions.

I should check if all parts are included. The code uses the canvas API for drawing, no images or external resources. The game loop updates positions, checks collisions, and renders elements. The asteroid splitting logic is there, and the game resets when the player runs out of lives.

Potential issues: Performance with many asteroids, but since it's a simple game, it should handle it. Collision detection might need optimization, but for a basic version, it's acceptable. The code also handles wrapping around the screen edges correctly.

The user didn't mention specific features like sound or advanced graphics, so the current implementation should suffice. The code is self-contained, so the user can run it directly by opening the index.html file in a browser. Everything seems to be covered. The answer should confirm the file was created and provide instructions to run it.