Привет, ребята, в этой статье мы создадим собственную игру Flappy Bird, используя концепцию React и JavaScript. Flappy Bird — известная игра, в которой есть птица, которая должна лететь, не сталкиваясь с препятствиями, встречающимися на ее пути. Препятствие приходит снизу и сверху. Если Flappy Bird упадет на землю и препятствие, игра будет окончена. Итак, наше приложение в основном основано на JavaScript. Итак, давайте начнем программировать:
Итак, это наша структура папок, это кодовая база по умолчанию, которую мы получили, когда запустили приложение npx create-react ‹project Name› на нашем терминале. Мы только что добавили 4 изображения в нашу кодовую базу. Итак, давайте посмотрим наш файл .js приложения:
В App.js у нас есть игровой контейнер. Внутри игрового контейнера будут две вещи: небесный и наземный. В небе у нас будет наша птичка. Итак, давайте найдем, что нам нужно сделать, чтобы разработать игру. Итак, во-первых, мы должны сделать нашу землю подвижной. Поэтому, чтобы применить стили в соответствии с нашей землей, мы добавили движущийся элемент div внутри контейнера земли. Для этого мы добавили несколько стилей в наземный контейнер:
.движение по земле {
позиция: абсолютная;
вверху: 580 пикселей;
высота: 150 пикселей;
фоновое изображение: url('bottom-background.png');
background-repeat: Repeat-x;
анимация: ползунок вправо 100 с бесконечно линейно;
-webkit-animation: слайдер вправо 100 бесконечный линейный;
ширина: 100 %;
Z-индекс: +1;
}
@keyframes слайд-вправо {
от {
фоновая позиция: 100 %;
}
to {
фоновая позиция: 0 %;
}
}
@-webkit-keyframes slideright {
от {
фоновая позиция: 100 %;
}
to {
фоновая позиция: 0 %;
}
}
Таким образом, мы установили position на absolute, top на 580 пикселей, потому что наша высота неба составляет 580 пикселей, а высота — 150 пикселей, также мы установили фоновое изображение из нашего локального, затем мы добавили анимацию и webkit-анимацию. slideright мы устанавливаем от 100% до 0%, теперь мы устанавливаем background-repeat на Repeat-x, что означает, что изображение будет повторяться по оси X, мы также добавили ширину 100% и z-index:+1. Теперь мы хотим, чтобы когда наша игра находится над землей, она перестала двигаться, поэтому для этого мы добавляем стили в ее родительский элемент, означающий наземный контейнер:
.ground-container {
высота: 150 пикселей;
ширина: 580 пикселей;
слева: 80 пикселей;
позиция: абсолютная;
}
На самом деле мы удаляем анимационную часть с земли по окончанию игры. Теперь мы хотим, чтобы наши птицы летали, а гравитация также должна иметь нисходящее притяжение. Для этого мы написали функцию startGame и для временного интервала до 20 мс мы хотим, чтобы наша Должна вызываться функция startGame. для этого мы добавили:
let gameTimerId = setInterval(startGame, 20);
Первоначально мы установили параметр birdBottom с исходной нижней позицией 100 пикселей, что означает, что наша птица будет на 100 пикселей над землей. Теперь каждые 20 мс мы уменьшаем BirdBottom под действием силы тяжести (3 пикселя) и устанавливаем его как нижний стиль в птице. div. Мы просто добавляем постоянный левый стиль для птицы: 220px. Поскольку наша земля движется, кажется, что наши птицы летят, поэтому на самом деле мы изменяем только нижнее значение птицы. Итак, давайте добавим еще немного проблем для нашей птицы. Мы добавим препятствие, которое наша птица должна пересечь. Чтобы создать препятствие, мы вызываем функцию generateObstacle. В этой функции мы создаем div препятствия сверху и снизу, наше препятствие будет иметь постоянный левый стиль 500px. Мы хотим, чтобы наше препятствие имело нижнее значение, кратное 60, для этого мы добавляем:
пусть randomHeight = Math.random() * 60;
поэтому мы устанавливаем randomHeight в качестве нижнего стиля в Obstacle. Для верхнего препятствия мы добавляем нижнее: препятствие Нижний + разрыв (высота неба (580) - высота земли (150) = 430). Мы вызываем функцию создания препятствия каждые 3 секунды. Теперь мы должны сделать наше препятствие подвижным для этого мы вызываем функцию moveObstacle каждые 20 мс. В нашей функции moveObstacle мы добавляем левый стиль по умолчанию 500 пикселей и уменьшаем левое значение на 2 пикселя как для препятствия, так и для верхнего препятствия. Итак, через какое-то время мы хотим, чтобы наше препятствие исчезло, для этого мы проверяем, меньше ли значение препятствия, чем -60, означает, что оно выходит за пределы нашего игрового экрана, мы удаляем дочернее препятствие и верхнее препятствие из нашего дома. Итак, теперь наша земля движется, наше препятствие возникает и исчезает, когда оно выходит за пределы нашего игрового экрана, и гравитация также применяется к нашей птице. Теперь давайте поможем нашей птице пролететь через все препятствия. Для этого мы добавляем функцию управления и прыжка. В функции управления мы вызываем прыжок всякий раз, когда пользователь нажимает пробел на клавиатуре. В функции прыжка мы проверяем, меньше ли значение birdBottom 500, мы добавляют 50px к нижнему стилю нашей птицы. Теперь давайте определим наше правило игры.
if (
(obstacleLeft › 200 &&
obstacleLeft ‹ 280 &&
birdLeft === 220 &&
(birdBottom ‹ препятствиеBottom + 153 ||
birdBottom › препятствиеBottom + зазор — 200)) ||
birdBottom === 1
)
Мы хотим, чтобы наша игра заканчивалась, когда высота нашей птицы меньше (препятствие +153) и больше (препятствие + промежуток-200). Ширина нашей птицы составляет 60 пикселей, левый стиль нашего препятствия — 500 пикселей, а левый стиль нашего птица имеет размер 220 пикселей, поэтому, если левое значение нашего препятствия находится в диапазоне от 200 до 280, это означает, что наша птица пересекает наше препятствие (ширина птиц (60) + левое значение для птицы (220) = 280 (500 (оставшееся для препятствия). )-осталось для птицы(220)).То есть в это время если наша птицаНижняя ‹препятствиеНиз(пусть 60) +150(Высота Земли) то она упрется в наземное препятствие и если наша птицаНижняя ›преградаНиз(пусть 60)+зазор(430 )-200(50(высота птицы)+высота земли(150)) он столкнется с верхним препятствием, что будет окончанием игры. Или в любое время, если birdBottom ===0 означает, что птица ударится о землю, тогда наша игра также будет over .Итак, в gameOver мы очищаем интервал timerId , он перестанет вызывать moveObstacle , значит наше препятствие перестанет двигаться Теперь в функции gameOver() мы очищаем интервал gameTimerId , значит мы останавливаемся вызов startGame означает, что создание препятствия прекратится, затем мы устанавливаем значение isGameOver в true, затем мы удаляем прослушиватель событий keyup, который вызывал функцию управления, и, наконец, мы удаляем имя класса, движущегося по земле, из нашего наземного div и добавляем класс земли к нему, чтобы земля перестала двигаться. Таким образом, мы фактически указываем нашему игроку, что игра окончена, просто останавливая все, что движется. Теперь давайте посмотрим на файл index.css:
Итак, наша игра Flappy Bird готова. Давайте посмотрим, как это выглядит:
Итак, это наша игра Flappy Bird, вы можете играть в нее и добавлять динамический счет или всплывающее окно после окончания игры, показывающее окончательный счет. В этой статье мы разработали основные необходимые функции Flappy Bird. Я добавляю ссылку на видео и свою ссылку на github в качестве ссылки на эту статью:
Видео:
Код:
УДАЧНОГО ПРОГРАММИРОВАНИЯ… :)
