Как создать Super Mario Bros, Zelda и Space Invaders с помощью Kaboom.js

1656044294 kak sozdat super mario bros zelda i space invaders s

В этом видеокурсе я покажу вам, как создать три популярных игры, используя последнюю библиотеку разработки игр для JavaScript под названием Kaboom.js.

Этот курс увлекательный по двум причинам:

Прежде всего, я намерен представить новую технологию, разработанную специально для разработки игр на JavaScript.

Во-вторых, я собираюсь использовать эту технологию, чтобы шаг за шагом рассказать вам как создать некоторые классические игры, такие как Super Mario Bros, Zelda и Space Invaders.

Что такое Kaboom.js?

Итак, прежде чем мы перейдем ко всему этому, давайте начнем по первой причине, почему этот курс увлекательный – с новой технологией.

Kaboom.js – это библиотека JavaScript, которая помогает быстро создавать игры. Мы собираемся использовать эту библиотеку для упрощения создания сцен, добавления слоев, создания спрайтов, решения действий и коллизий, добавления ключевых событий, отладки и многое другое.

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

kaboomjs

Что мы рассмотрим на этом курсе

В этом курсе я покажу вам, как кодировать общую игру с помощью методов Kaboom.js в предварительно настроенной среде. Затем мы перейдем к созданию игры Space Invaders, а затем Super Mario Bros, в той же предварительно настроенной среде.

После того, как мы закончим обе эти игры, мы создадим Zelda полностью с нуля. Мы закончим раздел о том, где вы можете поделиться своими играми друг с другом, а также о том, как использовать Kaboom.js в VS Code.

Теперь, когда мы рассказали об этом, давайте перейдем к настройке среды и ознакомлению с некоторыми основами Kaboom.js, чтобы потом вы могли погрузиться в полный видеокурс! Мы также рассмотрим это в видео, поэтому если вы застряли, обратитесь за помощью к видеокурсу.

Как использовать среду Replit Kaboom.js

Чтобы получить код сразу, мы будем использовать среду Kaboom.js на Replit. Эта среда избавит нас от необходимости писать методы жизненного цикла Kaboom, такие как инициализация Kaboom или добавление сцен.

Это также позволит нам создавать проблемы непосредственно в самой среде.

kaboomjs-пройти

Если вы хотите знать, как настроить Kaboom.js с нуля в вашем редактор кода по выбору, в конце курса есть краткая глава, посвященная этому.

Перейдите к Replit и создайте свою первую среду Kaboom.js, нажав здесь.

Как пользоваться Kaboom.js – Основы

Для этого курса мы будем использовать Kaboom.js версия 0.5.0.

В этой главе я собираюсь рассмотреть основные концепции и методы Kaboom.js. Я собираюсь показать вам, как прибавлять спрашивать, перемещать наши спрейты, бороться с столкновениями, а также покажу вам все, что мы можем с этим делать.

Когда мы получим основы, мы используем эти знания для создания трех наших игр. И по дороге мы узнаем еще кучу.

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

Единственная предпосылка, которую вам нужно иметь, – это базовое понимание основ JavaScript перед началом этого курса. Но если вы чувствуете себя авантюрным, пожалуйста, все равно попытайтесь следовать.

Как я уже говорил, эта библиотека имеет целью значительно облегчить кодировку JavaScript, предоставив уровень «ярлыков», если хотите, для создания игр.

Как добавить слои

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

В следующем примере я определил три слоя из obj слой по умолчанию.

layers([
    "bg",
    "obj",
    "ui",
], "obj")

Как добавить пройти

Далее, давайте добавим спрайты. Для этого просто создайте спрайт непосредственно в среде Replit Kaboom.js, нажав кнопку раскрывающегося меню под словом «Sprite» на панели инструментов слева. Воспользуйтесь следующим наглядным наглядником или просмотрите видеокурс.

kaboom-sprite

После того, как вы создали спрайт, воспользуйтесь методом add Kaboom, а затем методом Kaboom для спрайтов и передайте имя того, что вы назвали своим спрайтом в виде строки.

В этом случае я назвал своего спрайта «игроком». Не забудьте назначить его константе, чтобы вы могли повторно использовать его позже.

const player = add([
    sprite("player"),
])

Как переместить спрайт

Далее давайте переместим спрайты. С помощью метода Kaboom keyDown и передавая строку для нажатой клавиши, а также функцию, я могу вызвать эту функцию каждый раз при нажатии указанной клавиши. Тогда я бы использовал move Метод Kaboom для перемещения игрока, проходя через оси X и Y.

В моем примере ниже ось X 100 и Y есть 0. Это означает, что наш игрок будет двигаться вправо на игровой доске всякий раз, когда я нажимаю клавишу со стрелкой вправо.

keyDown('right', () => {
    player.move(100,0)
})

Как добавить текст

Мы также можем добавить текст в нашу игру. Например, я могу добавить текст, отображающий оценку.

На данный момент он жестко закодирован в строку 0. С помощью метода Kaboom layerя могу убедиться, что этот текст есть на ui слой, который мы создали раньше. Таким образом, это не будет мешать моим спрайтам.

const score = add([
    text("0"),
    layer("ui"),
])

Как бороться с столкновениями

Существует множество способов борьбы с коллизией с помощью Kaboom.js. Один из способов – захватить игрока и использовать метод Kaboom collides.

В примере ниже, если мой игрок столкнется с любым спрайтом из tag ‘опасных’, он будет уничтожен благодаря destroy Метод Kaboom.

player.collides('dangerous', () => {
    destroy(player)
})

Пойдем!

Ладно, теперь, когда мы рассмотрели основы, давайте приступим к курсу!

Этот курс стал возможен благодаря гранту от Replit.

Подпишитесь на дополнительные видео о разработке программного обеспечения:

Код с Анией Кубов

Привет всем. Меня зовут Аня Кубоу, и я разработчик программного обеспечения в течение дня, который любит преподавать код, создавая ретро-игры и удивительные проекты вечером. Я также являюсь частью основной команды @ FreeCodeCamp. Вы можете найти, как я публикую видео там, а также на моем собственном канале накануне…

AAUvwnjSRt8sIbeM7P--pHoUDh67sDhaNTCMF_XiNOCvUw=s900-ck-c0x00ffffff-no-rj

Добавить комментарий

Ваш адрес email не будет опубликован.