Мне нравится делать игры. Ещё будучи подростком я всегда мечтал что когда-нибудь сделаю свою игру. Возможно это одна из причин по которой и я ушёл в IT.

Изучать программирование самостоятельно довольно сложно. Особенно сложно заставить себя сконцентрироваться и писать код каждый день. Хотя это самое важное! - просто каждый день писать код Поэтому, желательно, выбрать интересный для себя проект. И, как мне кажется, изучать программирование делая игру, поможет тебе придерживаться плана. 

Я выбрал flappy Bird как проект для изучения JS, так как эту игру знают, все она довольно простая, но при этом интересная,  и покрывает все базовые структуры языка программирования.

[↓↓↓ Пропустить текст, смотреть видео ↓↓↓](#watch-now)

## Ссылки на ресурсы картинки

1. Ссылка на фоновую картинку:  https://i.ibb.co/Q9yv5Jk/flappy-bird-set.png
2. Ссылка на птицу: https://bevouliin.com/flappy-box-bird-free-2d-game-sprites/

## Как сделать HTML5 игру 

В HTML есть тег canvas - это специальный контейнер для отображения компьютерной графики с помощью JS. 

Мы будем использовать лишь малую часть того что он может в контексте  2D для, но этого нам будет достаточно чтобы написать игру.

Давайте с этого и начнем.

Создадим базовый html файл (если вы работаете в VSCode в пустом html файле напишите html  и выберете html5 из подсказки, нажав enter). Добавим так canvas в body.  И кнопку которая будет начинать игру.  Можете просто скопировать следующий код:

```
    <!DOCTYPE html>
    <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Document</title>
       <link rel="stylesheet" href="style.css" />
       <script defer src="main.js"></script>
     </head>
     <body>
       <canvas id="main"></canvas>
       <button id="start" onclick="startGame();">Start Game</button>
     </body>
    </html>
```

CSS стили не являются частью данной темы, но вы можете использовать мой код для стилей [тут](https://codepen.io/alexandr-borkun/pen/wvjJZdN)

## Как найти canvas в JS

JavaScript по природе знает как работать с браузером. С помощью функции getElementById  мы можем найти кнопку и canvas.  Начнём с canvas

```
    const canvas = document.getElementById("main");
    const ctx = canvas.getContext("2d");
```

В первой строке мы нашли canvas, а в следующий достали 2D контекста (он содержит все функции для работы с 2D).

Чтобы работать иллюстрациями они должны быть добавлены в html, или мы можем их подгрузить прямо в коде. Делается это очень просто. Создаем new Image и после к ней добавляется путь к картинке.

```
    //load BG image
    const bgImage = new Image();
    bgImage.src = "https://i.ibb.co/Q9yv5Jk/flappy-bird-set.png";

    const birdImg = new Image();
    birdImg.src = "sprites/skeleton-animation_00.png";
```

Картинки подгружаются какое-то время. До того как они загрузится мы не можем их использовать в игре. Для этого, у класса Image, есть метод onload. В него можно передать функцию, которая выполняется как только картинка загрузиться в игру.

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

```
    let startButton;

    function enableStartButton() {
     if (!startButton) startButton = document.getElementById("start");
     startButton.classList.add("active");
    }

    birdImg.onload = enableStartButton();
```

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

```
    function startGame() {
     startButton.classList.remove("active");
     animate();
    }

    function animate(){
     // infinite game loop
     window.requestAnimationFrame(animate);
    }
```

Наша игра еще ничего не делают, а мы уже знаем как найти HTML элементы в JS, создавать функции и писать условия.  Давайте теперь отобразим фоновую картинку с помощью 2D контекста.

```
    function animate(){
     ctx.drawImage(
       bgImage,
       0,
       0,
       431,
       768,
       0,
       0,
       canvas.width,
       canvas.height
     );
     // infinite game loop
     window.requestAnimationFrame(animate);
    }
```

Функция drawImage Используется для отображения картинки в игре в неё мы передаём 9 параметров:  картинка,  4 координата квадрата которые мы из нее вырезаем, и 4 координата квадрата в который мы её вставляем.

Теперь при нажатии на кнопку Start мы должны видеть фоновую картинку игры. (если нет убедитесь что файл с кодом назван main.js)

## Watch Now

Как отобразить птицу, а также добавить гравитацию и кнопку прыжка вы можете узнать посмотрев видео


Учим JS делая игру

Flappy Bird Part 1

game over retro scene

В данной статье ты узнаешь про разработке игры Flappy Bird на JS без использования готовых фреймворков. 

OB Web Dev

OB Web Dev

Как сделать HTML5 игру на чистом JS. Делаем Flappy Bird часть 1

Как сделать HTML5 игру на чистом JS. Делаем Flappy Bird часть 1

Получить скидку на курс основы WebDev