Переписывание CSS, создание волн появления врагов и добавление хитпойнтов: пошаговое руководство
Добро пожаловать в мою серию блогов о разработке игр! В прошлой статье мы начали разработку кликер-защиты с использованием React и GPT. Мы добились больших успехов, настроив игровое поле и макет панели настроек на ванильном JavaScript, но позже мы перешли на библиотеку React, чтобы сделать наш код более надежным и масштабируемым. Мы также создали класс врагов и визуализировали его на холсте, что позволило нам убить их, нажав на их спрайт.
∘ Переписывание CSS
∘ Добавление врагов в волны
∘ Изменение боковой панели
∘ Враги теперь появляются по всей волне
∘ Добавление босса
∘ Почему пользователь должен тщательно продумывать свой код, прежде чем его писать
∘ Добавление хитпойнтов и границ
∘ Вывод:
Теперь давайте вернемся к этому и посмотрим, какого прогресса мы добились в разработке нашей игры в жанре защиты от кликеров!
Переписывание CSS
Нашим первым шагом было переписать CSS так, чтобы в игру можно было играть горизонтально, а не вертикально. Это было необходимо, потому что нам нужно было больше места для боя. Благодаря этому у игрока в 2 раза больше времени, чтобы нажать на спрайт, прежде чем он уйдет с экрана.
Заставить врагов появляться волнами
Мы хотели сделать нашу игру более сложной, заставляя врагов появляться постепенно. Это означало, что враги начнут появляться в медленном темпе и постепенно увеличиваться в количестве по ходу игры. Чтобы достичь этого, chatGPT сгенерировал цикл for, чтобы добавлять все больше и больше врагов в более продвинутые волны.
Изменение боковой панели
Нам пришлось изменить CSS, чтобы он соответствовал новой позиции. Это было бы утомительной задачей, если бы у меня не было моего приятеля-искусственного интеллекта. Нужно было только сказать ему заменить строки на столбцы и столбцы на строки. После нескольких попыток подсказки расположение было правильным. Теперь мы могли идти вперед, сталкиваясь с новыми вызовами.
Враги теперь появляются по всей волне
Поскольку у всех врагов была одинаковая начальная позиция X, они появлялись рядом друг с другом. Чтобы этого не произошло, я добавил к их начальной позиции случайное отрицательное число от 1 до 1000, поэтому им требуется некоторое время, чтобы добраться до экрана.
Добавление босса
Чтобы сделать игру более сложной, мы решили добавить в игру босса. Он получил значительное количество жизней и вялую скорость. Мы также экспериментировали с движением по оси Y, чтобы сделать босса более динамичным и непредсказуемым. Но из-за того, что он был медленным, я решил дать эту функцию другому, более мобильному типу врага.
Почему использование должно продумывать ваш код, прежде чем вы его напишете
Мы попытались использовать вражеский класс для рендеринга элемента, что позволило бы мне легко вызывать такие методы, как move() или die(), которые сэкономили бы мне код по сравнению с текущей системой. Несмотря на все наши усилия, нам не удалось заставить вражеский класс работать должным образом. Это было связано с тем, что это было похоже на восстановление фундамента небоскреба, и когда мы решили одну ошибку с кодом, появилось еще 5. Это была неудача, но мы не позволили ей обескуражить нас и продолжили разработку игры.
Добавление хитпойнтов и границы
Мы добавили хитпойнты и рамку врагам, чтобы сделать их более заметными и более удобными для нацеливания. Это также облегчило игрокам различение врагов и дало им представление о том, сколько кликов им придется сделать.
Вывод:
В заключение, мы прошли долгий путь в разработке нашей игры в защиту кликера. Мы начали с простой концепции и развивали ее, добавляя новые функции и возможности по ходу дела. От переписывания CSS до экспериментов с движением и добавления точек и границ — мы многое узнали о разработке игр и о важности продумывания кода перед его написанием.
Но наше путешествие далеко не закончено. У нас еще есть много идей и функций для реализации, и мы рады продолжить работу над этим проектом. Мы приглашаем вас присоединиться к нам в этом путешествии, поделившись своими отзывами и предложениями в комментариях ниже. Что вам нравится в игре на данный момент? Что можно улучшить? Ждем вашего ответа!
Спасибо, что следите за нашей серией блогов о разработке игр, и мы надеемся увидеть вас снова в ближайшее время, чтобы узнать больше об обновлениях и прогрессе в нашей игре по защите кликеров. Первую часть можно посмотреть здесь.
