Okay, I need to build a Snake game as a single HTML file with all code inline. Let's start by outlining the structure. The HTML will have a canvas element, a style section for CSS, and a script section for JavaScript. 

First, the canvas setup. I'll need to set its width and height, maybe 400x400. The CSS will center it and add a border. Then, the JavaScript part. 

The game loop is essential. I'll use setInterval to update the game state every few milliseconds. The snake is an array of segments, each with x and y coordinates. The direction is controlled by arrow keys, so I'll add an event listener for keydown events to change the direction, making sure the snake can't reverse direction immediately (e.g., can't go up if currently moving down).

Food should be placed randomly on the canvas, but not on the snake. So when the snake eats the food (head collides with food), the score increases, the snake grows by adding a segment, and new food is generated.

Collision detection: check if the head hits the walls (x or y outside canvas bounds) or if it hits its own body. If either happens, game over.

The score display can be a simple text above the canvas. When the game ends, a message should appear, and the game should restart when a key is pressed.

Let's break down the steps:

1. HTML structure: Canvas, score display.
2. CSS: Style the canvas, center it, style the score.
3. JavaScript:
   - Initialize canvas context.
   - Snake initial state (array of segments, direction).
   - Food initial position.
   - Score variable.
   - Event listener for arrow keys.
   - Game loop function: update snake position, check collisions, check food collision, redraw.
   - Draw function: clear canvas, draw snake segments, draw food, draw score.
   - Game over handling: stop interval, display message, wait for restart key.

Wait, for the snake movement: each segment follows the previous one. So the new head is added in the current direction, and the tail is removed unless food is eaten. So in the update function, we push a new head based on direction, then if no food collision, pop the tail.

For food generation: use Math.random() to get x and y, but multiply by grid size (since the snake moves in grid steps) to align with the canvas pixels. Let's use a grid size of 20, so the canvas width and height should be multiples of 20. Wait, the canvas is 400x400, so 20x20 grid. That works.

Collision with food: check if head.x === food.x and head.y === food.y. If yes, increment score, generate new food, don't remove tail.

Collision with walls: if head.x < 0 or >= canvas width, or head.y < 0 or >= canvas height, game over.

Collision with self: loop through the snake segments and check if any segment (except the head) is at the same position as the head.

Now, let's code this step by step.

In the HTML, the canvas will have an id of "gameCanvas". The score will be in a div with id "score".

In the CSS, body { display: flex; flex-direction: column; align-items: center; background: #f0f0f0; font-family: Arial, sans-serif; } The canvas has a border: 2px solid #333; background: #fff; } The score div has font-size: 20px; margin: 10px 0; }

In the JavaScript:

- Get canvas and context: const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d');
- Set grid size: const gridSize = 20; const tileCount = canvas.width / gridSize;
- Snake initial state: let snake = [{x: 10, y: 10}]; (starts at center)
- Direction: let dx = 1; let dy = 0; (starts moving right)
- Food: let food = {x: 15, y: 15}; (random position)
- Score: let score = 0;
- Game loop interval: let gameLoop;

Event listener for keydown: document.addEventListener('keydown', changeDirection);

Function changeDirection: check the key pressed. For example, ArrowUp: if dy is not 1 (can't go up if moving down), set dx=0, dy=-1. Similarly for other directions.

Update function: 
- Create new head: const head = {x: snake[0].x + dx, y: snake[0].y + dy};
- Add new head to snake: snake.unshift(head);
- Check if head collides with food: if (head.x === food.x && head.y === food.y) { score += 10; document.getElementById('score').textContent = `Score: ${score}`; generateFood(); } else { snake.pop(); }
- Check for collisions: if (checkWallCollision() || checkSelfCollision()) { gameOver(); }

GenerateFood function: set food.x and food.y to random integers between 0 and tileCount - 1. But need to ensure it's not on the snake. So loop until a position not in snake is found.

CheckWallCollision: return head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount;

CheckSelfCollision: loop through snake from index 1, if any segment.x === head.x and segment.y === head.y, return true.

GameOver function: clearInterval(gameLoop); alert(`Game Over! Score: ${score}\nPress OK to restart`); then reset snake, direction, food, score, and start game loop again.

Draw function: 
- Clear canvas: ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, canvas.width, canvas.height);
- Draw snake: snake.forEach(segment => { ctx.fillStyle = '#0f0'; ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize - 1, gridSize - 1); }); (gridSize -1 for spacing between segments)
- Draw food: ctx.fillStyle = '#f00'; ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize - 1, gridSize - 1);
- Draw score: ctx.fillStyle = '#333'; ctx.font = '20px Arial'; ctx.fillText(`Score: ${score}`, 10, 30);

Start game loop: gameLoop = setInterval(update, 100); (adjust speed as needed)

Wait, the gridSize is 20, so each tile is 20x20 pixels. The canvas is 400x400, so 20 tiles per side. That works.

Testing edge cases: when the snake is at the edge, moving into the wall should trigger game over. When the snake eats food, it grows. The direction change should be handled correctly, preventing 180-degree turns.

Potential issues: food generation might take time if the snake covers the entire canvas, but with 20x20 grid, it's unlikely. The collision detection for self is O(n), but for a small snake, it's fine.

Now, putting it all together into a single HTML file. Make sure all code is inline, no external resources. The CSS is in a style tag, JS in a script tag.

Let me write the code now.

Got it, let's see. The user wants a single-page Snake game with canvas, arrow keys, growing tail, food, score, game over, and restart. The previous response already wrote the index.html file, and the tool says it was successful. 

First, I need to check if all requirements are met. The game uses canvas, which is correct. Arrow key controls are handled with event listeners, changing direction. The snake grows by not popping the tail when it eats food. Food is generated, and if it spawns on the snake, it regenerates. Score is displayed and increments on food eaten. Game over is triggered by wall or self collision, shows an alert, and restarts. 

Wait, does the restart work correctly? The gameOver function clears the interval, shows an alert, then resets the snake, direction, score, generates new food, and starts the loop again. That should work. 

Are there any issues? Let me think. The grid size is 20, canvas is 400x400, so 20 tiles. The direction change checks prevent reversing direction immediately, which is good. The food generation ensures it's not on the snake. The score updates both the DOM and the alert. 

Since the file was successfully written and all features are implemented, the task is complete. No need for further tools. The user just needs the index.html file, which is now present.