История и эволюция игры «Змейка»
Прежде чем перейти к технической части, давай вспомним, с чего всё начиналось. Игра «Змейка» (или Snake) появилась ещё в 1976 году в аркадной игре Blockade. Однако массовую популярность она обрела в 1997, когда появилась на мобильных телефонах Nokia. Простая, но затягивающая механика сделала её культовой. Сегодня, в 2025 году, она по-прежнему остаётся отличным учебным проектом для начинающих JavaScript-разработчиков.
Почему «Змейка» — идеальный проект для изучения JavaScript + Canvas
Создание игры «Змейка» на JavaScript — это не просто ностальгия. Это практическое задание, которое позволяет закрепить навыки работы с:
- HTML5 Canvas API
- Массивами и объектами
- Циклами и условиями
- Рендерингом в реальном времени
- Обработкой событий клавиатуры
Если тебе интересно, как написать змейку на JavaScript — ты по адресу. Мы разберём весь процесс по шагам.
Подготовка: создаём HTML и настраиваем Canvas
Сначала создадим минимальную HTML-структуру. Нам нужен только один `
```html
```
Теперь создаём файл `snake.js` и подключаем к HTML. Всё, рабочее поле готово, начнём реализацию логики.
Основы игрового цикла и отрисовки
В Canvas нет встроенного способа рисовать объекты как в DOM. Здесь всё рисуется вручную. Первым делом — инициализируем контекст и параметры игрового поля.
```javascript
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
const gridSize = 20;
const tileCount = canvas.width / gridSize;
```
Теперь создаём главный цикл отрисовки — это сердце нашей игры.
```javascript
let snake = [{ x: 10, y: 10 }];
let velocityX = 1;
let velocityY = 0;
let food = { x: 15, y: 15 };
function gameLoop() {
update();
draw();
setTimeout(gameLoop, 100); // 10 FPS
}
gameLoop();
```
Обновление состояния
Функция `update()` отвечает за передвижение змейки:
```javascript
function update() {
const head = { x: snake[0].x + velocityX, y: snake[0].y + velocityY };
snake.unshift(head);
if (head.x === food.x && head.y === food.y) {
placeFood();
} else {
snake.pop();
}
checkCollision();
}
```
Рисуем змейку и еду
```javascript
function draw() {
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'lime';
snake.forEach(segment => {
ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);
});
ctx.fillStyle = 'red';
ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);
}
```
Обработка ввода с клавиатуры
Добавим управление:
```javascript
document.addEventListener('keydown', (e) => {
switch (e.key) {
case 'ArrowUp':
if (velocityY === 0) {
velocityX = 0;
velocityY = -1;
}
break;
case 'ArrowDown':
if (velocityY === 0) {
velocityX = 0;
velocityY = 1;
}
break;
case 'ArrowLeft':
if (velocityX === 0) {
velocityX = -1;
velocityY = 0;
}
break;
case 'ArrowRight':
if (velocityX === 0) {
velocityX = 1;
velocityY = 0;
}
break;
}
});
```
Важно: не даём змейке развернуться на 180°, иначе она врежется сама в себя.
Генерация еды и проверка столкновений
Чтобы еда появлялась случайно и не попадала на тело змейки:
```javascript
function placeFood() {
let newFood;
do {
newFood = {
x: Math.floor(Math.random() * tileCount),
y: Math.floor(Math.random() * tileCount)
};
} while (snake.some(segment => segment.x === newFood.x && segment.y === newFood.y));
food = newFood;
}
```
Проверка столкновений со стенами и собой:
```javascript
function checkCollision() {
const head = snake[0];
if (
head.x < 0 || head.x >= tileCount ||
head.y < 0 || head.y >= tileCount ||
snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y)
) {
alert('Игра окончена!');
snake = [{ x: 10, y: 10 }];
velocityX = 1;
velocityY = 0;
placeFood();
}
}
```
Финальные штрихи и советы
Ты только что прошёл весь путь разработки змейки на JavaScript — от создания canvas до полноценной игровой логики. Хоть код змейки на canvas получился компактным, он включает все базовые принципы создания 2D-игр.
Вот что можно улучшить:
- Добавить счётчик очков
- Ввести уровни сложности
- Использовать `requestAnimationFrame` вместо `setTimeout` для более плавной анимации
- Подключить звук при поедании еды
Практические советы
1. Делай частые коммиты. Даже если проект маленький — это хорошая привычка.
2. Изолируй логику. Раздели update, render и input на отдельные модули в будущем.
3. Работай с координатами осознанно. Используй сетку, а не пиксели — это упростит масштабирование.
4. Не копируй чужой код без разбора. Лучше разберись в каждой строчке — иначе ты не научишься.
Заключение
Разработка змейки на JavaScript — это больше, чем просто игра. Это твоя первая мини-игра, демонстрирующая основы геймдева в браузере. Если ты хочешь развивать навыки frontend-разработки, создание игры змейка на JavaScript и Canvas — отличный старт.
Теперь ты знаешь, как написать змейку на JavaScript, и это не просто теория — у тебя есть рабочий код, который можно развивать. Попробуй добавить меню, выбрать скины или даже сохранить рекорды в LocalStorage.
И помни — каждая строка кода приближает тебя к уровню senior-разработчика.
