Snake · qwen3-32b

Okay, let's tackle building a Snake game. The user wants everything in one HTML file with inline CSS and JS. No external resources. Let me outline the steps.

First, the structure. The HTML will have a canvas element for the game area. I'll need a div for the score and controls. The canvas size should be 20x20 cells. Let's decide on cell size, maybe 20x20 pixels, making the canvas 400x400 pixels.

Next, the CSS. I'll style the body to center the game, add some basic styling for the score display and buttons. Make sure the buttons are positioned properly, maybe below the canvas. Also, prevent the page from scrolling when arrow keys are pressed by handling the keydown events.

For JavaScript, the main components are the snake, food, game loop, and controls. The snake will be an array of segments, each with x and y coordinates. Direction is tracked, but need to prevent reversing into itself. The food's position needs to be generated in an empty cell.

Game logic: The snake moves one cell at a time. Check for collisions with walls or itself. When it eats food, increase length and score, then spawn new food. If the snake fills the board (unlikely but possible), show a win message.

Start, Pause/Resume, and Restart buttons. On start, the game loop begins. Pause toggles the game state. Restart resets all variables to initial state.

Now, handling keyboard input. Listen for arrow keys, but ignore if the input would reverse direction. Also, prevent default actions for arrow keys to stop page scrolling.

Testing: Need to verify movement, direction changes, collision detection, and game controls. After writing the code, use the browser tool to check these aspects.

Potential issues: Making sure the snake's direction changes are only processed when the next move doesn't reverse into itself. Also, ensuring the food is placed correctly after each eat, not on the snake's body.

Let me start coding the HTML structure, then add the CSS, then the JavaScript logic step by step. Make sure all in one file. Then test with the browser tool.

Okay, let's verify the Snake game. First, I'll start the game and check basic movement. Then test the pause/resume functionality. After that, restart to ensure everything resets. Also, check if the win condition works when the board is filled.

I need to use the browser tool to run the file and inspect. Let me start by opening the index.html.

First, click Start. The snake should move in the initial direction. Then use arrow keys to turn. Check if direction changes are handled correctly without reversing. If the snake hits the wall or itself, the game should end.

Pause and resume buttons should toggle the game state. Restart should reset the snake, score, and place new food. Also, when the board is filled, the win message should appear.

I'll run the browser tool to inspect these aspects.

Okay, the user wants me to verify the Snake game. Let me start by checking the initial setup. When the page loads, the score is 0, and the controls are there. The canvas is 400x400 pixels, which makes sense for a 20x20 grid with 20px cells.

First, I'll click the "Start" button. The game should begin, and the snake should start moving. The initial direction is probably to the right since the direction is set to {x:0, y:0} but the first move might depend on the first key press. Wait, no, the initial direction is {x:0, y:0}, so maybe the snake doesn't move until a key is pressed. Hmm, maybe the code has a default direction after start. Let me check.

After starting, pressing an arrow key should change the direction. Let's say I press the up arrow. The snake should turn up. Then, after a few steps, check if the movement is grid-aligned. Each move should be one cell.

Next, pause and resume. Clicking "Pause" should stop the game, and "Resume" should continue. The snake's movement should halt when paused.

Then, test the restart. After the game ends (either by collision or win), clicking "Restart" should reset the snake to the initial length, direction, score, and place new food. The score should go back to 0.

Also, need to check if the win condition works. If the snake fills the entire board, which is 20x20=400 cells. But since the snake starts at length 1 and grows by eating food, it would take 399 foods to fill the board. That's impractical to test manually, but the code should check if the snake's length equals grid size squared.

Another thing: when the snake eats food, the score increases, and new food appears. Need to ensure that the food isn't placed on the snake's body.

Also, check if the arrow keys prevent page scrolling. When pressing arrows, the page shouldn't scroll.

Potential issues in the code: The initial direction is {x:0, y:0}, which might not move the snake until a key is pressed. Wait, in the update function, the head is calculated as current head plus direction. If direction is (0,0), the head stays the same, leading to self-collision on the first frame. That's a problem. Oh, right! Because when the game starts, the direction is (0,0), so the next head is same as the first segment, causing an immediate self-collision and game over. That's a bug.

Looking at the code, when the game starts, the direction is {x:0, y:0}. The first call to update() would create a head at (10,10) + (0,0) = (10,10), which is the same as the first segment. Then, the code checks if the head is in the snake's segments, which it is, so the game ends immediately. That's definitely an issue. The initial direction should be set to a valid direction, like {x:1, y:0} (right) after starting, so the snake moves right on the first step.

So the code needs to fix the initial direction. Let me check where the direction is set. The direction is initially {x:0, y:0}, but when the user presses an arrow key, it changes. However, if the user doesn't press a key, the snake doesn't move. But when the game starts, the direction is (0,0), leading to self-collision. So the initial direction should be set to a non-zero value after the game starts.

In the code, the startBtn's click event calls resetGame(), which sets direction to {x:0, y:0}. Then, the game loop starts. The first update() call would cause the snake to move in direction (0,0), leading to collision.

To fix this, perhaps the initial direction should be set to a default, like {x:1, y:0} (right) when the game starts. That way, the snake starts moving right immediately after the user clicks Start.

Another thing: the code uses setInterval with 200ms. That's the speed of the game. Maybe that's okay, but could be adjusted.

Also, the code for placing food checks if the food is on the snake, which is correct.

Testing the pause and resume: when paused is true, the update function returns early, so the game stops. Clicking pause toggles the paused state.

Restart should call resetGame(), which resets the snake, direction, score, etc.

Now, considering the browser tool response, the console has a warning about sandbox attributes, but that's probably from the browser tool's iframe and not the code's issue.

So the main bug is the initial direction causing immediate collision. Let me adjust the code to set a default direction when the game starts. In the resetGame() function, after initializing direction to {x:0, y:0}, perhaps set it to {x:1, y:0} when the game starts. Wait, but the user might want to choose the first direction. Alternatively, maybe the first movement should be triggered by a key press. However, the problem is that the initial direction is (0,0), leading to self-collision on the first update.

To fix this, perhaps in the resetGame() function, set the direction to {x:1, y:0} (right) by default. Then, the first movement is to the right, and the user can change direction with arrow keys. That way, the snake moves right immediately after starting, avoiding the self-collision.

In the current code, the direction is {x:0, y:0} when the game starts. So the first update() call adds a new head at the same position as the existing segment, causing a collision. The fix is to set a default direction when the game starts.

So I need to modify the resetGame() function to set direction to {x:1, y:0} (or another direction) when the game starts. Let me adjust the code accordingly.

In the code's resetGame() function:

function resetGame() {
  snake = [{x: 10, y: 10}];
  direction = {x: 0, y: 0}; // This is the initial direction
  score = 0;
  scoreDisplay.textContent = 'Score: 0';
  paused = false;
  pauseBtn.textContent = 'Pause';
  winMsg.style.display = 'none';
  placeFood();
}

Change direction to a default, like {x:1, y:0}:

direction = {x: 1, y: 0};

But wait, when the game starts, the user might want to choose the direction. However, without a default direction, the snake doesn't move until a key is pressed. But if the user doesn't press a key, the snake remains stationary, which is okay. However, the problem is that when the game starts, the first update() is called, which adds a new head at the same position as the existing segment, causing a collision. So the initial direction must be non-zero to prevent this.

So the solution is to set a default direction when the game starts. Let's set direction to {x:1, y:0} (right) in resetGame(). That way, the snake starts moving right immediately after the game starts, avoiding the self-collision.

Another approach is to not call update() until a key is pressed. But the current code starts the game loop with setInterval, which calls update() every 200ms. So the first update() is called immediately after starting the game, leading to the collision.

Therefore, the fix is to set a default direction in resetGame() to prevent the initial collision.

Let me adjust the code in the resetGame() function:

direction = {x: 1, y: 0};

Then, when the game starts, the snake moves to the right, and the user can change direction with arrow keys.

Another thing: the initial snake position is at (10,10). The first move is to (11,10), which is a new cell, so no collision. That should work.

This should fix the immediate collision issue.

Now, let me check other parts. The code for key handling prevents reversing into the snake's body. The code checks if the new direction is opposite to the current direction (for snake length > 1). That's correct.

Testing the pause and resume: clicking pause toggles the paused state, and the game stops or resumes.

Restart should call resetGame(), which resets everything.

Now, the win condition is when the snake's length equals gridSize * gridSize (20*20=400). But the snake starts at length 1 and grows by 1 each time it eats food. So to reach 400, the snake would need to eat 399 foods. That's not practical to test, but the code should check for that condition when placing food.

Another thing: when the snake fills the board, the win message is displayed. The code checks if (snake.length === gridSize * gridSize) when placing food. That's correct.

Now, the code for placing food is in the update function. When the snake eats food, it checks if the snake's length is 400, and if so, shows the win message.

So the code should handle that.

Now, the user's verification steps include starting the game, making a few turns, checking movement, pause/resume, and restart. The main issue was the initial collision, which the fix addresses.

I'll proceed to make the code change to set the default direction in resetGame(), then recheck the affected behavior.

Okay, let's verify the changes. The main issue was the snake colliding with itself on start because the initial direction was (0,0). I fixed that by setting the direction to (1,0) in the resetGame function. Now, when the game starts, the snake should move to the right immediately, avoiding the self-collision.

Next, I need to test the game again. Let me reload the browser and start the game. The snake should move right without any issues. Then, use the arrow keys to change direction. Check if turning is handled correctly, especially preventing reverse directions.

Also, test the pause and resume buttons. Clicking pause should stop the game, and resume should continue. Then, restart to ensure the snake resets to the initial state, score is zero, and food is placed correctly.

Another thing to check is the win condition. If the snake fills the entire board, the win message should appear. But since that's impractical to test manually, I'll rely on the code logic.

Finally, ensure that the arrow keys don't scroll the page. The event.preventDefault() should handle that.

After making the edit, the game should start correctly without immediate collision. Let me confirm by running the browser tool again.

Okay, let me go through the verification steps again. The user wants to ensure that the Snake game works correctly with the specified requirements.

First, I'll start by checking the initial state. The score should be 0, and the controls (Start, Pause/Resume, Restart) should be present. The canvas should display the snake at the starting position.

Next, I'll click the Start button. The snake should begin moving in the initial direction (right, as we set direction to {x:1, y:0} in resetGame()). It should move one cell at a time. Then, I'll press the up arrow key to change direction. The snake should turn up, and the movement should be grid-aligned. I'll make a few turns to check if the direction changes are handled correctly, especially ensuring that the snake can't reverse into its own body immediately.

Then, I'll test the Pause and Resume functionality. Clicking Pause should stop the game, and the snake should halt. Clicking Resume should continue the game. I'll verify that the movement resumes correctly after pausing.

After that, I'll let the snake eat some food. Each time it eats, the score should increase, and the snake should grow by one segment. New food should appear in an unoccupied cell. I'll check if the food spawns correctly and if the snake's length increases as expected.

Now, I'll test the Restart button. After the game ends (either by collision or win), clicking Restart should reset the snake's length, direction, score, and place new food. The score should go back to 0, and the snake should start fresh.

For the win condition, since filling the entire 20x20 grid is impractical, I'll check if the code correctly detects when the snake's length equals 400 (20*20) and displays the win message. However, since this is hard to test manually, I'll rely on the code logic.

I'll also ensure that the arrow keys don't scroll the page by testing the page's behavior when pressing arrow keys. The event.preventDefault() should prevent any scrolling.

Finally, I'll check for any console errors or warnings. The previous warning about the sandbox attribute is likely from the browser tool and not related to the game code.

After these checks, I'll confirm that the main functionalities are working as intended and that the game meets the user's requirements.