Jeu du serpent – Snake classique en JavaScript (mobile et PC)

51 0 Jeux codex Suivre

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Jeu du serpent – Snake classique en JavaScript (mobile et PC)

Recommandé

10 October 2026

Chargeur de jeu WebGL Gorilla Tag en HTML et JavaScript

16 January 2026

Modèle HTML de joueur de jeu Ruffle Flash

18 April 2026

Jeux débloqués : recherchez, triez et jouez aux zones GN-Math

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; } }

// 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();

Comments 0

…