"Snake" in JavaScript: your first game project in the browser

Start screen and interface layout

Here is the minimal HTML that creates three states: start, game and "game over", plus the score and the game field.

<div id="startScreen">
  <h1>🐍 Змейка</h1>
  <button onclick="startGame()">Начать игру</button>
</div>

<div id="gameOverScreen" style="display:none">
  <h1>💀 Игра окончена!</h1>
  <p id="finalScore"></p>
  <button onclick="location.reload()">Играть снова</button>
</div>

<h1 id="score">Очки: 0</h1>
<canvas id="game" width="320" height="320"></canvas>
    

What's going on here:

• #startScreen — welcome screen. The button calls the startGame() function.

• #gameOverScreen — appears after the snake collides with itself or the border.

• #score — displays the current points.

• <canvas> — the playing field on which the snake and food are drawn.

  

Quick glossary of terms 👇

• Canvas — HTML element for 2D drawing. You can manually draw squares, lines, and shapes using JavaScript.

• Grid — the field is divided into equal squares (for example, 16×16 pixels). All coordinates of the snake and food are expressed through the cells.

• Game loop — a function that regularly updates the state of the game and redraws the field.

• Collisions — checks whether the snake has crashed into itself or the border, and whether it has eaten the food.

• State — a set of variables: coordinates, direction of movement, score, status (the game is in progress or finished).

How to liven up the game: logic in JavaScript?

Add a script that will control the movement of the snake, check collisions and draw each frame:

1. Initialization: create canvas and context 2d, define the size of the cell and the array of snake segments.

2. Management: track keystrokes ArrowUp, ArrowDown, ArrowLeft, ArrowRight.

3. Game cycle: every 150 ms move the snake, check for collisions, update the score.

4. Rendering: clear the field and draw food and snake segments again.

💡 Tip: use requestAnimationFrame for smoothness, and adjust the movement frequency through the accumulated timer.

Ideas for improvements.

• Add acceleration - the game will be more difficult with each level.

• Make "teleports" at the edges of the field so that the snake comes out on the other side.

• Keep records in localStorage.

• Add light and dark themes.

• Implement a pause on the P or Esc key.

Creating the Snake game is a great first step in learning JavaScript. You will not only learn how to work with canvas and loops, but also understand the basics of game logic: movement, collisions, state, and interface updates.

Project "Snake" — part of the training mini-projects from the application Code, created specifically for beginners. It helps you understand the basics of JavaScript, understand how game logic works, and see how your code comes to life right in the browser.

In Codice Dozens of similar projects await you — from simple games to small applications with an interface and logic. Each of them is a step forward to learning how to write code confidently and with interest.

And we also have a cozy Telegram community, where we help each other, share ideas and just talk about programming. Join us — it will be great! 🚀

👉 Our community: https://t.me/coursme