Snake Game

Okay, the user wants a single HTML snake game. Let me recall how to make a simple snake game in HTML/JS. Need to create an HTML file with canvas. The game loop using setInterval or requestAnimationFrame. Basic snake movement, wrap around the canvas edges, grow when eating food, check collision. Keep it simple: start small canvas, say 400x400. Snake starts with length 4, food random. Update positions each frame. Check if snake hits food, increase length. Check collision with walls (wrap around), self. Use JS to handle game state. Display on canvas. Maybe add controls with arrow keys. Structure: canvas element, JS inside Wait, but using setInterval might not sync with animation, better use requestAnimationFrame. But need to call update in loop. Alternatively, in draw function use requestAnimationFrame and call update before draw. Let me adjust: function loop() { update(); draw(); requestAnimationFrame(loop); } Then start with requestAnimationFrame(loop); That's smoother. Also, initial direction should not cause immediate reverse. In start, direction x=1, y=0 (right). Snake is moving right initially. Need to check in key listener that direction doesn't reverse. E.g., if currently moving right (x=1), can't go left (x=-1) immediately. Yes, as in the key listener code above: if trying to go left while direction.x is 1 (right), skip. Wait, direction is {x:1, y:0} for right. So for ArrowLeft, check if direction.x !== 1? No: if current direction is right (x=1), trying to go left (x=-1) would be reverse, so block it. In key listener: if (e.key === 'ArrowLeft' && direction.x !== 1) ... because current direction.x is 1 (right), so direction.x !== 1 would be false, so don't allow. Wait: direction.x is 1 (right). Want to prevent going left (x=-1), which would be opposite. So check if current direction.x is not equal to 1 when trying to go left? No: Better: when trying to set direction to left (-1,0), check that current direction is not right (1,0). So if direction.x === 1 (moving right), can't move left. So in code: if (e.key === 'ArrowLeft' && direction.x !== 1) ... no: direction.x is current x direction. If current direction is {x:1, y:0} (right), then trying to go left (x=-1), so check if direction.x !== -1? No: We want to prevent opposite direction. So if current direction is (dx, dy), new direction should not be (-dx, dy) for x or (dx, -dy) for y. So for ArrowLeft (dx=-1, dy=0), check that current direction.x !== 1 (since 1 and -1 are opposites). Yes: if current direction.x is 1 (right), can't go left (-1). So condition: direction.x !== 1 for ArrowLeft. Wait: - Current direction x=1 (right), can't go left (x=-1), so check if direction.x !== 1? No: If direction.x is 1 (current moving right), then trying to move left would set direction.x to -1, which is opposite. So to prevent that, check that current direction.x is not equal to 1 (i.e., not moving right) when trying to go left? No: Better: if new direction x is -1 (left), check current direction x is not 1 (right). Similarly, new direction x=1, check current x not -1. So in code: if (e.key === 'ArrowLeft') { if (direction.x !== 1) direction = {x:-1, y:0}; // because if currently moving right (x=1), can't go left } Yes: direction.x is current x component. If current is 1 (right), direction.x !== 1 is false, so don't allow left. Correct. Similarly, ArrowRight: if direction.x !== -1, allow. Same for up/down. In initial direction, say direction.x=1, y=0 (right), so can go up/down/right, but not left immediately. Good. Food placement: ensure not on snake head initially. In initial setup, food should not overlap snake. So after placing snake, generate food until it's not on snake. But in the code above, after snake is set, food is generated in loop until not on snake[0] (head), but need to check entire snake? No, because snake moves, food should not be on any part of snake at start. In the do-while loop: while (food.x===snake[0].x && food.y===snake[0].y) — but snake has multiple segments. Better check against all snake segments. But for simplicity, maybe check against head only on first placement? No, could be on tail if food coincides, but unlikely with random. But to be safe: do { food.x = Math.floor(Math.random()*canvas.width); food.y = Math.floor(Math.random()*canvas.height); } while (snake.some(seg => seg.x===food.x && seg.y===food.y)); Yes, better use snake.some. But in JS, need to loop or use some. In the code, during food placement after eating, do: do { food.x = Math.floor(Math.random() * canvas.width); food.y = Math.floor(Math.random() * canvas.height); } while (snake.some(seg => seg.x === food.x && seg.y === food.y)); But canvas width and height are in pixels; food is 10x10, so coordinates: food.x is left x, so from 0 to width-10. But for placement, random x from 0 to width-10, same for y. Wait, in the snake segments, each segment is 10x10, so x ranges 0-390 for 400 canvas (since 0-9, 10-19, etc., up to 390-399). So food.x should be between 0 and canvas.width -10. Thus food.x = Math.floor(Math.random() * (canvas.width - 10)) + 0? Or easier: food.x = Math.floor(Math.random() * canvas.width); but then when checking collision, it's possible food.x=400 which is out, but canvas is 400, so x from 0-399. But segment x is from 0-390 if size 10. Better to have food and snake segments at integer positions 0-399 for 10px blocks, so food.x is 0-390, but when randomizing, food.x = Math.floor(Math.random() * canvas.width) could give up to 399, which is top-left of food at 399, size 10 would go to 409, which is out. Ah, mistake: if canvas width is 400, and each block is 10px, then the max x for a block's left side is 390 (since 390-399 is the block). So food.x should be in 0-390, same for snake. Thus food.x = Math.floor(Math.random() * (canvas.width - 10)) + 0? No: Number of possible x positions: canvas.width / 10, since 10px per segment. Canvas 400, so 40 positions in width (0-39 for indices), each index i corresponds to x = i*10. Thus better to use grid indices, but for simplicity, use pixel coordinates with step 10. In code, snake segments have x=100 for start, etc., assuming speed 10px per frame (1 segment length 10px). Yes, direction change is 10px per frame, so moving 10px each frame. Thus food should be placed at multiples of 10? No, the code uses integer x and y as left coordinates, e.g., snake head at x=100 means from 100-109px. So food.x should be random between 0 and 390 (since 390-399 is last block). Thus food.x = Math.floor(Math.random() * 40) * 10, but easier to do: food.x = Math.floor(Math.random() * (canvas.width - 10)) + 0; no: food.x = Math.floor(Math.random() * canvas.width); but then cap at canvas.width -10. Better: food.x = 10 * Math.floor(Math.random() * (canvas.width / 10)); But canvas.width=400, canvas.width/10=40, so 0-39*10. Yes, safest: food.x = Math.floor(Math.random() * (canvas.width / 10)) * 10; food.y similarly. But to avoid floating, canvas.width is integer, /10 may not be integer if canvas not multiple of 10, but 400 is. Assume canvas multiple of 10. In code, canvas width=400, so 40 cells. Thus: food.x = 10 * Math.floor(Math.random() * 40); food.y = 10 * Math.floor(Math.random() * 40); Yes, that ensures food is on grid. Similarly, snake starts at (100,50) which is 10*10=100, etc. Adjust code to use grid positions multiplied by 10. But for simplicity in code, use x as grid index, but no— easier to use pixel positions with step 10. In initial snake: [ {x:10*10, y:10*5}, ... ] — x=100, y=50 as before. Yes. So food placement: food.x = 10 * Math.floor(Math.random() * 40); food.y = 10 * Math.floor(Math.random() * 40); And check against snake segments: snake.some(seg => seg.x == food.x && seg.y == food.y) Yes. Modify food placement: do { food.x = 10 * Math.floor(Math.random() * 40); food.y = 10 * Math.floor(Math.random() * 40); } while (snake.some(seg => seg.x === food.x && seg.y === food.y)); Similarly, initial food: Same do-while. In initial setup, after defining snake, place food: do { food.x = 10 * Math.floor(Math.random() * 40); food.y = 10 * Math.floor(Math.random() * 40); } while (snake.some(seg => seg.x === food.x && seg.y === food.y)); Good. Now, movement: head moves direction * speed. If speed is 10px per frame, direction (1,0) moves right 10px each frame. Yes. Wrap around: if head.x <0, set to canvas.width -10; if > canvas.width-10, set to 0. Similarly for y. Collision with self: check all snake segments except head vs new head. In update: head = {x: snake[0].x + dx*10, y: snake[0].y + dy*10} But better: const nextHead = {x: snake[0].x + direction.x * 10, y: snake[0].y + direction.y * 10}; Then check against snake[1:], since snake[0] is head, next head vs rest. Yes: if (nextHead.x === snake[i].x && nextHead.y === snake[i].y for i>=1) collision. In code: const head = {x: snake[0].x + direction.x * 10, y: snake[0].y + direction.y * 10}; Then check snake.slice(1).some(seg => seg.x===head.x && seg.y===head.y) Yes. So update: function update() { const head = {x: snake[0].x + direction.x * 10, y: snake[0].y + direction.y * 10}; // wrap if (head.x < 0) head.x = canvas.width - 10; else if (head.x > canvas.width - 10) head.x = 0; if (head.y < 0) head.y = canvas.height - 10; else if (head.y > canvas.height - 10) head.y = 0; // check self collision (excluding head vs itself) if (snake.slice(1).some(seg => seg.x === head.x && seg.y === head.y)) { // game over clearInterval(gameLoop); // but using requestAnimationFrame, so stop loop return; } // check food if (head.x === food.x && head.y === food.y) { snake.push(head); // grow, don't shift // place new food do { food.x = 10 * Math.floor(Math.random() * 40); food.y = 10 * Math.floor(Math.random() * 40); } while (snake.some(seg => seg.x === food.x && seg.y === food.y)); } else { snake.shift(); // remove tail } // new snake: head followed by rest snake = [head, ...snake.slice(1)]; draw(); } But with requestAnimationFrame loop: function loop() { update(); draw(); requestAnimationFrame(loop); } Start with requestAnimationFrame(loop); Remove setInterval. Now, game over: when collision, stop loop. How? In update, if collision, set a flag and loop stops. But requestAnimationFrame can't be stopped directly; instead, in loop, check a gameOver flag. Better: let gameOver = false; function loop() { if (gameOver) return; update(); draw(); requestAnimationFrame(loop); } function update() { if (gameOver) return; const head = {x: snake[0].x + direction.x * 10, y: snake[0].y + direction.y * 10}; // wrap if (head.x < 0) head.x = canvas.width - 10; if (head.x > canvas.width - 10) head.x = 0; if (head.y < 0) head.y = canvas.height - 10; if (head.y > canvas.height - 10) head.y = 0; // self collision if (snake.slice(1).some(seg => seg.x === head.x && seg.y === head.y)) { gameOver = true; return; } // food if (head.x === food.x && head.y === food.y) { snake.push(head); do { food.x = 10 * Math.floor(Math.random() * 40); food.y = 10 * Math.floor(Math.random() * 40); } while (snake.some(seg => seg.x === food.x && seg.y === head.x && seg.y === head.y)); // no, seg.x and seg.y // while (snake.some(seg => seg.x === food.x && seg.y === food.y)); } else { snake.shift(); } snake = [head, ...snake.slice(1)]; } Then in loop, if gameOver, maybe draw "Game Over" message. But user said "single html snake game", minimal. Maybe just stop game. But for simplicity, when game over, stop loop. Yes. Initial direction: let direction = {x:1, y:0}; (right) Snake starts length 4. Canvas 400x400. Style canvas border. Now, write full HTML. Check all in one file. Final code structure: Snake Game

Check: - gridSize = 10, cols=40 (400/10) - placeFood uses gridSize * randomCol - wrap: if head.x <0 -> canvas.width - gridSize (e.g., 400-10=390), yes - self collision checks snake[1:], correct - food placed not on snake - direction prevents reverse - gameOver stops loop and draws "Game Over" - initial snake and food placed Test mentally: - Snake starts at x=100-70 (x=100 head, x=70 tail), y=50 - Food random, not on snake - Move right: head x increases, tail shifts - When eat food, snake length +1 - Wrap works: if head.x=390 +10=400 >390 (canvas.width-gridSize=390), wrap to 0 Yes Possible bug: in wrap, if head.x <0 set to canvas.width - gridSize, e.g., 400-10=390, which is correct (x=390 is last block start) Yes, block is 10px, so x=390 covers 390-399 Similarly x=0 covers 0-9 Correct In self collision, snake.slice(1) excludes head, checks against rest, correct Yes Game over draws text, minimal This should work as a single HTML file. Now output the HTML code in a code block as per instructions. User said: "Do not mention the iframe in your response." and "include the full HTML in the same code block" So just the HTML code. Make sure no extra text, only the HTML. Yes. Snake Game

make a single html snake game