Okay, the user wants a playable Snake game in a single HTML file. Let me think about how to structure this.

First, I need to create the HTML structure with a canvas element. The canvas will be where the game is rendered. Then, I'll need CSS to style the canvas and maybe center it on the page. The JavaScript will handle the game logic.

For the game mechanics: the snake moves in directions based on arrow keys. The tail grows when the snake eats food. There's a score that increments with each food eaten. When the snake hits the wall or itself, the game ends, and there's a restart option.

I'll start by setting up the HTML with a canvas tag. Then, in the style section, I'll set the canvas size and maybe some basic styling. The script will contain all the game logic.

The JavaScript part needs to handle the game loop, snake movement, collision detection, food spawning, score tracking, and game over/restart functionality.

Let me outline the steps:

1. Create the canvas element and get its context for drawing.
2. Define the snake as an array of segments, each with x and y coordinates.
3. Handle keyboard input to change the direction of the snake.
4. Create a food object that appears at random positions on the grid.
5. Update the game state in a loop: move the snake, check for collisions, check if food is eaten, update score, and redraw.
6. When the game is over, display a message and allow restarting.

I need to make sure all the code is self-contained within the index.html file. No external libraries or resources. The canvas size should be manageable, maybe 400x400 pixels with a grid size of 20x20 squares.

For the game loop, using requestAnimationFrame would be efficient. The snake's direction changes based on key presses, but need to prevent reversing into itself.

Collision detection: check if the snake's head hits the wall or any part of its body.

When the snake eats food, increase the score and add a new segment to the tail. The food should then respawn at a new location not occupied by the snake.

Game over condition: if the snake's head is outside the canvas or collides with its body.

Restart functionality: reset the snake's position, direction, score, and food location.

Testing the code in the browser to ensure it works. Making sure the key events are properly captured and the game state updates correctly.

Now, putting all this into the index.html file with the style and script tags. Ensuring that the code is properly formatted and all functions are correctly implemented.

Okay, the user asked for a single-page Snake game with specific features. I need to make sure all the requirements are met. Let me check the code I provided.

First, the HTML structure: there's a canvas element and a game over message. The CSS styles the body, canvas, and game over text. The JavaScript handles the game logic, including movement, collision detection, food placement, scoring, and restart functionality.

I should verify that the snake moves correctly with arrow keys. The direction changes are handled in the keydown event listener. The game loop uses requestAnimationFrame for smooth updates. Collision detection checks for walls and self-collision. When the snake eats food, the score increases and the tail grows. The game over message appears and allows restarting with 'R'.

I also need to ensure that the food doesn't spawn on the snake. The placeFood function checks each segment and recursively calls itself if there's a collision. The restart function resets all variables and hides the game over message.

Testing in a browser would confirm if everything works, but since I can't do that here, I'll rely on the code structure. The code is self-contained, no external resources, and all in one file. The user should be able to open index.html and play the game immediately.