Simple Snake game in HTML and JavaScript

Snake is so simple everyone can do it. But in case you need inspiration, here is how.

Photo by Waldemar Brandt on Unsplash
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Snake</title>
</head>
<body>
</body>
</html>
<canvas id="canvas" width="400" height="400"></canvas>

Javascript

After the canvas add script tag, this is where the JavaScript will be, that will handle the snake logic and rendering to the canvas.

var canvas, ctx;window.onload = function() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
document.addEventListener("keydown", keyDownEvent); // render X times per second
var x = 8;
setInterval(draw, 1000 / x);
};

Input

Now we need to define the keyDownEvent function. Key codes represent the arrow keys, starting with the left arrow key and going clockwise.

function keyDownEvent(e) {
switch (e.keyCode) {
case 37:
nextX = -1;
nextY = 0;
break;
case 38:
nextX = 0;
nextY = -1;
break;
case 39:
nextX = 1;
nextY = 0;
break;
case 40:
nextX = 0;
nextY = 1;
break;
}
}

Snake

Lets define the Snake variables so we have a better idea.

// snake
var defaultTailSize = 3;
var tailSize = defaultTailSize;
var snakeTrail = [];
var snakeX = snakeY = 10;

Game world

The game world is where our snake and our apple lives. It’s defined as a 20x20 grid. So 20x20 = 400, which matches the canvas width & height.

// game world
var gridSize = tileSize = 20; // 20 x 20 = 400
var nextX = nextY = 0;

Apple

For apple we just need to define an X and Y position.

// apple
var appleX = (appleY = 15);

Updating the game world (draw)

So every X times we call the function draw. It does a few things. First we need to move the snake to the next position.

// move snake in next pos
snakeX += nextX;
snakeY += nextY;
// snake over game world?
if (snakeX < 0) {
snakeX = gridSize - 1;
}
if (snakeX > gridSize - 1) {
snakeX = 0;
}
if (snakeY < 0) {
snakeY = gridSize - 1;
}
if (snakeY > gridSize - 1) {
snakeY = 0;
}
//snake bite apple?
if (snakeX == appleX && snakeY == appleY) {
tailSize++;
appleX = Math.floor(Math.random() * gridSize);
appleY = Math.floor(Math.random() * gridSize);
}
//paint background
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// paint snake
ctx.fillStyle = "green";
for (var i = 0; i < snakeTrail.length; i++) {
ctx.fillRect(
snakeTrail[i].x * tileSize,
snakeTrail[i].y * tileSize,
tileSize,
tileSize
);
//snake bites it's tail?
if (snakeTrail[i].x == snakeX && snakeTrail[i].y == snakeY) {
tailSize = defaultTailSize;
}
}
// paint apple
ctx.fillStyle = "red";
ctx.fillRect(appleX * tileSize, appleY * tileSize, tileSize, tileSize);
//set snake trail
snakeTrail.push({ x: snakeX, y: snakeY });
while (snakeTrail.length > tailSize) {
snakeTrail.shift();
}

developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store