Snake Game – Classic Snake in JavaScript (Mobile & PC)

HTML

CSS

* { box-sizing: border-box; margin: 0; padding: 0; }
body { min-height: 100vh; display: grid; place-items: center; background: #0f172a; color: #e2e8f0; font-family: "Segoe UI", system-ui, sans-serif; touch-action: none; padding: 12px; }
.game { width: min(480px, 94vw); }
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 1.2rem; }
h1 { letter-spacing: 6px; color: #4ade80; text-shadow: 0 0 20px rgba(74,222,128,.5); }
.board { position: relative; }
canvas { width: 100%; aspect-ratio: 1; display: block; border-radius: 16px; background: #14532d; box-shadow: 0 0 0 4px #166534, 0 20px 50px rgba(0,0,0,.5); }
.overlay { position: absolute; inset: 0; border-radius: 16px; background: rgba(15,23,42,.82); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.overlay.hide { display: none; }
.overlay h2 { font-size: 2.2rem; color: #4ade80; } .overlay p { opacity: .7; }
.lv { display: flex; gap: 8px; } .lv button { border: 2px solid #4ade80; background: none; color: #4ade80; padding: 6px 14px; border-radius: 99px; cursor: pointer; font: inherit; }
.lv button.on { background: #4ade80; color: #0f172a; }
.wrapt { font-size: .9rem; opacity: .8; }
#start { border: 0; background: #4ade80; color: #0f172a; font-weight: 800; font-size: 1.2rem; padding: 12px 40px; border-radius: 14px; cursor: pointer; box-shadow: 0 5px 0 #15803d; }
.pad { display: none; grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(2, 56px); gap: 8px; justify-content: center; margin-top: 16px; }
.pad button { border: 0; border-radius: 14px; background: #1e293b; color: #4ade80; font-size: 1.4rem; }
.pad [data-d=up] { grid-column: 2; } .pad [data-d=left] { grid-column: 1; grid-row: 2; } .pad [data-d=down] { grid-column: 2; grid-row: 2; } .pad [data-d=right] { grid-column: 3; grid-row: 2; }
@media (hover: none) { .pad { display: grid; } }

JS

// Snake game: smooth canvas snake, speed levels, wrap or walls, golden apples, swipe + d-pad, best score
var cv = document.getElementById('c'), ctx = cv.getContext('2d'), N = 20, S = cv.width / N;
var snake, dir, queue, food, gold, score, best = 0, speed = 100, timer, alive = false, walls = false, eat = 0;
try { best = +localStorage.getItem('snake-best') || 0; } catch (e) {}
document.getElementById('best').textContent = best;
function place() { var p; do { p = { x: Math.random() * N | 0, y: Math.random() * N | 0 }; } while (snake.some(function (s) { return s.x === p.x && s.y === p.y; })); return p; }
function start() {
  snake = [{ x: 8, y: 10 }, { x: 7, y: 10 }, { x: 6, y: 10 }]; dir = { x: 1, y: 0 }; queue = []; score = 0; gold = null;
  food = place(); alive = true; walls = document.getElementById('walls').checked;
  document.getElementById('score').textContent = 0; document.getElementById('ov').classList.add('hide');
  clearInterval(timer); timer = setInterval(step, speed);
}
function turn(x, y) {
  var last = queue.length ? queue[queue.length - 1] : dir;
  if (last.x === -x && last.y === -y || last.x === x && last.y === y) return;
  if (queue.length < 3) queue.push({ x: x, y: y });
}
function step() {
  if (queue.length) dir = queue.shift();
  var h = { x: snake[0].x + dir.x, y: snake[0].y + dir.y };
  if (walls && (h.x < 0 || h.y < 0 || h.x >= N || h.y >= N)) return over();
  h.x = (h.x + N) % N; h.y = (h.y + N) % N;
  if (snake.some(function (s, i) { return i < snake.length - 1 && s.x === h.x && s.y === h.y; })) return over();
  snake.unshift(h);
  if (h.x === food.x && h.y === food.y) { add(1); food = place(); if (!gold && Math.random() < .2) gold = { p: place(), t: 40 }; }
  else if (gold && h.x === gold.p.x && h.y === gold.p.y) { add(5); snake.push(snake[snake.length - 1], snake[snake.length - 1]); gold = null; snake.pop(); }
  else snake.pop();
  if (gold && --gold.t <= 0) gold = null;
  draw();
}
function add(n) { score += n; eat = 6; document.getElementById('score').textContent = score; if (score > best) { best = score; document.getElementById('best').textContent = best; try { localStorage.setItem('snake-best', best); } catch (e) {} } }
function over() {
  alive = false; clearInterval(timer);
  document.getElementById('ovt').textContent = 'Game Over'; document.getElementById('ovp').textContent = 'Score: ' + score + ' · Best: ' + best;
  document.getElementById('start').textContent = '↻ Play again'; document.getElementById('ov').classList.remove('hide');
}
function draw() {
  for (var y = 0; y < N; y++) for (var x = 0; x < N; x++) { ctx.fillStyle = (x + y) % 2 ? '#166534' : '#15803d'; ctx.fillRect(x * S, y * S, S, S); }
  drawFruit(food, '#ef4444', '🍎');
  if (gold) drawFruit(gold.p, '#facc15', '⭐');
  snake.forEach(function (s, i) {
    var k = 1 - i / snake.length * .5, pad = i === 0 ? 1 : 2 + (1 - k) * 4;
    ctx.fillStyle = i === 0 ? '#bef264' : 'hsl(' + (90 + i * 2) + ',80%,' + (40 + k * 20) + '%)';
    rr(s.x * S + pad, s.y * S + pad, S - pad * 2, S - pad * 2, 7); ctx.fill();
  });
  var h = snake[0], cx = h.x * S + S / 2, cy = h.y * S + S / 2;
  ctx.fillStyle = '#0f172a';
  [-1, 1].forEach(function (side) { ctx.beginPath(); ctx.arc(cx + dir.x * 4 + dir.y * side * 5, cy + dir.y * 4 - dir.x * side * 5, 3, 0, 7); ctx.fill(); });
  if (eat > 0) { eat--; ctx.strokeStyle = 'rgba(255,255,255,' + eat / 6 + ')'; ctx.lineWidth = 3; ctx.beginPath(); ctx.arc(cx, cy, S * (1.6 - eat / 6), 0, 7); ctx.stroke(); }
}
function drawFruit(p, col, e) { ctx.font = (S * .85) + 'px serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(e, p.x * S + S / 2, p.y * S + S / 2 + 1); }
function rr(x, y, w, h, r) { ctx.beginPath(); ctx.moveTo(x + r, y); ctx.arcTo(x + w, y, x + w, y + h, r); ctx.arcTo(x + w, y + h, x, y + h, r); ctx.arcTo(x, y + h, x, y, r); ctx.arcTo(x, y, x + w, y, r); ctx.closePath(); }
var KEYS = { ArrowUp: [0, -1], KeyW: [0, -1], ArrowDown: [0, 1], KeyS: [0, 1], ArrowLeft: [-1, 0], KeyA: [-1, 0], ArrowRight: [1, 0], KeyD: [1, 0] };
addEventListener('keydown', function (e) {
  if (KEYS[e.code]) { e.preventDefault(); if (alive) turn(KEYS[e.code][0], KEYS[e.code][1]); }
  if ((e.code === 'Space' || e.code === 'Enter') && !alive) start();
});
var D = { up: [0, -1], down: [0, 1], left: [-1, 0], right: [1, 0] };
document.querySelectorAll('.pad button').forEach(function (b) { b.addEventListener('pointerdown', function (e) { e.preventDefault(); var d = D[b.dataset.d]; turn(d[0], d[1]); }); });
var tx, ty;
cv.addEventListener('touchstart', function (e) { tx = e.touches[0].clientX; ty = e.touches[0].clientY; }, { passive: true });
cv.addEventListener('touchmove', function (e) {
  if (tx == null) return; var dx = e.touches[0].clientX - tx, dy = e.touches[0].clientY - ty;
  if (Math.abs(dx) + Math.abs(dy) > 24) { Math.abs(dx) > Math.abs(dy) ? turn(dx > 0 ? 1 : -1, 0) : turn(0, dy > 0 ? 1 : -1); tx = ty = null; }
}, { passive: true });
document.querySelectorAll('.lv button').forEach(function (b) { b.onclick = function () { speed = +b.dataset.s; document.querySelectorAll('.lv button').forEach(function (x) { x.classList.toggle('on', x === b); }); }; });
document.getElementById('start').onclick = start;
snake = [{ x: 8, y: 10 }, { x: 7, y: 10 }, { x: 6, y: 10 }]; dir = { x: 1, y: 0 }; food = { x: 14, y: 10 }; draw();

Snake Game – Classic Snake in JavaScript (Mobile & PC)

Recommended

Comments 0