Как обычно, я просто возился со своим списком дел в приложении Notion, просто чтобы продуктивно работать в течение дня. Потом я увидел два, я не достиг, тогда я решил, что сначала займусь забавным, чтобы мне захотелось заняться другим.

Вот я, пишу после завершения «Игры змейки» с использованием только Javascript и HTML5, ну, я наткнулся на сообщение об этом, а затем использовал учебник в качестве руководства, и я решил поделиться тем, что я узнал на этом пути. Что ж, давайте сразу же погрузимся в подробности;

Во-первых, что вам нужно, чтобы это уволили. Ничего особенного,

Браузер предпочел Chrome | редактор кода - я использовал Visual Studio Code, а также хорошо знаю, как использовать Github, если нет, нажмите здесь, чтобы настроить его.

Кроме того, вам необходимо иметь базовые знания HTML и Javascript, по крайней мере, вы не совсем новичок, а немного владеете навыками, как я, и стремитесь стать рок-звездой.

Вот ссылка на репозиторий на Github.

Создайте холст HTML 5, для этого урока мы делаем его 608 пикселей с небольшим стилем.

Теперь мы переходим к нашему файлу Js.

Мы устанавливаем наш холст как константу, и мы устанавливаем его как 2D, поскольку мы делаем здесь 2D-игру 👀 очевидно. Просто продолжайте, когда вы разветвляете файл, вы получите всю концепцию, если вы этого не сделаете сейчас.

Далее нужно нарисовать наши изображения на холсте,

Затем мы рисуем нашу змейку, добиваясь этого, перебирая весь массив доски. NB: доска состоит из блоков, каждый из которых имеет размер 32 пикселя, всего у нас есть 17 блоков по оси Y и 19 блоков по оси X, включая рамку. за пределами основной игровой арены 😏

Далее мы раскрашиваем змею, что вы можете делать по своему усмотрению, а затем добавляем штрих к голове змеи, чтобы отличить ее от тела. Затем мы создаем еду. Еда будет располагаться случайным образом каждый раз, когда игра заканчивается или начинается заново, эта позиция будет внутри холста, а не где-либо в пределах окна. Таким образом, мы достигаем этого, используя позиции X и Y.

food = {

x: Math.floor (Math.random () * 17 + 1) * поле,

y: Math.floor (Math.random () * 15 + 3) * box

}

Далее нам нужно установить счет, чтобы мы могли стилизовать его с любыми свойствами, такими как цвет, стиль шрифта и размер шрифта, но чтобы установить счет; мы создаем переменную, в которой хранится значение оценки, и мы увеличиваем его всякий раз, когда змея ест еду.

КАК УСТАНОВИТЬ ПОВЫШЕНИЕ СЧЕТА?

Довольно прямолинейно, логика заключается в том, что всякий раз, когда snakeHead добирается до еды, они занимают одно и то же положение по осям X и Y, поэтому, как только это происходит, мы устанавливаем счет для увеличения в любое время. 😎

Далее нам нужно знать, как контролировать нашу змею, по крайней мере, до того, как она сможет добраться до еды. Для этого мы заставляем змейку двигаться в зависимости от клавиш направления на клавиатуре. Я знаю, что большинство из вас уже получили эту часть, но для тех, кто этого не делает, для этого мы добавляем прослушиватель событий, который прослушивает событие при нажатии клавиш. У каждой клавиши направления есть значение, например, у направления «ВЛЕВО» есть keyCode «37», они работают от 37 до 40, то есть в четырех направлениях. Итак, мы создаем функцию, которая обрабатывает это событие. Затем мы также должны убедиться, что обратное направление не работает, а змея движется в обратном направлении. Хорошо, это звучит забавно. Я имел в виду, что если змея движется влево, она не может идти вправо, а должна идти вверх, вниз, а затем вправо. Итак, в нашей функции мы настроили ее работать только с этой логикой;

if (key == 37 && d! = «ВПРАВО») {

d = «ВЛЕВО»;

помня, что переменная «d» должна быть объявлена ​​вне функции, чтобы любой мог получить доступ к ней извне.

Как заставить змею расти и двигаться одновременно, не заполняя всю землю?

Чтобы заставить нашу змею двигаться и расти одновременно, помните, что змея - это массив, поэтому мы используем методы snake.pop () и snake.unshift (). array и добавляет новый прямоугольник в конец массива. Это означает, что у нас всегда будет новая голова каждый раз, когда змея ест и двигается, это сделано для того, чтобы наша змея просто не продолжала расти, а затем заполняла весь экран при движении.

Далее следует правило столкновения, определяющее конец игры.

Теперь, как было сказано ранее, чтобы установить правило игры, которое позволяет игре закончить, мы создаем новую функцию, которая устанавливает новое условие, которое проходит по всей ячейке и затем возвращает истину, если есть какое-либо столкновение между голова змеи и тело или концы стены и возвращает false, если столкновения нет. Логика:

Чтобы реализовать столкновение, мы используем условие if, чтобы установить каждое направление змейки относительно положения X и положения Y с прямоугольниками на доске.

а затем, если это условие не выполняется, продолжайте итерацию массива с помощью нашего метода pop и unshift.

Не забываю, вам нужно установить скорость игры, чтобы она двигалась с определенной скоростью;

let game = setInterval (ничья, 100);

Надеюсь, это было весело и поучительно, я многому научился, изучая эту игру, я узнал о том, как реализовать методы pop () и unshift (), с лучшим пониманием массивов. Я только начал писать больше из всего, что делаю, надеюсь и дальше так продолжать, это помогает в учебе. Я больше дизайнер и изучаю множество вариантов кода, например, в своей другой статье, где я создал КАЛЬКУЛЯТОР с C #, и вы можете проверить мой профиль поведения здесь.