Как сделать игру про змейку с помощью HTML, CSS и JavaScript

Игра «Змейка» — это классическое упражнение по программированию, которое вы можете использовать для улучшения своих навыков программирования и решения проблем. Вы можете создать игру в веб-браузере, используя HTML, CSS и JavaScript.

В игре вы управляете змеей, которая перемещается по доске. Змея увеличивается в размерах по мере того, как вы собираете пищу. Игра закончится, если вы столкнетесь с собственным хвостом или любой из стен.

Как создать пользовательский интерфейс для холста

Используйте HTML и CSS, чтобы добавить холст для передвижения змеи. Есть много других HTML и CSS проекты вы можете попрактиковаться, если вам нужно пересмотреть какие-либо основные концепции.

Вы можете обратиться к этому проекту Репозиторий GitHub для полного исходного кода.

1. Создайте новый файл с именем «index.html».
2. Откройте файл с помощью любого текстового редактора, например Визуальный код или атом. Добавьте базовую структуру кода HTML:

   HTML>
   <HTMLязык="en-США">
   <голова>
   <заголовок>Змеиная игразаголовок>
   голова>
   <тело>
   тело>
   HTML>

3. Внутри тега body добавьте холст, чтобы представить игровое поле для змеи.

   <h2>Змеиная играh2>
   <дивидентификатор="игра">
   <холстидентификатор="змея">холст>
   див>

4. В той же папке, что и ваш HTML-файл, создайте новый файл с именем «styles.css».
5. Внутри добавьте немного CSS для всей веб-страницы. Вы также можете стилизовать свой веб-сайт, используя другие основные советы и рекомендации по CSS.

   #игра {
   ширина:400px;
   высота:400px;
   допуск:0авто;
   фоновый цвет:#еее;
   }
   h2 {
   выравнивание текста:центр;
   семейство шрифтов: Ариал;
   размер шрифта:36px;
   } 
   

6. Внутри вашего HTML-файла добавьте ссылку на CSS в теге head:

   <связьотн.="таблица стилей"тип="текст/CSS"href="стили.css">

7. Чтобы просмотреть холст, откройте файл index.html в веб-браузере.

Как нарисовать змею

В приведенном ниже примере черная линия представляет змею:

Несколько квадратов или «сегментов» составляют змею. По мере роста змейки увеличивается и количество квадратов. В начале игры длина змейки равна одной части.

1. Внутри вашего HTML-файла добавьте ссылку на новый файл JavaScript в нижней части тега body:

   <тело>
    Ваш код здесь 
   <сценарийисточник="скрипт.js">сценарий>
   тело>

2. Создайте script.js и начните с получения DOM-элемента холста:

   вар холст = документ.getElementById("змея");

3. Установите контекст для HTML-элемента холста. В этом случае вы хотите, чтобы игра отображала 2D-холст. Это позволит вам рисовать несколько фигур или изображений в элементе HTML.

   вар canvas2d = холст.getContext("2д");

4. Установите другие внутриигровые переменные, такие как окончание игры, а также высоту и ширину холста:

   вар играЗавершена = ЛОЖЬ;
   холст.ширина = 400;
   холст.высота = 400;

5. Объявите переменную с именем «snakeSegments». Это будет содержать количество «квадратов», которые займет змея. Вы также можете создать переменную для отслеживания длины змеи:

   вар змеиные сегменты = [];
   вар длина змеи = 1;
   

6. Объявите начальное положение X и Y змеи:

   вар змеяX = 0;
   вар змея Y = 0;

7. Создайте новую функцию. Внутри добавьте начальную часть змеи в массив змеиных сегментов с ее начальными координатами X и Y:

   функциядвигатьсяЗмея() {
    змеяSegments.unshift({ Икс: змеяX, у: змеяY });
   }

8. Создайте новую функцию. Внутри установите стиль заливки на черный. Это цвет, который будет использоваться для рисования змеи:

   функциярисоватьЗмея() {
    холст2d.fillStyle = "черный"; 
   }

9. Для каждого сегмента, составляющего размер змеи, нарисуйте квадрат шириной и высотой 10 пикселей:

   для (вар я = 0; я < змеяSegments.length; я++) {
    canvas2d.fillRect (сегменты змеи [i].x, сегменты змеи [i].y, 10, 10);
    }

10. Создайте игровой цикл, который будет запускаться каждые 100 миллисекунд. Это заставит игру постоянно рисовать змею в новом положении, что будет очень важно, когда змея начнет двигаться:

    функцияиграLoop() {
     переместить змею ();
     нарисовать змею ();

11. Откройте файл «index.html» в веб-браузере, чтобы увидеть змею в наименьшем размере в исходном положении.

Как заставить змею двигаться

Добавьте немного логики для перемещения змейки в разные стороны в зависимости от того, какую кнопку на клавиатуре нажимает игрок.

1. В верхней части файла объявите начальное направление змеи:

   вар направлениеX = 10;
   вар направлениеY = 0;
   

2. Добавьте обработчик событий, который срабатывает, когда игрок нажимает клавишу:

   документ.onkeydown = функция(событие) {
   };

3. Внутри обработчика событий измените направление движения змеи в зависимости от нажатой клавиши:

   выключатель (event.keyCode) {
   случай37: // Стрелка влево
    направлениеX = -10;
    направлениеY = 0;
   перерыв;
   случай38: // Стрелка вверх
    направлениеX = 0;
    направлениеY = -10;
   перерыв;
   случай39: // Правая стрелка
    направлениеX = 10;
    направлениеY = 0;
   перерыв;
   случай40: // Кнопка "Стрелка вниз
    направлениеX = 0;
    направлениеY = 10;
   перерыв;
   }

4. В функции moveSnake() используйте направление для обновления координат X и Y змеи. Например, если змее нужно двигаться влево, направление X будет «-10». Это обновит координату X, чтобы удалить 10 пикселей для каждого кадра игры:

   функциядвигатьсяЗмея() {
    змеяSegments.unshift({ Икс: змеяX, у: змеяY });
    змеяX += направлениеX;
    змеяY += направлениеY;
   }

5. В настоящее время игра не удаляет предыдущие сегменты, пока змея движется. Это заставит змею выглядеть так:
6. Чтобы исправить это, очистите холст перед рисованием новой змеи в каждом кадре в начале функции drawSnake():

   canvas2d.clearRect(0, 0, холст.ширина, холст.высота);

7. Вам также нужно будет удалить последний элемент массива snakeSegments внутри функции moveSnake():

   пока (snakeSegments.length > длина змеи) {
    змеяSegments.pop();
   }

8. Откройте файл «index.html» и нажимайте клавиши «влево», «вправо», «вверх» или «вниз», чтобы переместить змейку.

Как добавить еду на холст

Добавьте точки в настольную игру, чтобы обозначить кусочки еды для змеи.

1. Объявите новую переменную в верхней части файла для хранения массива кусочков еды:

   вар точки = [];

2. Создайте новую функцию. Внутри сгенерируйте случайные координаты X и Y для точек. Вы также можете убедиться, что на доске в любой момент времени находится только 10 точек:

   функцияspawnDots() {
   если(точки.длина < 10) {
   вар точкаX = Математика.пол(Математика.random() * холст.ширина);
   вар точка Y = Математика.пол(Математика.random() * холст.высота);
    точки.push({ Икс: точкаX, у: точка Y });
    }
   }

3. После создания координат X и Y для еды нарисуйте их на холсте красным цветом:

   для (вар я = 0; я < dots.length; я++) {
    холст2d.fillStyle = "красный";
    canvas2d.fillRect (точки[i].x, точки[i].y, 10, 10);
   }

4. Вызовите новую функцию spawnDots() внутри игрового цикла:

   функцияиграLoop() {
    переместить змею ();
    нарисовать змею ();
    спаунТочки();
   если(!gameEnded) {
    setTimeout (игровой цикл, 100);
    }
   }

5. Откройте файл «index.html», чтобы просмотреть еду на игровом поле.

Как заставить змею расти

Вы можете заставить змею расти, увеличивая ее длину, когда она сталкивается с точкой еды.

1. Создайте новую функцию. Внутри него прокрутите каждый элемент массива точек:

   функцияcheckCollision() {
   для (вар я = 0; я < dots.length; я++) {
   
    }
   }

2. Если положение змеи соответствует координатам любых точек, увеличьте длину змеи и удалите точку:

   если (змеяX < точек[i].x + 10 && 
    змеяX + 10 > точки[i].x && 
    змеяY < точек[i].y + 10 && 
    змеяY + 10 > точки[i].y) {
    длина змеи++;
    dots.splice (я, 1);
   }

3. Вызовите новую функцию checkCollision() в игровом цикле:

   функцияиграLoop() {
    переместить змею ();
    нарисовать змею ();
    спаунТочки();
    проверитьСтолкновение();
   если(!gameEnded) {
    setTimeout (игровой цикл, 100);
    }
   }

4. Откройте файл index.html в веб-браузере. Перемещайте змею с помощью клавиатуры, чтобы собирать кусочки еды и выращивать змею.

Как закончить игру

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

1. Создайте новую функцию для печати предупреждения «Игра окончена».

   функцияигра закончена() {
    установить время ожидания (функция() {
    тревога("Игра закончена!");
    }, 500); 
    играЗавершена = истинный
   }

2. Внутри функции checkCollision() проверьте, не ударила ли змея какую-либо из стен холста. Если это так, вызовите функцию gameOver():

   если (змеяX < -10 || 
    змеяY < -10 || 
    змеяX > холст.ширина+10 ||
    змеяY > холст.высота+10) {
    игра закончена();
   }

3. Чтобы проверить, не столкнулась ли голова змеи с каким-либо сегментом хвоста, выполните цикл по каждой части змеи:

   для (вар я = 1; я < змеяSegments.length; я++) {
   }

4. Внутри цикла for проверьте, совпадает ли расположение головы змеи с каким-либо сегментом хвоста. Если это так, это означает, что голова столкнулась с хвостом, так что закончим игру:

   если (змеяX змеяSegments[i].x && змеяY змеяSegments[i].y) {
    игра закончена();
   }

5. Откройте файл index.html в веб-браузере. Попробуйте ударить по стене или собственному хвосту, чтобы закончить игру.

Изучение концепций JavaScript с помощью игр

Создание игр может стать отличным способом сделать процесс обучения более приятным. Продолжайте делать больше игр, чтобы продолжать улучшать свои знания JavaScript.