Add simple web-based snake game

[beta-devin-ai-integration]

Summary

Adds a self-contained HTML file (snake-game.html) implementing a classic snake game using Canvas 2D. No build step or dependencies required — just open the file in a browser.

Features:

• 20×20 grid, 120ms tick rate
• Arrow keys + WASD controls
• Score tracking with localStorage-persisted high score
• Game over on wall or self collision
• "Play Again" button and Space/Enter to restart
• Neon-styled dark theme with semi-transparent Game Over overlay

Updates since last revision

• Fixed overlay positioning: Replaced getBoundingClientRect()-based JS positioning with pure CSS (top: 0; left: 0; width: 100%; height: 100% relative to parent). The overlay now reliably centers on the canvas regardless of scroll or viewport position.
• Added a semi-transparent dark background to the Game Over overlay for better readability.
• Overlay visibility is now toggled via CSS display: none / display: flex through the .active class.

Review & Testing Checklist for Human

• Play-test the game: Open snake-game.html in a browser and verify movement, food collection, score increment, wall/self collision, and restart all work correctly.
• Verify Game Over overlay alignment: After dying, confirm the "Game Over!" text and "Play Again" button are centered over the canvas (not offset).
• Confirm this standalone file is the desired location — it's dropped at the repo root alongside an unrelated project.

Notes

• The game starts immediately on page load (no "press to start" screen), so the snake will begin moving right away.
• No existing code is modified; this is a purely additive single-file change.

Link to Devin session: https://app.beta.devin.ai/sessions/16acd778c7554d11bf12629942b0fa3b
Requested by: @FOLLGAD

---

[beta-devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[beta-devin-ai-integration]

Devin Review found 1 potential issue.

View 4 additional findings in Devin Review.

[beta-devin-ai-integration]

🔴 Overlay is mispositioned because viewport-relative coordinates are used for an absolutely-positioned child

The #overlay is position: absolute inside a position: relative parent (snake-game.html:106), so its left/top are interpreted relative to that parent. However, showOverlay uses canvas.getBoundingClientRect() which returns viewport-relative coordinates and assigns them directly as left and top. This offsets the overlay by the distance of the container from the viewport origin, causing the "Game Over" overlay and "Play Again" button to appear in the wrong position (shifted far away from the canvas).

Suggested change

	function showOverlay(msg) {
	overlayEl.classList.add('active');
	overlayText.textContent = msg;
	restartBtn.style.display = 'inline-block';
	}
	overlayEl.style.left = '0px';
	overlayEl.style.top = '0px';
	overlayEl.style.width = rect.width + 'px';
	overlayEl.style.height = rect.height + 'px';

---

Was this helpful? React with 👍 or 👎 to provide feedback.

Debug

Playground

[beta-devin-ai-integration]

Already fixed in commit 202058d — removed the getBoundingClientRect() approach entirely and replaced it with pure CSS positioning (top: 0; left: 0; width: 100%; height: 100% relative to the parent container). The overlay now centers correctly on the canvas.

[beta-devin-ai-integration]

Testing Results

Tested the snake game end-to-end using Playwright via CDP against Chrome, served locally at http://localhost:8080/snake-game.html.

All 4 tests passed

• Game loads with correct UI - PASSED: Title "Snake Game", canvas 400x400, score display, controls text
• Arrow key controls & food collection - PASSED: Direction changes work, score incremented 0→1, snake grew to 4 segments, new food spawned
• Game Over overlay centered on wall collision - PASSED: Overlay at 0px offset from canvas, "Game Over!" text + "Play Again" button visible, snake stopped
• Restart via Play Again button - PASSED: Score reset to 0, overlay hidden, game running again

Playwright test output

=== Test 1: Game loads and renders correctly ===
PASS: Title is 'Snake Game'
PASS: Canvas is visible
PASS: Canvas is 400x400
PASS: Controls text present

=== Test 3: Game Over overlay positioning ===
PASS: Overlay is visible after wall collision
PASS: Overlay text is 'Game Over!'
PASS: Play Again button is visible
Canvas box: {'x': 598, 'y': 312.95, 'width': 404, 'height': 404}
Overlay box: {'x': 598, 'y': 312.95, 'width': 404, 'height': 408}
PASS: Overlay centered on canvas (offset: 0px, 0px)
PASS: Snake stopped moving after game over

=== Test 4: Restart via Play Again button ===
PASS: Score reset to '0'
PASS: Overlay hidden after restart
PASS: Game is running after restart

=== Test 2: Controls and food collection ===
PASS: Arrow keys change direction
PASS: Score incremented from 0 to 1
PASS: New food appeared after collection
PASS: Snake grew to 4 segments

Devin session