В этой статье вы прочитаете как сделать змейку на JavaScript, максимально просто и понятно, с использование canvas, но если вы не умеете работать с ним, то прочитайте две статьи.
- Canvas HTML. Основы создания фигур на javascript;
- Canvas анимация на JavaScript, простыми словами и без воды;
Также в конце статье вы сможете скачать файлы, этой игры, и по экспериментировать, что то добавить или убрать.
HTML:
Сначала нужно сделать HTML документ, в котором будет содержатся элемент canvas, котоый нужен нам для отображения игры.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Змейка на JS</title> <style> #game { border: 1px solid black; } </style> </head> <body> <canvas id="game" width="500" height="500"></canvas> <script src="script.js"></script> </body> </html> |
Я не буду особо объяснять что, к чему тут, так как, всё должно быть понятно, единственное, мы в head, добавили стиль, для обводки canvas элемента, чтобы было можно отличить игровое поле, также подключаем скрипт JS.
JS код игры змейка:
Теперь перейдём к самому главному, это ко коду игры змейка на javascript, тот вариант, который я покажу не будет самым лучшем и проработанным, но это только потому, что эта стать больше для новичков.
Основы:
Для начало нужно объявить несколько переменных и массивов, для работы игры.
1 2 3 4 5 6 7 8 9 10 11 12 13 | let canvas = document.getElementById("game"); // Берём элемент canvas let ctx = canvas.getContext("2d"); // Создаём элемент для рисования 2D в canvas let score = 0; // счёт let blockSize = 10; // размер одного блока let direction = "right"; // Направление змейки let positionApple = [positionAppleRandom(), positionAppleRandom()]; // Стартовая позиция яблока // Массив тела змейки let snakeBody = [ [3, 2], [4, 2], [5, 2], [6, 2], ] |
Если вы уже изучали canvas, то первые две строчки для вас должны быть понятны, потом идёт объявление переменной в которой будет хранится количество съеденных яблок.
Дальше идёт переменная blockSize которая хранить в себе размер одной ячейки, потом переменная хранящая направление змейки.
Последнее, это два массива, в positionApple, хранится позиция яблока, индекс ноль это позиция по X, индекс один позиция по Y, также там с помощью функции positionAppleRandom(), назначается рандомное значение, но об ней ниже, также массив snakeBody, хранит позиции блоков змейки.
Функция positionAppleRandom:
Как говорилось выше, это функция просто даёт случайное значение для позиции яблока, вот его код.
1 2 3 4 | function positionAppleRandom() { let rand = Math.random() * 50; return Math.round(rand); } |
Тут тоже всё просто, Math.random(), даёт случайное число, потом его умножаем на 50, тем самым, число будет равно от нуля до пятидесяти, потом просто округляет его с помощью Math.round и возвращает.
Направление змейки:
Для этого будем использовать событие, смотря какая стрелка нажата на клавиатуру, так и будем менять переменную direction.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | document.addEventListener("keydown", function(e) { // Если нажата стрелочка права if (e.keyCode == "39" && direction !== "left") { direction = "right"; // Поменяет направление на право } // Если нажата стрелочка вниз if (e.keyCode == "40" && direction !== "top") { direction = "down"; // Поменяет направление вниз } // Если нажата стрелочка налево if (e.keyCode == "37" && direction !== "right") { direction = "left"; // Поменяет направление налево } // Если нажата стрелочка верх if (e.keyCode == "38" && direction !== "down") { direction = "top"; // Поменяет направление верх } }) |
Как видите всё просто, тут даже объяснять не чего не надо, единственное, в качестве второго условия, используется проверка на то, что идёт не противоположное направление, чтобы змейка не пошла в обратную сторону.
Основной код игры:
Под основным кодом, имеется ввиду, где будет происходить вся логика, в нашем случае это в интервале.
1 2 3 | play = setInterval(function() { //... } 250); |
Тут всё должно быть просто, просто делаем интервал с помощью функции setInterval(), теперь посмотрим что внутри интервала.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // Всё стираем с игрового поля ctx.clearRect(0, 0, canvas.width, canvas.height); Движение змейки if (direction == "right") { snakeBody.unshift([++snakeBody[0][0], snakeBody[0][1]]); } else if (direction == "down") { snakeBody.unshift([snakeBody[0][0], ++snakeBody[0][1]]); } else if (direction == "left") { snakeBody.unshift([--snakeBody[0][0], snakeBody[0][1]]); } else if (direction == "top") { snakeBody.unshift([snakeBody[0][0], --snakeBody[0][1]]); } snakeBody.pop(); |
В начале мы всё стираем с игрового поля, потом идёт код для движения нашей змейки, суть его в том, что он в начало массива будет добавлять новую позицию зависимо от направления или переменной direction, это происходит благодаря функции snakeBody.unshift(), ну и потом удаляет последний элемент массива, благодаря snakeBody.pop().
Таким образом у нас движется змейка.
1 2 3 4 5 6 7 8 9 | // Рисуем змейку for (let i = 0; i < snakeBody.length; ++i) { ctx.fillStyle = "green"; ctx.fillRect(snakeBody[i][0] * blockSize, snakeBody[i][1] * blockSize, 10, 10); } // Рисуем яблоко ctx.fillStyle = "red"; ctx.fillRect(positionApple[0] * blockSize, positionApple[1] * blockSize, 10, 10); |
Первая часть этого кода, мы через цикл рисуем каждый блок змейки, ну и потом яблоко рисуем.
1 2 3 4 5 6 7 8 9 10 11 12 13 | // Если яблоко было съедено if (snakeBody[0][0] == positionApple[0] && snakeBody[0][1] == positionApple[1]) { snakeBody.push(snakeBody[snakeBody.length - 1]); positionApple[0] = positionAppleRandom(); positionApple[1] = positionAppleRandom(); score++; } // Завершение игры if (snakeBody[0][0] * 10 > 500 || snakeBody[0][1] * 10 > 500 || snakeBody[0][0] * 10 < 0 || snakeBody[0][1] * 10 < 0) { clearInterval(play); alert("Ваш счёт: " + score); } |
Тут мы проверяем, если позиция первого элемента массива цела змейки, равен позиции яблока, то по сути просто меняется позиция яблока, ну и увеличивается переменная счётчика на один.
Игра завершается, когда змейка вышла за приделы поля, тогда интервал выключается и выводит на экран счёт.
Вывод:
В этой статье вы прочитали как сделать змейку на чистом javascript, надеюсь вам статья понравилась.
Подписываетесь на соц-сети:
Оценка:
Средняя оценка: 4,00
Загрузка...