В этой статье мы разберем процесс создания классической игры "Змейка" с возможностью настройки игрового поля, скорости и режима прохождения через стены.
1. Подготовка окружения
Для создания игры нам понадобятся:
- HTML для структуры страницы
- CSS для базового оформления
- JavaScript для логики игры
2. Создание HTML-кода
Вначале создадим HTML-страницу, которая содержит элементы управления и игровое поле:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Змейка</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; }
.settings { margin-bottom: 10px; }
canvas { background: #000; }
</style>
</head>
<body>
<div class="settings">
<label>Ширина: <input type="number" id="width" value="20" min="5" max="50"></label>
<label>Высота: <input type="number" id="height" value="20" min="5" max="50"></label>
<label>Скорость: <input type="number" id="speed" value="200" min="50" max="1000"></label>
<label>Режим:
<select id="mode">
<option value="none">Без сквозного прохождения</option>
<option value="horizontal">Сквозное слева-направо</option>
<option value="vertical">Сквозное сверху-вниз</option>
<option value="both">Полное сквозное</option>
</select>
</label>
<button onclick="startGame()">Начать</button>
</div>
<canvas id="gameCanvas"></canvas>
</body>
</html>
Этот код создаёт страницу с настройками перед запуском игры.
3. Добавление JavaScript
Теперь создадим основной игровой скрипт.
3.1 Инициализация игры
let canvas = document.getElementById("gameCanvas");
let ctx = canvas.getContext("2d");
let gridSize, snake, direction, food, speed, mode, gameInterval;
3.2 Запуск игры и размещение еды
function startGame() {
let width = parseInt(document.getElementById("width").value);
let height = parseInt(document.getElementById("height").value);
speed = parseInt(document.getElementById("speed").value);
mode = document.getElementById("mode").value;
gridSize = 20;
canvas.width = width * gridSize;
canvas.height = height * gridSize;
snake = [{x: 5, y: 5}];
direction = "right";
placeFood();
clearInterval(gameInterval);
gameInterval = setInterval(updateGame, speed);
}
3.3 Функционал игры
- Движение змейки: Змейка постоянно движется в выбранном направлении, управляемом с клавиатуры.
- Питание змейки: При съедании еды змейка увеличивается в длину, а еда появляется в случайном месте.
- Столкновения:
- Если змейка сталкивается с границами в режиме "без сквозного прохождения", игра заканчивается.
- Если змейка пересекает себя, игра тоже завершается.
- В режимах "сквозного прохождения" змейка выходит за границы и появляется с противоположной стороны.
- Настройки:
- Размер игрового поля в клетках.
- Скорость движения змейки (чем меньше значение, тем быстрее игра).
- Режим прохождения через стены.
3.4 Логика движения и столкновений
function updateGame() {
let head = { ...snake[0] };
if (direction === "right") head.x++;
if (direction === "left") head.x--;
if (direction === "down") head.y++;
if (direction === "up") head.y--;
if (mode === "horizontal") {
if (head.x < 0) head.x = canvas.width / gridSize - 1;
if (head.x >= canvas.width / gridSize) head.x = 0;
}
if (mode === "vertical") {
if (head.y < 0) head.y = canvas.height / gridSize - 1;
if (head.y >= canvas.height / gridSize) head.y = 0;
}
if (mode === "both") {
if (head.x < 0) head.x = canvas.width / gridSize - 1;
if (head.x >= canvas.width / gridSize) head.x = 0;
if (head.y < 0) head.y = canvas.height / gridSize - 1;
if (head.y >= canvas.height / gridSize) head.y = 0;
}
if (mode === "none" && (head.x < 0 || head.x >= canvas.width / gridSize || head.y < 0 || head.y >= canvas.height / gridSize)) {
alert("Игра окончена!");
startGame();
return;
}
if (snake.some(segment => segment.x === head.x && segment.y === head.y)) {
alert("Игра окончена!");
startGame();
return;
}
snake.unshift(head);
if (head.x === food.x && head.y === food.y) {
placeFood();
} else {
snake.pop();
}
drawGame();
}
3.5 Отрисовка игры
function drawGame() {
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "red";
ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);
ctx.fillStyle = "lime";
snake.forEach(segment => {
ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);
});
}
4. Итог
Мы создали игру "Змейка" на HTML и JavaScript, добавив параметры настройки перед началом игры. Теперь можно легко изменять размеры игрового поля, скорость и режимы прохождения стен. Добавив больше анимации и эффектов, можно сделать игру ещё интереснее!
Сыграть в игру можно на этой странице (Там же найдете ссылку на топик с полным кодом игры): https://sergsergius.ru/%d0%b8%d0%b3%d1%80%d0%b0-%d0%b7%d0%bc%d0%b5%d0%b9%d0%ba%d0%b0-%d0%be%d0%bd%d0%bb%d0%b0%d0%b9%d0%bd/