Snake on canvas with crisp grid movement, an input queue that fixes THE classic Snake bug, wrap-around walls as an option, and touch controls so it plays on a phone.
Set up grid-based movement on a fixed tick inside rAF.
let snake = [{x:12,y:12},{x:11,y:12},{x:10,y:12}];
let dir = {x:1, y:0};
let lastTick = 0;
function loop(t) {
if (t - lastTick > 120) {
lastTick = t;
const head = { x: snake[0].x + dir.x,
y: snake[0].y + dir.y };
snake.unshift(head);
snake.pop();
}
draw();
requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
Queue direction changes so fast double-presses cannot reverse the snake.
let inputQueue = [];
document.addEventListener("keydown", function(e) {
const map = { ArrowUp:{x:0,y:-1}, ArrowDown:{x:0,y:1},
ArrowLeft:{x:-1,y:0}, ArrowRight:{x:1,y:0} };
if (map[e.key]) inputQueue.push(map[e.key]);
});
// at each tick, before moving:
while (inputQueue.length) {
const want = inputQueue.shift();
if (want.x !== -dir.x || want.y !== -dir.y) {
dir = want;
break; // one turn per tick
}
}
const want = inputQueue.();
if (want.x !== || want.y !== -dir.y) {
dir = want;
;
}
Add food that respawns safely and grows the snake.
function spawnFood() {
while (true) {
const f = { x: Math.floor(Math.random() * 25),
y: Math.floor(Math.random() * 25) };
const onSnake = snake.some(c => c.x === f.x && c.y === f.y);
if (!onSnake) return f;
}
}
let food = spawnFood();
// in the tick:
snake.unshift(head);
if (head.x === food.x && head.y === food.y)
food = spawnFood(); // grew, no pop
else
snake.pop();
Implement both wall modes and self-collision death.
const wrapMode = document.getElementById("wrap").checked;
if (wrapMode) {
head.x = (head.x + 25) % 25;
head.y = (head.y + 25) % 25;
} else if (head.x < 0 || head.x > 24 ||
head.y < 0 || head.y > 24) {
dead = true;
}
if (snake.some(c => c.x === head.x && c.y === head.y))
dead = true;
head.x = (head.x + ) % ;
Add swipe input so the game works on any phone.
let touchStart = null;
canvas.addEventListener("touchstart", function(e) {
touchStart = { x: e.touches[0].clientX,
y: e.touches[0].clientY };
e.preventDefault();
});
canvas.addEventListener("touchend", function(e) {
if (!touchStart) return;
const dx = e.changedTouches[0].clientX - touchStart.x;
const dy = e.changedTouches[0].clientY - touchStart.y;
if (Math.abs(dx) > Math.abs(dy))
inputQueue.push({ x: dx > 0 ? 1 : -1, y: 0 });
else
inputQueue.push({ x: 0, y: dy > 0 ? 1 : -1 });
});
Finish with a speed curve, a pretty snake and a persistent record.
const tickTime = Math.max(60, 120 - snake.length * 2);
// gradient body while drawing (i = segment index):
snake.forEach(function(c, i) {
const light = 55 - Math.min(35, i * 1.5);
ctx.fillStyle = "hsl(155, 70%, " + light + "%)";
ctx.fillRect(c.x * 20 + 1, c.y * 20 + 1, 18, 18);
});
const tickTime = Math.(60, 120 - snake. * 2);