Free Snake Game Source Code in HTML, CSS and JavaScript complete code single file.
If you are looking for a simple HTML5 game source code project, this Snake Game is a good place to start.
It is built with HTML, CSS, and JavaScript and can run directly in a modern web browser.
You can use this free source code to learn how a basic browser game works and customize the design, speed, colors, controls, and other features.
Game Features and Source Code
Game Features Simple Snake gameplay Score counter Keyboard controls Game-over system Restart button No external libraries required Easy-to-edit HTML, CSS, and JavaScript Works in modern browsers How to Use the Code You don’t need any special software to test this game.
Step 1: Create an HTML File Create a new file and name it: index.html
Step 2: Add the Source Code Copy the complete code below and paste it into your index.html file.
Step 3: Open the File Save the file and open it with Chrome, Edge, Firefox, or another modern browser.
Your Snake Game should now appear in the browser.
Complete Snake Game Source Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Snake Game</title> <style> * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: flex; justify-content: center; align-items: center; background: #111827; font-family: Arial, sans-serif; color: white; } .game-container { text-align: center; width: 100%; max-width: 430px; padding: 20px; } h1 { margin-bottom: 10px; } .score { font-size: 20px; margin-bottom: 12px; } canvas { width: 100%; max-width: 400px; height: auto; background: #1f2937; border: 2px solid #374151; display: block; margin: auto; } button { margin-top: 15px; padding: 10px 22px; border: 0; border-radius: 6px; cursor: pointer; font-size: 16px; } </style> </head> <body> <div class="game-container"> <h1>Snake Game</h1> <div class="score"> Score: <span id="score">0</span> </div> <canvas id="gameCanvas" width="400" height="400"></canvas> <button onclick="restartGame()">Restart Game</button> </div> <script> const canvas = document.getElementById("gameCanvas"); const ctx = canvas.getContext("2d"); const scoreElement = document.getElementById("score"); const gridSize = 20; const tileCount = canvas.width / gridSize; let snake; let food; let direction; let nextDirection; let score; let gameLoop; function startGame() { snake = [ { x: 10, y: 10 }, { x: 9, y: 10 }, { x: 8, y: 10 } ]; food = createFood(); direction = { x: 1, y: 0 }; nextDirection = { x: 1, y: 0 }; score = 0; scoreElement.textContent = score; clearInterval(gameLoop); gameLoop = setInterval(updateGame, 100); } function createFood() { let newFood; do { newFood = { x: Math.floor(Math.random() * tileCount), y: Math.floor(Math.random() * tileCount) }; } while ( snake && snake.some(part => part.x === newFood.x && part.y === newFood.y) ); return newFood; } function updateGame() { direction = nextDirection; const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y }; // Wall collision if ( head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount ) { gameOver(); return; } // Snake collision if ( snake.some(part => part.x === head.x && part.y === head.y) ) { gameOver(); return; } snake.unshift(head); // Food collision if (head.x === food.x && head.y === food.y) { score++; scoreElement.textContent = score; food = createFood(); } else { snake.pop(); } drawGame(); } function drawGame() { ctx.fillStyle = "#1f2937"; ctx.fillRect(0, 0, canvas.width, canvas.height); // Draw food ctx.fillStyle = "#ef4444"; ctx.fillRect( food.x * gridSize, food.y * gridSize, gridSize - 1, gridSize - 1 ); // Draw snake ctx.fillStyle = "#22c55e"; snake.forEach(part => { ctx.fillRect( part.x * gridSize, part.y * gridSize, gridSize - 1, gridSize - 1 ); }); } function gameOver() { clearInterval(gameLoop); setTimeout(() => { alert("Game Over! Your score was " + score); }, 50); } function restartGame() { startGame(); } document.addEventListener("keydown", function(event) { const key = event.key.toLowerCase(); if ((key === "arrowup" || key === "w") && direction.y !== 1) { nextDirection = { x: 0, y: -1 }; } if ((key === "arrowdown" || key === "s") && direction.y !== -1) { nextDirection = { x: 0, y: 1 }; } if ((key === "arrowleft" || key === "a") && direction.x !== 1) { nextDirection = { x: -1, y: 0 }; } if ((key === "arrowright" || key === "d") && direction.x !== -1) { nextDirection = { x: 1, y: 0 }; } }); startGame(); </script> </body> </html>How the Game Works
The game uses an HTML5 <canvas> element to display the playing area.
JavaScript controls the main game logic. It keeps track of the snake’s position, creates food at random locations, updates the score, detects collisions, and controls the movement of the snake.
The game loop runs continuously and updates the canvas as the snake moves.
ControlsYou can control the snake using:Arrow Up – Move up
Arrow Down – Move down
Arrow Left – Move left
Arrow Right – Move right
You can also use W, A, S, and D on a keyboard.
How to Customize the GameYou can easily change different parts of the game.
For example, you can change the game background by editing:background: #1f2937;You can also change the snake color:ctx.fillStyle = “#22c55e”;
And the food color:ctx.fillStyle = “#ef4444”;
You can experiment with different colors, game speeds, canvas sizes, and scoring systems.
Can I Use This Code on My Website?
Yes. You can use this source code as a starting point for your own HTML5 game project. You can also modify the code to add your own features and design.
Before publishing a project commercially, make sure that any additional assets, sounds, images, fonts, or libraries you add have appropriate usage rights.
Final ThoughtsThis Snake Game is a simple example of how HTML, CSS, and JavaScript can work together to create an interactive browser game.
If you are learning web development, try changing one feature at a time and see how it affects the game. This is one of the easiest ways to understand JavaScript game development.
More free HTML5 game source code and tutorials will be added to this website.