PatchHub

← patchhub/snake

Dark neon look with glowing snake and food

Published ✓ Safe by @theo 1 user2 votes 2 files changed (+77 −29)

Gives the Snake game a dark neon theme. The snake glows bright green, the food is a glowing pink orb, and the board, title, scores and buttons get neon glows. The start screen and README now say "glowing pink food" instead of red.

What it does

- Page background: radial gradient from #120a24 (center) to #07040f (edge), replacing the flat dark blue-grey. - Title (h1): larger (2.2rem), letter-spacing 6px, near-white cyan text (#e9fffb) with a cyan/blue multi-layer glow. - Score numbers: neon green (#39ff14) with a green glow. - Board canvas: background #05030c, 2px cyan (#00fff0) border, outer cyan glow and a faint inner cyan glow. - Overlay panels (start/game over): background rgba(5,3,12,0.85); headings pale pink (#ffe6fb) with a magenta (#ff2bd6) glow; paragraph text #c9c3e0; help text #8a7fb0. - Buttons: transparent background, 2px neon green outline and green text with glow; on hover or keyboard focus they fill solid neon green with dark text and a stronger glow, with a 0.15s transition. - Canvas grid: replace the checkerboard with faint violet grid lines (rgba(140,60,255,0.14), 1px) between cells. - Food: a glowing hot-pink (#ff2bd6) circle (radius about half a cell minus 4px, blur about 22) with a small bright pale-pink (#ffd6f7) core (radius about a sixth of a cell). - Snake: body neon green #39ff14 and head light green #c8ffb8, both with a green glow (blur 14); cells inset 2px; draw tail first so the head glow is on top. - Game over: head is orange #ff9a3c with an orange glow (#ff6a00), body is dim rust #8a3a1a with no glow. - Eyes on the head use the dark color #05030c. - Text: the start screen line reads "Eat the glowing pink food to grow. Don't hit the walls or yourself!" The README bullet reads "Eat the **glowing pink food** to grow and score a point." - Gameplay, controls and speed are unchanged.

Safety check ✓ Safe

Changes are limited to CSS colors and glow effects, canvas drawing colors, and two text wording updates. There are no new dependencies, network requests, or logic changes.

Conversation that created this patch
@theo
Give it a dark neon look with glowing snake and food.
AI
I've given Snake a dark neon look. The snake is now bright neon green and glows, and its head is a lighter green so it stands out. The food is a glowing hot-pink orb with a bright white center. Other changes you'll notice: - **Background:** a deep purple-black, with faint violet grid lines over the board. - **Board edge:** a glowing cyan border. - **Text:** the "SNAKE" title and the screen headings glow like neon signs. - **Scores and buttons:** the scores glow green, and the buttons are green outlines that light up when you hover over them. - **Game over:** the snake changes to a dim orange with a glowing head, so you can see where you crashed. The food is pink now instead of red, so I changed the start screen and the instructions file to say "glowing pink food." I checked that the game's code has no errors, but I haven't played it in a browser, so open it and see how the glow looks to you.
Code changes (for the curious, 2 files) · raw
README.md +1 −1
@@ -9,7 +9,7 @@ The classic Snake game. It runs in your web browser from a single file and works
3. Press any arrow key, or click **Start**, to begin.
- **Arrow keys** move the snake.
−- Eat the **red food** to grow and score a point. The snake speeds up a little each time it eats.
+- Eat the **glowing pink food** to grow and score a point. The snake speeds up a little each time it eats.
- The game ends if you hit a wall or your own tail.
- On the Game Over screen, click **Play Again** or press **Space** or **Enter** to restart.
- Press **P** to pause and resume.
index.html +76 −28
@@ -13,11 +13,17 @@
flex-direction: column;
align-items: center;
justify-content: center;
− background: #1b1f2a;
+ background: radial-gradient(ellipse at center, #120a24 0%, #07040f 70%);
color: #e8ecf1;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
− h1 { margin: 0 0 12px; font-size: 2rem; letter-spacing: 2px; }
+ h1 {
+ margin: 0 0 12px;
+ font-size: 2.2rem;
+ letter-spacing: 6px;
+ color: #e9fffb;
+ text-shadow: 0 0 4px #fff, 0 0 10px #00fff0, 0 0 22px #00fff0, 0 0 40px #00b3ff;
+ }
.scores {
display: flex;
justify-content: space-between;
@@ -26,7 +32,7 @@
margin-bottom: 8px;
font-size: 1.1rem;
}
− .scores strong { color: #7ee787; }
+ .scores strong { color: #39ff14; text-shadow: 0 0 6px #39ff14, 0 0 14px #39ff14; }
.board {
position: relative;
width: 400px;
@@ -37,9 +43,10 @@
display: block;
width: 100%;
height: 100%;
− background: #0f131b;
− border: 3px solid #3a4152;
+ background: #05030c;
+ border: 2px solid #00fff0;
border-radius: 6px;
+ box-shadow: 0 0 8px #00fff0, 0 0 24px rgba(0, 255, 240, 0.45), inset 0 0 18px rgba(0, 255, 240, 0.25);
}
.overlay {
position: absolute;
@@ -49,26 +56,41 @@
align-items: center;
justify-content: center;
text-align: center;
− background: rgba(10, 12, 18, 0.82);
+ background: rgba(5, 3, 12, 0.85);
border-radius: 6px;
padding: 20px;
}
.hidden { display: none !important; }
− .overlay h2 { margin: 0 0 10px; font-size: 1.8rem; }
− .overlay p { margin: 6px 0; color: #b8c0cc; }
+ .overlay h2 {
+ margin: 0 0 10px;
+ font-size: 1.8rem;
+ color: #ffe6fb;
+ text-shadow: 0 0 4px #fff, 0 0 10px #ff2bd6, 0 0 22px #ff2bd6;
+ }
+ .overlay p { margin: 6px 0; color: #c9c3e0; }
.overlay button {
margin-top: 14px;
padding: 10px 26px;
font-size: 1.1rem;
font-weight: bold;
− color: #0f131b;
− background: #7ee787;
− border: none;
+ color: #39ff14;
+ background: transparent;
+ border: 2px solid #39ff14;
border-radius: 6px;
cursor: pointer;
+ text-shadow: 0 0 6px #39ff14;
+ box-shadow: 0 0 8px #39ff14, inset 0 0 8px rgba(57, 255, 20, 0.4);
+ transition: background 0.15s, color 0.15s, box-shadow 0.15s;
+ }
+ .overlay button:hover,
+ .overlay button:focus-visible {
+ outline: none;
+ color: #05030c;
+ background: #39ff14;
+ text-shadow: none;
+ box-shadow: 0 0 14px #39ff14, 0 0 30px #39ff14;
}
− .overlay button:hover { background: #a5f3ad; }
− .help { margin-top: 12px; color: #8b93a1; font-size: 0.9rem; }
+ .help { margin-top: 12px; color: #8a7fb0; font-size: 0.9rem; }
</style>
</head>
<body>
@@ -83,7 +105,7 @@
<div id="startScreen" class="overlay">
<h2>Snake</h2>
<p>Use the arrow keys to move.</p>
− <p>Eat the red food to grow. Don't hit the walls or yourself!</p>
+ <p>Eat the glowing pink food to grow. Don't hit the walls or yourself!</p>
<button id="startBtn">Start</button>
<p class="help">or press any arrow key</p>
</div>
@@ -242,8 +264,10 @@
}
}
− function drawCell(x, y, color, inset) {
+ function drawCell(x, y, color, inset, glow) {
ctx.fillStyle = color;
+ ctx.shadowColor = glow || color;
+ ctx.shadowBlur = glow ? 14 : 0;
const r = 4;
const px = x * CELL + inset, py = y * CELL + inset, size = CELL - inset * 2;
ctx.beginPath();
@@ -255,29 +279,53 @@
function draw(dead) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
− // subtle grid
− ctx.fillStyle = "#141924";
− for (let x = 0; x < GRID; x++) {
− for (let y = 0; y < GRID; y++) {
− if ((x + y) % 2 === 0) ctx.fillRect(x * CELL, y * CELL, CELL, CELL);
− }
+ // faint neon grid lines
+ ctx.shadowBlur = 0;
+ ctx.strokeStyle = "rgba(140, 60, 255, 0.14)";
+ ctx.lineWidth = 1;
+ ctx.beginPath();
+ for (let i = 1; i < GRID; i++) {
+ ctx.moveTo(i * CELL + 0.5, 0);
+ ctx.lineTo(i * CELL + 0.5, canvas.height);
+ ctx.moveTo(0, i * CELL + 0.5);
+ ctx.lineTo(canvas.width, i * CELL + 0.5);
}
+ ctx.stroke();
if (food) {
− ctx.fillStyle = "#ff5c5c";
+ const fx0 = food.x * CELL + CELL / 2, fy0 = food.y * CELL + CELL / 2;
+ ctx.shadowColor = "#ff2bd6";
+ ctx.shadowBlur = 22;
+ ctx.fillStyle = "#ff2bd6";
+ ctx.beginPath();
+ ctx.arc(fx0, fy0, CELL / 2 - 4, 0, Math.PI * 2);
+ ctx.fill();
+ // bright hot core
+ ctx.shadowBlur = 8;
+ ctx.fillStyle = "#ffd6f7";
ctx.beginPath();
− ctx.arc(food.x * CELL + CELL / 2, food.y * CELL + CELL / 2, CELL / 2 - 3, 0, Math.PI * 2);
+ ctx.arc(fx0, fy0, CELL / 6, 0, Math.PI * 2);
ctx.fill();
}
− snake.forEach((s, i) => {
− const color = dead ? (i === 0 ? "#c9a227" : "#8a7a3a") : (i === 0 ? "#a5f3ad" : "#3fb950");
− drawCell(s.x, s.y, color, 1);
− });
+ // draw tail first so the head's glow sits on top
+ for (let i = snake.length - 1; i >= 0; i--) {
+ const s = snake[i];
+ let color, glow;
+ if (dead) {
+ color = i === 0 ? "#ff9a3c" : "#8a3a1a";
+ glow = i === 0 ? "#ff6a00" : null;
+ } else {
+ color = i === 0 ? "#c8ffb8" : "#39ff14";
+ glow = "#39ff14";
+ }
+ drawCell(s.x, s.y, color, 2, glow);
+ }
+ ctx.shadowBlur = 0;
// eyes on the head
const h = snake[0];
− ctx.fillStyle = "#0f131b";
+ ctx.fillStyle = "#05030c";
const cx = h.x * CELL + CELL / 2, cy = h.y * CELL + CELL / 2;
const off = CELL / 5;
const ex = direction.y !== 0 ? off : 0, ey = direction.x !== 0 ? off : 0;